refactor(ow-ui): tooltip, thread modules, storybook addons

.storybook/main.ts

@@ -9,7 +9,9 @@ const config: StorybookConfig = {
     "@storybook/addon-vitest",
     "@storybook/addon-a11y",
     "@storybook/addon-docs",
-    "@storybook/addon-mcp"
+    "@storybook/addon-mcp",
+    "@github-ui/storybook-addon-performance-panel",
+    "@chromatic-com/storybook"
   ],
   "framework": "@storybook/nextjs-vite",
   "staticDirs": [

.storybook/preview.tsx

@@ -1,4 +1,5 @@
 import type { Preview } from '@storybook/nextjs-vite';
+import perfPanelPreview from '@github-ui/storybook-addon-performance-panel/preview';
 import { INITIAL_VIEWPORTS } from 'storybook/viewport';
 import { Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/addon-docs/blocks';
 import '../app/globals.css';
@@ -40,4 +41,11 @@ const preview: Preview = {
   },
 };
 
-export default preview;
+export default {
+  ...perfPanelPreview,
+  ...preview,
+  decorators: [
+    ...(perfPanelPreview.decorators ?? []),
+    ...(preview.decorators ?? []),
+  ],
+} satisfies Preview;

app/(blog)/tin-tuc/[slug]/page.tsx

@@ -5,8 +5,8 @@ import {notFound} from 'next/navigation';
 import {MDXRemote} from 'next-mdx-remote/rsc';
 import {getAllPosts, getPostBySlug, getRelatedPosts} from '@/lib/mdx';
 import {RelatedPosts} from '@/components/blog/related-posts';
-import {OwButton} from '@/components/ow-ui/ow-button';
-import {OwBadge} from '@/components/ow-ui/ow-badge';
+import {OwButton} from '@/components/owui/ow-button';
+import {OwBadge} from '@/components/owui/ow-badge';
 import {SidebarRelatedCards} from '@/components/blog/sidebar-related-cards';
 import {makeMdxComponents} from '@/components/blog/mdx-components';
 import {remarkAutoLink} from '@/lib/remark-auto-link';

app/(blog)/tin-tuc/category/[category]/page.tsx

@@ -4,7 +4,7 @@ import {ROUTES} from '@/lib/routes';
 // import {PostList} from '@/components/blog/post-list';
 // import {CategoryFilter} from '@/components/blog/category-filter';
 import {BlogPageShell} from '@/components/layout/blog-page-shell';
-import {OwPostList} from '@/components/ow-ui/ow-post-list';
+import {OwPostList} from '@/components/owui/ow-post-list';
 import {buildCollectionPageMeta} from '@/lib/page-meta/collection';
 import {SITE_NAME} from '@/lib/page-meta/title';
 

app/(blog)/tin-tuc/page.tsx

@@ -6,8 +6,8 @@ import {ROUTES} from '@/lib/routes';
 import {BlogPageShell} from '@/components/layout/blog-page-shell';
 import {SITE_NAME} from '@/lib/page-meta/title';
 import {buildCollectionPageMeta} from '@/lib/page-meta/collection';
-import {OwFeaturedPosts} from '@/components/ow-ui/ow-featured-posts';
-import {OwPostList} from '@/components/ow-ui/ow-post-list';
+import {OwFeaturedPosts} from '@/components/owui/ow-featured-posts';
+import {OwPostList} from '@/components/owui/ow-post-list';
 
 const BREADCRUMB_ITEMS = [
     {label: 'Trang chủ', href: '/'},

app/(marketing)/(about)/ve-openwallet/page.tsx

@@ -1,6 +1,6 @@
 import type {Metadata} from 'next';
 import Link from 'next/link';
-import {OwButton} from '@/components/ow-ui/ow-button';
+import {OwButton} from '@/components/owui/ow-button';
 import {ProsePageShell} from '@/components/layout/prose-page-shell';
 import {buildTitle} from '@/lib/page-meta/title';
 import {buildBreadcrumbJsonLd} from '@/lib/page-meta/breadcrumb';

app/(marketing)/(legal)/chinh-sach-bao-mat/page.tsx

@@ -1,6 +1,6 @@
 import type {Metadata} from 'next';
 import Link from 'next/link';
-import {OwButton} from '@/components/ow-ui/ow-button';
+import {OwButton} from '@/components/owui/ow-button';
 import {ProsePageShell} from '@/components/layout/prose-page-shell';
 import {buildTitle} from '@/lib/page-meta/title';
 import {buildBreadcrumbJsonLd} from '@/lib/page-meta/breadcrumb';

app/(marketing)/(legal)/dieu-khoan/page.tsx

@@ -1,6 +1,6 @@
 import type {Metadata} from 'next';
 import Link from 'next/link';
-import {OwButton} from '@/components/ow-ui/ow-button';
+import {OwButton} from '@/components/owui/ow-button';
 import {ProsePageShell} from '@/components/layout/prose-page-shell';
 import {buildTitle} from '@/lib/page-meta/title';
 import {buildBreadcrumbJsonLd} from '@/lib/page-meta/breadcrumb';

app/(marketing)/(legal)/mien-tru-trach-nhiem/page.tsx

@@ -1,6 +1,6 @@
 import type {Metadata} from 'next';
 import Link from 'next/link';
-import {OwButton} from '@/components/ow-ui/ow-button';
+import {OwButton} from '@/components/owui/ow-button';
 import {ProsePageShell} from '@/components/layout/prose-page-shell';
 import {buildTitle} from '@/lib/page-meta/title';
 import {buildBreadcrumbJsonLd} from '@/lib/page-meta/breadcrumb';

app/(marketing)/(persona)/linh-vuc/page.tsx

@@ -5,8 +5,8 @@ import {MarketingPageShell} from '@/components/layout/marketing-page-shell';
 import {buildCollectionPageMeta} from '@/lib/page-meta/collection';
 import {buildTitle, SECTION_TITLES} from '@/lib/page-meta/title';
 import Link from 'next/link';
-import {OwButton} from '@/components/ow-ui/ow-button';
-import {OwWobbleCard} from '@/components/ow-ui/ow-wobble-card';
+import {OwButton} from '@/components/owui/ow-button';
+import {OwWobbleCard} from '@/components/owui/ow-wobble-card';
 
 export const revalidate = 3600;
 

app/(marketing)/loai-the/page.tsx

@@ -5,7 +5,7 @@ import {buildCollectionPageMeta} from '@/lib/page-meta/collection';
 import {buildTitle, SECTION_TITLES} from '@/lib/page-meta/title';
 import {ROUTES} from '@/lib/routes';
 import {CARD_TYPE_LABELS, CARD_TYPE_HEX, CARD_TYPE_ICON, CARD_TYPE_SLUGS} from '@/lib/card-model';
-import {OwWobbleCard} from '@/components/ow-ui/ow-wobble-card';
+import {OwWobbleCard} from '@/components/owui/ow-wobble-card';
 import type {CardType} from '@/lib/api';
 import {getBanks, getCards} from '@/lib/api';
 import {getPersonaTopCards} from '@/lib/persona-top-cards';

app/(marketing)/ngan-hang/page.tsx

@@ -1,6 +1,6 @@
 import type {Metadata} from 'next';
 import {getBanks} from '@/lib/api';
-import {OwBankRow} from '@/components/ow-ui/ow-bank-row';
+import {OwBankRow} from '@/components/owui/ow-bank-row';
 import {buildCollectionPageMeta} from '@/lib/page-meta/collection';
 import {MarketingPageShell} from '@/components/layout/marketing-page-shell';
 import {ROUTES} from '@/lib/routes';

app/(marketing)/the/[slug]/page.tsx

@@ -4,15 +4,15 @@ import {cn} from '@/lib/utils';
 import {getBank, getCard, getCards, getRelatedCards} from '@/lib/api';
 import {CardModel} from '@/lib/card-model';
 import {ChatContextSetter} from '@/components/chat/chat-context-setter';
-import {OwCardImage} from '@/components/ow-ui/ow-card-image';
+import {OwCardImage} from '@/components/owui/ow-card-image';
 import {Breadcrumbs} from '@/components/layout/breadcrumbs';
 import {buildCardPageMeta} from '@/lib/page-meta/card';
 import {buildTitle, SECTION_TITLES} from '@/lib/page-meta/title';
 import {CardDetailHeader} from '@/components/cards/detail/card-detail-header';
 import {CardDetailBillingCycle} from '@/components/cards/detail/card-detail-billing-cycle';
 import {CardDetailFees} from '@/components/cards/detail/card-detail-fees';
 import {CardDetailOtherFees} from '@/components/cards/detail/card-detail-other-fees';
-import {OwSourceList} from '@/components/ow-ui/ow-source-list';
+import {OwSourceList} from '@/components/owui/ow-source-list';
 import {CardDetailLastModified} from '@/components/cards/detail/card-detail-last-modified';
 import {CardDetailRelated} from '@/components/cards/detail/card-detail-related';
 import {CardDetailCompare} from '@/components/cards/detail/card-detail-compare';

app/(marketing)/the/page.tsx

@@ -5,7 +5,7 @@ import {CardsGrid} from '@/components/cards/cards-grid';
 import {buildCollectionPageMeta} from '@/lib/page-meta/collection';
 import {MarketingPageShell} from '@/components/layout/marketing-page-shell';
 import {OpenOwieButton} from '@/components/chat/open-owie-button';
-import {OwBadge, OwBadges} from '@/components/ow-ui/ow-badge';
+import {OwBadge, OwBadges} from '@/components/owui/ow-badge';
 import {PersonaModel} from '@/lib/persona-model';
 import {ROUTES} from '@/lib/routes';
 import {buildTitle, SECTION_TITLES} from '@/lib/page-meta/title';

app/error.tsx

@@ -2,8 +2,8 @@
 
 import Link from 'next/link';
 import {IconAlertTriangle, IconWifi} from '@tabler/icons-react';
-import {OwLogo} from '@/components/ow-ui/ow-logo';
-import {OwButton} from "@/components/ow-ui/ow-button";
+import {OwLogo} from '@/components/owui/ow-logo';
+import {OwButton} from "@/components/owui/ow-button";
 
 function isApiConnectionError(error: Error): boolean {
   const msg = error.message.toLowerCase();

app/layout.tsx

@@ -8,7 +8,7 @@ import {OverlayScrollbarsBody} from '@/components/layout/overlay-scrollbars-body
 import {PreviewBanner} from '@/components/layout/preview-banner';
 import {cn} from '@/lib/utils';
 import {TooltipProvider} from '@/components/ui/tooltip';
-import {OwOwieFab} from '@/components/ow-ui/ow-owie-fab';
+import {OwOwieFab} from '@/components/owui/ow-owie-fab';
 import {ChatProvider} from '@/components/chat/chat-provider';
 import {ChatPanel} from '@/components/chat/chat-panel';
 import "./globals.css";

app/not-found.tsx

@@ -1,8 +1,8 @@
 import Link from 'next/link';
 import { IconError404 } from '@tabler/icons-react';
 import { SoSanh404Redirect } from '@/components/layout/so-sanh-404-redirect';
-import { OwLogo } from '@/components/ow-ui/ow-logo';
-import {OwButton} from '@/components/ow-ui/ow-button';
+import { OwLogo } from '@/components/owui/ow-logo';
+import {OwButton} from '@/components/owui/ow-button';
 
 export default function NotFound() {
   return (

components/assistant-ui/attachment.tsx

@@ -22,7 +22,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Avatar, AvatarImage, AvatarFallback } from "@/components/assistant-ui/avatar";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import {OwTooltipIconButton} from "@/components/owui/ow-tooltip-icon-button";
 import { cn } from "@/lib/utils";
 
 const useFileSrc = (file: File | undefined) => {
@@ -174,13 +174,13 @@ const AttachmentUI: FC = () => {
 const AttachmentRemove: FC = () => {
   return (
     <AttachmentPrimitive.Remove asChild>
-      <TooltipIconButton
+      <OwTooltipIconButton
         tooltip="Remove file"
         className="aui-attachment-tile-remove absolute end-1.5 top-1.5 size-3.5 rounded-full bg-white text-muted-foreground opacity-100 shadow-sm hover:bg-white! [&_svg]:text-black hover:[&_svg]:text-destructive"
         side="top"
       >
         <XIcon className="aui-attachment-remove-icon size-3 dark:stroke-[2.5px]" />
-      </TooltipIconButton>
+      </OwTooltipIconButton>
     </AttachmentPrimitive.Remove>
   );
 };
@@ -208,7 +208,7 @@ export const ComposerAttachments: FC = () => {
 export const ComposerAddAttachment: FC = () => {
   return (
     <ComposerPrimitive.AddAttachment asChild>
-      <TooltipIconButton
+      <OwTooltipIconButton
         tooltip="Add Attachment"
         side="bottom"
         variant="ghost"
@@ -217,7 +217,7 @@ export const ComposerAddAttachment: FC = () => {
         aria-label="Add Attachment"
       >
         <PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
-      </TooltipIconButton>
+      </OwTooltipIconButton>
     </ComposerPrimitive.AddAttachment>
   );
 };