@tetrascience-npm/tetrascience-react-ui 0.6.0 → 0.7.0-beta.103.1

package/README.md

@@ -392,6 +392,61 @@ Visit <http://localhost:6006>.
 - [Theming Guide](./THEMING.md) - Customise the design system
 - [Contributing](./CONTRIBUTING.md#development-setup) - Clone the repo and run `yarn storybook`
 
+## MCP server (for AI coding agents)
+
+This library exposes an [MCP](https://modelcontextprotocol.io/) server so AI
+coding agents (Claude Code, Cursor, Claude Desktop) can query authoritative
+component lists, prop/variant options, and usage examples instead of guessing —
+reducing hallucinated component APIs when scaffolding a data app.
+
+There are two endpoints. Pick whichever fits; you can add both.
+
+| Endpoint | URL | Tools |
+| --- | --- | --- |
+| **Deployed** (no local checkout needed) | `https://ts-lib-ui-kit-storybook.vercel.app/api/mcp` | docs: `list_components`, `get_component`, `search_components` |
+| **Local** (needs `yarn storybook` running) | `http://localhost:6006/mcp` | full set: docs **+** write/preview/test stories |
+
+### Add the connection
+
+**Claude Code** — register the deployed server (HTTP transport):
+
+```bash
+claude mcp add --transport http ts-ui-kit https://ts-lib-ui-kit-storybook.vercel.app/api/mcp
+```
+
+Use `--scope project` to share it with your team via a checked-in `.mcp.json`, or
+`--scope user` to make it available across all your projects. For the local
+server, run `yarn storybook` first, then:
+
+```bash
+claude mcp add --transport http ts-ui-kit-local http://localhost:6006/mcp
+```
+
+**Cursor / Claude Desktop / other clients** — add an HTTP MCP server to the
+client's MCP config (e.g. Cursor's `.cursor/mcp.json`, or Claude Desktop's
+`claude_desktop_config.json`):
+
+```json
+{
+  "mcpServers": {
+    "ts-ui-kit": {
+      "type": "http",
+      "url": "https://ts-lib-ui-kit-storybook.vercel.app/api/mcp"
+    }
+  }
+}
+```
+
+**Any client (generic helper):**
+
+```bash
+npx mcp-add --type http --url "https://ts-lib-ui-kit-storybook.vercel.app/api/mcp"
+```
+
+Then ask your agent something like *"using the ts-ui-kit MCP, list the available
+components"* or *"build a form using ts-ui-kit primitives"* to confirm it's wired
+up.
+
 ## Tech Stack
 
 - React 19

package/dist/components/ai/chain-of-thought.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("lucide-react"),i=require("../ui/collapsible.cjs"),s=require("../../lib/utils.cjs"),h=({className:t,defaultOpen:a=!0,...o})=>e.jsx(i.Collapsible,{className:s.cn("overflow-hidden rounded-lg text-sm",t),defaultOpen:a,...o}),u=({className:t,children:a,title:o="Chain of Thought",icon:r,isStreaming:n=!1,...p})=>e.jsx(i.CollapsibleTrigger,{className:s.cn("group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",t),...p,children:a??e.jsxs(e.Fragment,{children:[r??e.jsx(l.Brain,{className:"size-4 text-muted-foreground"}),e.jsxs("span",{className:"flex-1 text-left items-center gap-2",children:[o,n&&e.jsx("span",{className:"size-1.5 animate-pulse rounded-full bg-primary"})]}),e.jsx(l.ChevronUpIcon,{className:"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180","data-slot":"collapsible-chevron"})]})}),c=({className:t,...a})=>e.jsx(i.CollapsibleContent,{className:s.cn("flex flex-col gap-2.5 pb-4 pt-3","data-[state=closed]:animate-out data-[state=open]:animate-in","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",t),...a}),x={bullet:e.jsx("span",{className:"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50"}),search:e.jsx(l.SearchIcon,{className:"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground"}),image:e.jsx(l.ImageIcon,{className:"mt-0.5 size-3.5 shrink-0 text-muted-foreground"})},d=({variant:t="bullet",className:a,children:o,...r})=>{const n=typeof t=="string"?x[t]:t;return e.jsxs("div",{className:s.cn("flex items-start gap-2 text-muted-foreground",a),...r,children:[e.jsx("span",{className:"flex shrink-0",children:n}),e.jsx("span",{className:"min-w-0 flex-1 leading-relaxed",children:o})]})},g=({className:t,...a})=>e.jsx("div",{className:s.cn("ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3",t),...a}),m=({className:t,children:a,...o})=>e.jsx("a",{className:s.cn("inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors",o.href&&"cursor-pointer hover:bg-muted hover:text-foreground",t),rel:"noreferrer",target:"_blank",...o,children:a}),f=({src:t,alt:a="",caption:o,className:r,...n})=>e.jsxs("figure",{className:s.cn("ml-[22px] overflow-hidden rounded-lg border",r),...n,children:[e.jsx("img",{alt:a,className:"max-h-64 w-full object-cover",src:t}),o&&e.jsx("figcaption",{className:"border-t px-3 py-2 text-xs italic text-muted-foreground/70",children:o})]});h.displayName="ChainOfThought";u.displayName="ChainOfThoughtTrigger";c.displayName="ChainOfThoughtContent";d.displayName="ChainOfThoughtStep";g.displayName="ChainOfThoughtSources";m.displayName="ChainOfThoughtSource";f.displayName="ChainOfThoughtImage";exports.ChainOfThought=h;exports.ChainOfThoughtContent=c;exports.ChainOfThoughtImage=f;exports.ChainOfThoughtSource=m;exports.ChainOfThoughtSources=g;exports.ChainOfThoughtStep=d;exports.ChainOfThoughtTrigger=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("lucide-react"),i=require("../ui/collapsible.cjs"),s=require("../../lib/utils.cjs"),h=({className:t,defaultOpen:a=!0,...o})=>e.jsx(i.Collapsible,{className:s.cn("overflow-hidden rounded-lg text-sm",t),defaultOpen:a,...o}),c=({className:t,children:a,title:o="Chain of Thought",icon:r,isStreaming:n=!1,...p})=>e.jsx(i.CollapsibleTrigger,{className:s.cn("group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground",t),...p,children:a??e.jsxs(e.Fragment,{children:[r??e.jsx(l.Brain,{className:"size-4 text-muted-foreground"}),e.jsxs("span",{className:"flex-1 text-left items-center gap-2",children:[o,n&&e.jsx("span",{className:"size-1.5 animate-pulse rounded-full bg-primary"})]}),e.jsx(l.ChevronUpIcon,{className:"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180","data-slot":"collapsible-chevron"})]})}),u=({className:t,...a})=>e.jsx(i.CollapsibleContent,{className:s.cn("flex flex-col gap-2.5 pb-4 pt-3","data-[state=closed]:animate-out data-[state=open]:animate-in","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1",t),...a}),x={bullet:e.jsx("span",{className:"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50"}),search:e.jsx(l.SearchIcon,{className:"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground"}),image:e.jsx(l.ImageIcon,{className:"mt-0.5 size-3.5 shrink-0 text-muted-foreground"})},d=({variant:t="bullet",className:a,children:o,...r})=>{const n=typeof t=="string"?x[t]:t;return e.jsxs("div",{className:s.cn("flex items-start gap-2 text-muted-foreground",a),...r,children:[e.jsx("span",{className:"flex shrink-0",children:n}),e.jsx("span",{className:"min-w-0 flex-1 leading-relaxed",children:o})]})},g=({className:t,...a})=>e.jsx("div",{className:s.cn("ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3",t),...a}),m=({className:t,children:a,...o})=>e.jsx("a",{className:s.cn("inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors",o.href&&"cursor-pointer hover:bg-accent hover:text-accent-foreground",t),rel:"noreferrer",target:"_blank",...o,children:a}),f=({src:t,alt:a="",caption:o,className:r,...n})=>e.jsxs("figure",{className:s.cn("ml-[22px] overflow-hidden rounded-lg border",r),...n,children:[e.jsx("img",{alt:a,className:"max-h-64 w-full object-cover",src:t}),o&&e.jsx("figcaption",{className:"border-t px-3 py-2 text-xs italic text-muted-foreground/70",children:o})]});h.displayName="ChainOfThought";c.displayName="ChainOfThoughtTrigger";u.displayName="ChainOfThoughtContent";d.displayName="ChainOfThoughtStep";g.displayName="ChainOfThoughtSources";m.displayName="ChainOfThoughtSource";f.displayName="ChainOfThoughtImage";exports.ChainOfThought=h;exports.ChainOfThoughtContent=u;exports.ChainOfThoughtImage=f;exports.ChainOfThoughtSource=m;exports.ChainOfThoughtSources=g;exports.ChainOfThoughtStep=d;exports.ChainOfThoughtTrigger=c;
 //# sourceMappingURL=chain-of-thought.cjs.map

package/dist/components/ai/chain-of-thought.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chain-of-thought.cjs","sources":["../../../src/components/ai/chain-of-thought.tsx"],"sourcesContent":["import { Brain, ChevronUpIcon, ImageIcon, SearchIcon } from \"lucide-react\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\n// ---------------------------------------------------------------------------\n// ChainOfThought (root)\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtProps = ComponentProps<typeof Collapsible>;\n\nexport const ChainOfThought = ({\n  className,\n  defaultOpen = true,\n  ...props\n}: ChainOfThoughtProps) => (\n  <Collapsible\n    className={cn(\"overflow-hidden rounded-lg text-sm\", className)}\n    defaultOpen={defaultOpen}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtTrigger\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {\n  title?: string;\n  icon?: ReactNode;\n  /** When true, renders a subtle animated dot next to the title. */\n  isStreaming?: boolean;\n};\n\nexport const ChainOfThoughtTrigger = ({\n  className,\n  children,\n  title = \"Chain of Thought\",\n  icon,\n  isStreaming = false,\n  ...props\n}: ChainOfThoughtTriggerProps) => (\n  <CollapsibleTrigger\n    className={cn(\n      \"group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon ?? <Brain className=\"size-4 text-muted-foreground\" />}\n        <span className=\"flex-1 text-left items-center gap-2\">\n          {title}\n          {isStreaming && (\n            <span className=\"size-1.5 animate-pulse rounded-full bg-primary\" />\n          )}\n        </span>\n        <ChevronUpIcon\n          className=\"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180\"\n          data-slot=\"collapsible-chevron\"\n        />\n      </>\n    )}\n  </CollapsibleTrigger>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtContent\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const ChainOfThoughtContent = ({\n  className,\n  ...props\n}: ChainOfThoughtContentProps) => (\n  <CollapsibleContent\n    className={cn(\n      \"flex flex-col gap-2.5 pb-4 pt-3\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      \"data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtStep\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtStepVariant = \"bullet\" | \"search\" | \"image\";\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n  /**\n   * Visual prefix for the step.\n   * - `\"bullet\"` — small dot (default, plain reasoning text)\n   * - `\"search\"` — magnifying-glass (web search / tool call)\n   * - `\"image\"` — image icon (image fetch / vision step)\n   * - ReactNode — custom icon\n   */\n  variant?: ChainOfThoughtStepVariant | ReactNode;\n};\n\nconst STEP_ICONS: Record<ChainOfThoughtStepVariant, ReactNode> = {\n  bullet: (\n    <span className=\"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50\" />\n  ),\n  search: <SearchIcon className=\"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground\" />,\n  image: <ImageIcon className=\"mt-0.5 size-3.5 shrink-0 text-muted-foreground\" />,\n};\n\nexport const ChainOfThoughtStep = ({\n  variant = \"bullet\",\n  className,\n  children,\n  ...props\n}: ChainOfThoughtStepProps) => {\n  const icon =\n    typeof variant === \"string\"\n      ? STEP_ICONS[variant as ChainOfThoughtStepVariant]\n      : variant;\n\n  return (\n    <div\n      className={cn(\"flex items-start gap-2 text-muted-foreground\", className)}\n      {...props}\n    >\n      <span className=\"flex shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1 leading-relaxed\">{children}</span>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtSources — inline chip group with left bar\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtSourcesProps = ComponentProps<\"div\">;\n\nexport const ChainOfThoughtSources = ({\n  className,\n  ...props\n}: ChainOfThoughtSourcesProps) => (\n  <div\n    className={cn(\n      \"ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3\",\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtSourceProps = ComponentProps<\"a\">;\n\nexport const ChainOfThoughtSource = ({\n  className,\n  children,\n  ...props\n}: ChainOfThoughtSourceProps) => (\n  <a\n    className={cn(\n      \"inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors\",\n      props.href && \"cursor-pointer hover:bg-muted hover:text-foreground\",\n      className\n    )}\n    rel=\"noreferrer\"\n    target=\"_blank\"\n    {...props}\n  >\n    {children}\n  </a>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtImage — inline image with optional caption\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"figure\"> & {\n  src: string;\n  alt?: string;\n  caption?: string;\n};\n\nexport const ChainOfThoughtImage = ({\n  src,\n  alt = \"\",\n  caption,\n  className,\n  ...props\n}: ChainOfThoughtImageProps) => (\n  <figure\n    className={cn(\"ml-[22px] overflow-hidden rounded-lg border\", className)}\n    {...props}\n  >\n    <img alt={alt} className=\"max-h-64 w-full object-cover\" src={src} />\n    {caption && (\n      <figcaption className=\"border-t px-3 py-2 text-xs italic text-muted-foreground/70\">\n        {caption}\n      </figcaption>\n    )}\n  </figure>\n);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtTrigger.displayName = \"ChainOfThoughtTrigger\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtSources.displayName = \"ChainOfThoughtSources\";\nChainOfThoughtSource.displayName = \"ChainOfThoughtSource\";\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\";\n"],"names":["ChainOfThought","className","defaultOpen","props","jsx","Collapsible","cn","ChainOfThoughtTrigger","children","title","icon","isStreaming","CollapsibleTrigger","jsxs","Fragment","Brain","ChevronUpIcon","ChainOfThoughtContent","CollapsibleContent","STEP_ICONS","SearchIcon","ImageIcon","ChainOfThoughtStep","variant","ChainOfThoughtSources","ChainOfThoughtSource","ChainOfThoughtImage","src","alt","caption"],"mappings":"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"}
+{"version":3,"file":"chain-of-thought.cjs","sources":["../../../src/components/ai/chain-of-thought.tsx"],"sourcesContent":["import { Brain, ChevronUpIcon, ImageIcon, SearchIcon } from \"lucide-react\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\n// ---------------------------------------------------------------------------\n// ChainOfThought (root)\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtProps = ComponentProps<typeof Collapsible>;\n\nexport const ChainOfThought = ({\n  className,\n  defaultOpen = true,\n  ...props\n}: ChainOfThoughtProps) => (\n  <Collapsible\n    className={cn(\"overflow-hidden rounded-lg text-sm\", className)}\n    defaultOpen={defaultOpen}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtTrigger\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {\n  title?: string;\n  icon?: ReactNode;\n  /** When true, renders a subtle animated dot next to the title. */\n  isStreaming?: boolean;\n};\n\nexport const ChainOfThoughtTrigger = ({\n  className,\n  children,\n  title = \"Chain of Thought\",\n  icon,\n  isStreaming = false,\n  ...props\n}: ChainOfThoughtTriggerProps) => (\n  <CollapsibleTrigger\n    className={cn(\n      \"group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon ?? <Brain className=\"size-4 text-muted-foreground\" />}\n        <span className=\"flex-1 text-left items-center gap-2\">\n          {title}\n          {isStreaming && (\n            <span className=\"size-1.5 animate-pulse rounded-full bg-primary\" />\n          )}\n        </span>\n        <ChevronUpIcon\n          className=\"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180\"\n          data-slot=\"collapsible-chevron\"\n        />\n      </>\n    )}\n  </CollapsibleTrigger>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtContent\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const ChainOfThoughtContent = ({\n  className,\n  ...props\n}: ChainOfThoughtContentProps) => (\n  <CollapsibleContent\n    className={cn(\n      \"flex flex-col gap-2.5 pb-4 pt-3\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      \"data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtStep\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtStepVariant = \"bullet\" | \"search\" | \"image\";\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n  /**\n   * Visual prefix for the step.\n   * - `\"bullet\"` — small dot (default, plain reasoning text)\n   * - `\"search\"` — magnifying-glass (web search / tool call)\n   * - `\"image\"` — image icon (image fetch / vision step)\n   * - ReactNode — custom icon\n   */\n  variant?: ChainOfThoughtStepVariant | ReactNode;\n};\n\nconst STEP_ICONS: Record<ChainOfThoughtStepVariant, ReactNode> = {\n  bullet: (\n    <span className=\"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50\" />\n  ),\n  search: <SearchIcon className=\"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground\" />,\n  image: <ImageIcon className=\"mt-0.5 size-3.5 shrink-0 text-muted-foreground\" />,\n};\n\nexport const ChainOfThoughtStep = ({\n  variant = \"bullet\",\n  className,\n  children,\n  ...props\n}: ChainOfThoughtStepProps) => {\n  const icon =\n    typeof variant === \"string\"\n      ? STEP_ICONS[variant as ChainOfThoughtStepVariant]\n      : variant;\n\n  return (\n    <div\n      className={cn(\"flex items-start gap-2 text-muted-foreground\", className)}\n      {...props}\n    >\n      <span className=\"flex shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1 leading-relaxed\">{children}</span>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtSources — inline chip group with left bar\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtSourcesProps = ComponentProps<\"div\">;\n\nexport const ChainOfThoughtSources = ({\n  className,\n  ...props\n}: ChainOfThoughtSourcesProps) => (\n  <div\n    className={cn(\n      \"ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3\",\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtSourceProps = ComponentProps<\"a\">;\n\nexport const ChainOfThoughtSource = ({\n  className,\n  children,\n  ...props\n}: ChainOfThoughtSourceProps) => (\n  <a\n    className={cn(\n      \"inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors\",\n      props.href && \"cursor-pointer hover:bg-accent hover:text-accent-foreground\",\n      className\n    )}\n    rel=\"noreferrer\"\n    target=\"_blank\"\n    {...props}\n  >\n    {children}\n  </a>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtImage — inline image with optional caption\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"figure\"> & {\n  src: string;\n  alt?: string;\n  caption?: string;\n};\n\nexport const ChainOfThoughtImage = ({\n  src,\n  alt = \"\",\n  caption,\n  className,\n  ...props\n}: ChainOfThoughtImageProps) => (\n  <figure\n    className={cn(\"ml-[22px] overflow-hidden rounded-lg border\", className)}\n    {...props}\n  >\n    <img alt={alt} className=\"max-h-64 w-full object-cover\" src={src} />\n    {caption && (\n      <figcaption className=\"border-t px-3 py-2 text-xs italic text-muted-foreground/70\">\n        {caption}\n      </figcaption>\n    )}\n  </figure>\n);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtTrigger.displayName = \"ChainOfThoughtTrigger\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtSources.displayName = \"ChainOfThoughtSources\";\nChainOfThoughtSource.displayName = \"ChainOfThoughtSource\";\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\";\n"],"names":["ChainOfThought","className","defaultOpen","props","jsx","Collapsible","cn","ChainOfThoughtTrigger","children","title","icon","isStreaming","CollapsibleTrigger","jsxs","Fragment","Brain","ChevronUpIcon","ChainOfThoughtContent","CollapsibleContent","STEP_ICONS","SearchIcon","ImageIcon","ChainOfThoughtStep","variant","ChainOfThoughtSources","ChainOfThoughtSource","ChainOfThoughtImage","src","alt","caption"],"mappings":"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"}

package/dist/components/ai/chain-of-thought.js

@@ -1,5 +1,5 @@
 import { jsx as t, jsxs as l, Fragment as d } from "react/jsx-runtime";
-import { Brain as m, ChevronUpIcon as u, ImageIcon as h, SearchIcon as c } from "lucide-react";
+import { Brain as c, ChevronUpIcon as m, ImageIcon as h, SearchIcon as u } from "lucide-react";
 import { Collapsible as g, CollapsibleContent as f, CollapsibleTrigger as p } from "../ui/collapsible.js";
 import { cn as r } from "../../lib/utils.js";
 const x = ({
@@ -29,13 +29,13 @@ const x = ({
     ),
     ...i,
     children: a ?? /* @__PURE__ */ l(d, { children: [
-      s ?? /* @__PURE__ */ t(m, { className: "size-4 text-muted-foreground" }),
+      s ?? /* @__PURE__ */ t(c, { className: "size-4 text-muted-foreground" }),
       /* @__PURE__ */ l("span", { className: "flex-1 text-left items-center gap-2", children: [
         o,
         n && /* @__PURE__ */ t("span", { className: "size-1.5 animate-pulse rounded-full bg-primary" })
       ] }),
       /* @__PURE__ */ t(
-        u,
+        m,
         {
           className: "size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180",
           "data-slot": "collapsible-chevron"
@@ -60,7 +60,7 @@ const x = ({
   }
 ), b = {
   bullet: /* @__PURE__ */ t("span", { className: "mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50" }),
-  search: /* @__PURE__ */ t(c, { className: "mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground" }),
+  search: /* @__PURE__ */ t(u, { className: "mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground" }),
   image: /* @__PURE__ */ t(h, { className: "mt-0.5 size-3.5 shrink-0 text-muted-foreground" })
 }, T = ({
   variant: e = "bullet",
@@ -101,7 +101,7 @@ const x = ({
   {
     className: r(
       "inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors",
-      o.href && "cursor-pointer hover:bg-muted hover:text-foreground",
+      o.href && "cursor-pointer hover:bg-accent hover:text-accent-foreground",
       e
     ),
     rel: "noreferrer",

package/dist/components/ai/chain-of-thought.js.map

@@ -1 +1 @@
-{"version":3,"file":"chain-of-thought.js","sources":["../../../src/components/ai/chain-of-thought.tsx"],"sourcesContent":["import { Brain, ChevronUpIcon, ImageIcon, SearchIcon } from \"lucide-react\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\n// ---------------------------------------------------------------------------\n// ChainOfThought (root)\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtProps = ComponentProps<typeof Collapsible>;\n\nexport const ChainOfThought = ({\n  className,\n  defaultOpen = true,\n  ...props\n}: ChainOfThoughtProps) => (\n  <Collapsible\n    className={cn(\"overflow-hidden rounded-lg text-sm\", className)}\n    defaultOpen={defaultOpen}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtTrigger\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {\n  title?: string;\n  icon?: ReactNode;\n  /** When true, renders a subtle animated dot next to the title. */\n  isStreaming?: boolean;\n};\n\nexport const ChainOfThoughtTrigger = ({\n  className,\n  children,\n  title = \"Chain of Thought\",\n  icon,\n  isStreaming = false,\n  ...props\n}: ChainOfThoughtTriggerProps) => (\n  <CollapsibleTrigger\n    className={cn(\n      \"group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon ?? <Brain className=\"size-4 text-muted-foreground\" />}\n        <span className=\"flex-1 text-left items-center gap-2\">\n          {title}\n          {isStreaming && (\n            <span className=\"size-1.5 animate-pulse rounded-full bg-primary\" />\n          )}\n        </span>\n        <ChevronUpIcon\n          className=\"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180\"\n          data-slot=\"collapsible-chevron\"\n        />\n      </>\n    )}\n  </CollapsibleTrigger>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtContent\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const ChainOfThoughtContent = ({\n  className,\n  ...props\n}: ChainOfThoughtContentProps) => (\n  <CollapsibleContent\n    className={cn(\n      \"flex flex-col gap-2.5 pb-4 pt-3\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      \"data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtStep\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtStepVariant = \"bullet\" | \"search\" | \"image\";\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n  /**\n   * Visual prefix for the step.\n   * - `\"bullet\"` — small dot (default, plain reasoning text)\n   * - `\"search\"` — magnifying-glass (web search / tool call)\n   * - `\"image\"` — image icon (image fetch / vision step)\n   * - ReactNode — custom icon\n   */\n  variant?: ChainOfThoughtStepVariant | ReactNode;\n};\n\nconst STEP_ICONS: Record<ChainOfThoughtStepVariant, ReactNode> = {\n  bullet: (\n    <span className=\"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50\" />\n  ),\n  search: <SearchIcon className=\"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground\" />,\n  image: <ImageIcon className=\"mt-0.5 size-3.5 shrink-0 text-muted-foreground\" />,\n};\n\nexport const ChainOfThoughtStep = ({\n  variant = \"bullet\",\n  className,\n  children,\n  ...props\n}: ChainOfThoughtStepProps) => {\n  const icon =\n    typeof variant === \"string\"\n      ? STEP_ICONS[variant as ChainOfThoughtStepVariant]\n      : variant;\n\n  return (\n    <div\n      className={cn(\"flex items-start gap-2 text-muted-foreground\", className)}\n      {...props}\n    >\n      <span className=\"flex shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1 leading-relaxed\">{children}</span>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtSources — inline chip group with left bar\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtSourcesProps = ComponentProps<\"div\">;\n\nexport const ChainOfThoughtSources = ({\n  className,\n  ...props\n}: ChainOfThoughtSourcesProps) => (\n  <div\n    className={cn(\n      \"ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3\",\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtSourceProps = ComponentProps<\"a\">;\n\nexport const ChainOfThoughtSource = ({\n  className,\n  children,\n  ...props\n}: ChainOfThoughtSourceProps) => (\n  <a\n    className={cn(\n      \"inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors\",\n      props.href && \"cursor-pointer hover:bg-muted hover:text-foreground\",\n      className\n    )}\n    rel=\"noreferrer\"\n    target=\"_blank\"\n    {...props}\n  >\n    {children}\n  </a>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtImage — inline image with optional caption\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"figure\"> & {\n  src: string;\n  alt?: string;\n  caption?: string;\n};\n\nexport const ChainOfThoughtImage = ({\n  src,\n  alt = \"\",\n  caption,\n  className,\n  ...props\n}: ChainOfThoughtImageProps) => (\n  <figure\n    className={cn(\"ml-[22px] overflow-hidden rounded-lg border\", className)}\n    {...props}\n  >\n    <img alt={alt} className=\"max-h-64 w-full object-cover\" src={src} />\n    {caption && (\n      <figcaption className=\"border-t px-3 py-2 text-xs italic text-muted-foreground/70\">\n        {caption}\n      </figcaption>\n    )}\n  </figure>\n);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtTrigger.displayName = \"ChainOfThoughtTrigger\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtSources.displayName = \"ChainOfThoughtSources\";\nChainOfThoughtSource.displayName = \"ChainOfThoughtSource\";\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\";\n"],"names":["ChainOfThought","className","defaultOpen","props","jsx","Collapsible","cn","ChainOfThoughtTrigger","children","title","icon","isStreaming","CollapsibleTrigger","jsxs","Fragment","Brain","ChevronUpIcon","ChainOfThoughtContent","CollapsibleContent","STEP_ICONS","SearchIcon","ImageIcon","ChainOfThoughtStep","variant","ChainOfThoughtSources","ChainOfThoughtSource","ChainOfThoughtImage","src","alt","caption"],"mappings":"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"}
+{"version":3,"file":"chain-of-thought.js","sources":["../../../src/components/ai/chain-of-thought.tsx"],"sourcesContent":["import { Brain, ChevronUpIcon, ImageIcon, SearchIcon } from \"lucide-react\";\n\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\n// ---------------------------------------------------------------------------\n// ChainOfThought (root)\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtProps = ComponentProps<typeof Collapsible>;\n\nexport const ChainOfThought = ({\n  className,\n  defaultOpen = true,\n  ...props\n}: ChainOfThoughtProps) => (\n  <Collapsible\n    className={cn(\"overflow-hidden rounded-lg text-sm\", className)}\n    defaultOpen={defaultOpen}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtTrigger\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {\n  title?: string;\n  icon?: ReactNode;\n  /** When true, renders a subtle animated dot next to the title. */\n  isStreaming?: boolean;\n};\n\nexport const ChainOfThoughtTrigger = ({\n  className,\n  children,\n  title = \"Chain of Thought\",\n  icon,\n  isStreaming = false,\n  ...props\n}: ChainOfThoughtTriggerProps) => (\n  <CollapsibleTrigger\n    className={cn(\n      \"group flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon ?? <Brain className=\"size-4 text-muted-foreground\" />}\n        <span className=\"flex-1 text-left items-center gap-2\">\n          {title}\n          {isStreaming && (\n            <span className=\"size-1.5 animate-pulse rounded-full bg-primary\" />\n          )}\n        </span>\n        <ChevronUpIcon\n          className=\"size-4 text-muted-foreground opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:rotate-180\"\n          data-slot=\"collapsible-chevron\"\n        />\n      </>\n    )}\n  </CollapsibleTrigger>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtContent\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const ChainOfThoughtContent = ({\n  className,\n  ...props\n}: ChainOfThoughtContentProps) => (\n  <CollapsibleContent\n    className={cn(\n      \"flex flex-col gap-2.5 pb-4 pt-3\",\n      \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n      \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n      \"data-[state=closed]:slide-out-to-top-1 data-[state=open]:slide-in-from-top-1\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtStep\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtStepVariant = \"bullet\" | \"search\" | \"image\";\n\nexport type ChainOfThoughtStepProps = ComponentProps<\"div\"> & {\n  /**\n   * Visual prefix for the step.\n   * - `\"bullet\"` — small dot (default, plain reasoning text)\n   * - `\"search\"` — magnifying-glass (web search / tool call)\n   * - `\"image\"` — image icon (image fetch / vision step)\n   * - ReactNode — custom icon\n   */\n  variant?: ChainOfThoughtStepVariant | ReactNode;\n};\n\nconst STEP_ICONS: Record<ChainOfThoughtStepVariant, ReactNode> = {\n  bullet: (\n    <span className=\"mt-[7px] ml-1 size-1.5 shrink-0 rounded-full bg-muted-foreground/50\" />\n  ),\n  search: <SearchIcon className=\"mt-0.5 w-[18px] size-3.5 shrink-0 text-muted-foreground\" />,\n  image: <ImageIcon className=\"mt-0.5 size-3.5 shrink-0 text-muted-foreground\" />,\n};\n\nexport const ChainOfThoughtStep = ({\n  variant = \"bullet\",\n  className,\n  children,\n  ...props\n}: ChainOfThoughtStepProps) => {\n  const icon =\n    typeof variant === \"string\"\n      ? STEP_ICONS[variant as ChainOfThoughtStepVariant]\n      : variant;\n\n  return (\n    <div\n      className={cn(\"flex items-start gap-2 text-muted-foreground\", className)}\n      {...props}\n    >\n      <span className=\"flex shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1 leading-relaxed\">{children}</span>\n    </div>\n  );\n};\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtSources — inline chip group with left bar\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtSourcesProps = ComponentProps<\"div\">;\n\nexport const ChainOfThoughtSources = ({\n  className,\n  ...props\n}: ChainOfThoughtSourcesProps) => (\n  <div\n    className={cn(\n      \"ml-[6px] flex flex-wrap gap-1.5 border-l-2 border-muted-foreground/20 py-0.5 pl-3\",\n      className\n    )}\n    {...props}\n  />\n);\n\nexport type ChainOfThoughtSourceProps = ComponentProps<\"a\">;\n\nexport const ChainOfThoughtSource = ({\n  className,\n  children,\n  ...props\n}: ChainOfThoughtSourceProps) => (\n  <a\n    className={cn(\n      \"inline-flex items-center rounded-full border border-border/60 bg-muted/50 px-2 py-0.5 text-xs text-muted-foreground transition-colors\",\n      props.href && \"cursor-pointer hover:bg-accent hover:text-accent-foreground\",\n      className\n    )}\n    rel=\"noreferrer\"\n    target=\"_blank\"\n    {...props}\n  >\n    {children}\n  </a>\n);\n\n// ---------------------------------------------------------------------------\n// ChainOfThoughtImage — inline image with optional caption\n// ---------------------------------------------------------------------------\n\nexport type ChainOfThoughtImageProps = ComponentProps<\"figure\"> & {\n  src: string;\n  alt?: string;\n  caption?: string;\n};\n\nexport const ChainOfThoughtImage = ({\n  src,\n  alt = \"\",\n  caption,\n  className,\n  ...props\n}: ChainOfThoughtImageProps) => (\n  <figure\n    className={cn(\"ml-[22px] overflow-hidden rounded-lg border\", className)}\n    {...props}\n  >\n    <img alt={alt} className=\"max-h-64 w-full object-cover\" src={src} />\n    {caption && (\n      <figcaption className=\"border-t px-3 py-2 text-xs italic text-muted-foreground/70\">\n        {caption}\n      </figcaption>\n    )}\n  </figure>\n);\n\nChainOfThought.displayName = \"ChainOfThought\";\nChainOfThoughtTrigger.displayName = \"ChainOfThoughtTrigger\";\nChainOfThoughtContent.displayName = \"ChainOfThoughtContent\";\nChainOfThoughtStep.displayName = \"ChainOfThoughtStep\";\nChainOfThoughtSources.displayName = \"ChainOfThoughtSources\";\nChainOfThoughtSource.displayName = \"ChainOfThoughtSource\";\nChainOfThoughtImage.displayName = \"ChainOfThoughtImage\";\n"],"names":["ChainOfThought","className","defaultOpen","props","jsx","Collapsible","cn","ChainOfThoughtTrigger","children","title","icon","isStreaming","CollapsibleTrigger","jsxs","Fragment","Brain","ChevronUpIcon","ChainOfThoughtContent","CollapsibleContent","STEP_ICONS","SearchIcon","ImageIcon","ChainOfThoughtStep","variant","ChainOfThoughtSources","ChainOfThoughtSource","ChainOfThoughtImage","src","alt","caption"],"mappings":"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"}

package/dist/components/ai/conversation.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("lucide-react"),m=require("react"),i=require("use-stick-to-bottom"),x=require("../ui/button.cjs"),c=require("../../lib/utils.cjs"),j=({className:e,...t})=>o.jsx(i.StickToBottom,{className:c.cn("relative flex-1 overflow-y-hidden",e),initial:"smooth",resize:"smooth",role:"log",...t}),C=({className:e,...t})=>o.jsx(i.StickToBottom.Content,{className:c.cn("flex flex-col gap-8 p-4",e),...t}),g=({className:e,title:t="No messages yet",description:n="Start a conversation to see messages here",icon:s,children:r,...l})=>o.jsx("div",{className:c.cn("flex size-full flex-col items-center justify-center gap-3 p-8 text-center",e),...l,children:r??o.jsxs(o.Fragment,{children:[s&&o.jsx("div",{className:"text-muted-foreground",children:s}),o.jsxs("div",{className:"space-y-1",children:[o.jsx("h3",{className:"font-medium text-sm",children:t}),n&&o.jsx("p",{className:"text-muted-foreground text-sm",children:n})]})]})}),f=({className:e,...t})=>{const{isAtBottom:n,scrollToBottom:s}=i.useStickToBottomContext(),r=m.useCallback(()=>{s()},[s]);return!n&&o.jsx(x.Button,{className:c.cn("absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",e),onClick:r,size:"icon",type:"button",variant:"outline",...t,children:o.jsx(u.ArrowDownIcon,{className:"size-4"})})},w=e=>e.parts.filter(t=>t.type==="text").map(t=>t.text).join(""),b=e=>`**${e.role.charAt(0).toUpperCase()+e.role.slice(1)}:** ${w(e)}`,v=(e,t=b)=>e.map((n,s)=>t(n,s)).join(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),u=require("lucide-react"),m=require("react"),i=require("use-stick-to-bottom"),x=require("../ui/button.cjs"),c=require("../../lib/utils.cjs"),j=({className:e,...t})=>o.jsx(i.StickToBottom,{className:c.cn("relative flex-1 overflow-y-hidden",e),initial:"smooth",resize:"smooth",role:"log",...t}),C=({className:e,...t})=>o.jsx(i.StickToBottom.Content,{className:c.cn("flex flex-col gap-8 p-4",e),...t}),g=({className:e,title:t="No messages yet",description:n="Start a conversation to see messages here",icon:s,children:r,...l})=>o.jsx("div",{className:c.cn("flex size-full flex-col items-center justify-center gap-3 p-8 text-center",e),...l,children:r??o.jsxs(o.Fragment,{children:[s&&o.jsx("div",{className:"text-muted-foreground",children:s}),o.jsxs("div",{className:"space-y-1",children:[o.jsx("h3",{className:"font-medium text-sm",children:t}),n&&o.jsx("p",{className:"text-muted-foreground text-sm",children:n})]})]})}),f=({className:e,...t})=>{const{isAtBottom:n,scrollToBottom:s}=i.useStickToBottomContext(),r=m.useCallback(()=>{s()},[s]);return!n&&o.jsx(x.Button,{className:c.cn("absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-accent",e),onClick:r,size:"icon",type:"button",variant:"outline",...t,children:o.jsx(u.ArrowDownIcon,{className:"size-4"})})},w=e=>e.parts.filter(t=>t.type==="text").map(t=>t.text).join(""),b=e=>`**${e.role.charAt(0).toUpperCase()+e.role.slice(1)}:** ${w(e)}`,v=(e,t=b)=>e.map((n,s)=>t(n,s)).join(`
 
-`),y=({messages:e,filename:t="conversation.md",formatMessage:n=b,className:s,children:r,...l})=>{const k=m.useCallback(()=>{const h=v(e,n),p=new Blob([h],{type:"text/markdown"}),d=URL.createObjectURL(p),a=document.createElement("a");a.href=d,a.download=t,document.body.append(a),a.click(),a.remove(),URL.revokeObjectURL(d)},[e,t,n]);return o.jsx(x.Button,{className:c.cn("absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted",s),onClick:k,size:"icon",type:"button",variant:"outline",...l,children:r??o.jsx(u.DownloadIcon,{className:"size-4"})})};exports.Conversation=j;exports.ConversationContent=C;exports.ConversationDownload=y;exports.ConversationEmptyState=g;exports.ConversationScrollButton=f;exports.messagesToMarkdown=v;
+`),y=({messages:e,filename:t="conversation.md",formatMessage:n=b,className:s,children:r,...l})=>{const k=m.useCallback(()=>{const h=v(e,n),p=new Blob([h],{type:"text/markdown"}),d=URL.createObjectURL(p),a=document.createElement("a");a.href=d,a.download=t,document.body.append(a),a.click(),a.remove(),URL.revokeObjectURL(d)},[e,t,n]);return o.jsx(x.Button,{className:c.cn("absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-accent",s),onClick:k,size:"icon",type:"button",variant:"outline",...l,children:r??o.jsx(u.DownloadIcon,{className:"size-4"})})};exports.Conversation=j;exports.ConversationContent=C;exports.ConversationDownload=y;exports.ConversationEmptyState=g;exports.ConversationScrollButton=f;exports.messagesToMarkdown=v;
 //# sourceMappingURL=conversation.cjs.map

package/dist/components/ai/conversation.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.cjs","sources":["../../../src/components/ai/conversation.tsx"],"sourcesContent":["import { ArrowDownIcon, DownloadIcon } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { StickToBottom, useStickToBottomContext } from \"use-stick-to-bottom\";\n\nimport type { UIMessage } from \"ai\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ConversationProps = ComponentProps<typeof StickToBottom>;\n\nexport const Conversation = ({ className, ...props }: ConversationProps) => (\n  <StickToBottom\n    className={cn(\"relative flex-1 overflow-y-hidden\", className)}\n    initial=\"smooth\"\n    resize=\"smooth\"\n    role=\"log\"\n    {...props}\n  />\n);\n\nexport type ConversationContentProps = ComponentProps<\n  typeof StickToBottom.Content\n>;\n\nexport const ConversationContent = ({\n  className,\n  ...props\n}: ConversationContentProps) => (\n  <StickToBottom.Content\n    className={cn(\"flex flex-col gap-8 p-4\", className)}\n    {...props}\n  />\n);\n\nexport type ConversationEmptyStateProps = ComponentProps<\"div\"> & {\n  title?: string;\n  description?: string;\n  icon?: React.ReactNode;\n};\n\nexport const ConversationEmptyState = ({\n  className,\n  title = \"No messages yet\",\n  description = \"Start a conversation to see messages here\",\n  icon,\n  children,\n  ...props\n}: ConversationEmptyStateProps) => (\n  <div\n    className={cn(\n      \"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon && <div className=\"text-muted-foreground\">{icon}</div>}\n        <div className=\"space-y-1\">\n          <h3 className=\"font-medium text-sm\">{title}</h3>\n          {description && (\n            <p className=\"text-muted-foreground text-sm\">{description}</p>\n          )}\n        </div>\n      </>\n    )}\n  </div>\n);\n\nexport type ConversationScrollButtonProps = ComponentProps<typeof Button>;\n\nexport const ConversationScrollButton = ({\n  className,\n  ...props\n}: ConversationScrollButtonProps) => {\n  const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n\n  const handleScrollToBottom = useCallback(() => {\n    scrollToBottom();\n  }, [scrollToBottom]);\n\n  return (\n    !isAtBottom && (\n      <Button\n        className={cn(\n          \"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted\",\n          className\n        )}\n        onClick={handleScrollToBottom}\n        size=\"icon\"\n        type=\"button\"\n        variant=\"outline\"\n        {...props}\n      >\n        <ArrowDownIcon className=\"size-4\" />\n      </Button>\n    )\n  );\n};\n\nconst getMessageText = (message: UIMessage): string =>\n  message.parts\n    .filter((part) => part.type === \"text\")\n    .map((part) => part.text)\n    .join(\"\");\n\nexport type ConversationDownloadProps = Omit<\n  ComponentProps<typeof Button>,\n  \"onClick\"\n> & {\n  messages: UIMessage[];\n  filename?: string;\n  formatMessage?: (message: UIMessage, index: number) => string;\n};\n\nconst defaultFormatMessage = (message: UIMessage): string => {\n  const roleLabel =\n    message.role.charAt(0).toUpperCase() + message.role.slice(1);\n  return `**${roleLabel}:** ${getMessageText(message)}`;\n};\n\nexport const messagesToMarkdown = (\n  messages: UIMessage[],\n  formatMessage: (\n    message: UIMessage,\n    index: number\n  ) => string = defaultFormatMessage\n): string => messages.map((msg, i) => formatMessage(msg, i)).join(\"\\n\\n\");\n\nexport const ConversationDownload = ({\n  messages,\n  filename = \"conversation.md\",\n  formatMessage = defaultFormatMessage,\n  className,\n  children,\n  ...props\n}: ConversationDownloadProps) => {\n  const handleDownload = useCallback(() => {\n    const markdown = messagesToMarkdown(messages, formatMessage);\n    const blob = new Blob([markdown], { type: \"text/markdown\" });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = filename;\n    document.body.append(link);\n    link.click();\n    link.remove();\n    URL.revokeObjectURL(url);\n  }, [messages, filename, formatMessage]);\n\n  return (\n    <Button\n      className={cn(\n        \"absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted\",\n        className\n      )}\n      onClick={handleDownload}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"outline\"\n      {...props}\n    >\n      {children ?? <DownloadIcon className=\"size-4\" />}\n    </Button>\n  );\n};\n"],"names":["Conversation","className","props","jsx","StickToBottom","cn","ConversationContent","ConversationEmptyState","title","description","icon","children","jsxs","Fragment","ConversationScrollButton","isAtBottom","scrollToBottom","useStickToBottomContext","handleScrollToBottom","useCallback","Button","ArrowDownIcon","getMessageText","message","part","defaultFormatMessage","messagesToMarkdown","messages","formatMessage","msg","i","ConversationDownload","filename","handleDownload","markdown","blob","url","link","DownloadIcon"],"mappings":"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"}
+{"version":3,"file":"conversation.cjs","sources":["../../../src/components/ai/conversation.tsx"],"sourcesContent":["import { ArrowDownIcon, DownloadIcon } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { StickToBottom, useStickToBottomContext } from \"use-stick-to-bottom\";\n\nimport type { UIMessage } from \"ai\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ConversationProps = ComponentProps<typeof StickToBottom>;\n\nexport const Conversation = ({ className, ...props }: ConversationProps) => (\n  <StickToBottom\n    className={cn(\"relative flex-1 overflow-y-hidden\", className)}\n    initial=\"smooth\"\n    resize=\"smooth\"\n    role=\"log\"\n    {...props}\n  />\n);\n\nexport type ConversationContentProps = ComponentProps<\n  typeof StickToBottom.Content\n>;\n\nexport const ConversationContent = ({\n  className,\n  ...props\n}: ConversationContentProps) => (\n  <StickToBottom.Content\n    className={cn(\"flex flex-col gap-8 p-4\", className)}\n    {...props}\n  />\n);\n\nexport type ConversationEmptyStateProps = ComponentProps<\"div\"> & {\n  title?: string;\n  description?: string;\n  icon?: React.ReactNode;\n};\n\nexport const ConversationEmptyState = ({\n  className,\n  title = \"No messages yet\",\n  description = \"Start a conversation to see messages here\",\n  icon,\n  children,\n  ...props\n}: ConversationEmptyStateProps) => (\n  <div\n    className={cn(\n      \"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon && <div className=\"text-muted-foreground\">{icon}</div>}\n        <div className=\"space-y-1\">\n          <h3 className=\"font-medium text-sm\">{title}</h3>\n          {description && (\n            <p className=\"text-muted-foreground text-sm\">{description}</p>\n          )}\n        </div>\n      </>\n    )}\n  </div>\n);\n\nexport type ConversationScrollButtonProps = ComponentProps<typeof Button>;\n\nexport const ConversationScrollButton = ({\n  className,\n  ...props\n}: ConversationScrollButtonProps) => {\n  const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n\n  const handleScrollToBottom = useCallback(() => {\n    scrollToBottom();\n  }, [scrollToBottom]);\n\n  return (\n    !isAtBottom && (\n      <Button\n        className={cn(\n          \"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-accent\",\n          className\n        )}\n        onClick={handleScrollToBottom}\n        size=\"icon\"\n        type=\"button\"\n        variant=\"outline\"\n        {...props}\n      >\n        <ArrowDownIcon className=\"size-4\" />\n      </Button>\n    )\n  );\n};\n\nconst getMessageText = (message: UIMessage): string =>\n  message.parts\n    .filter((part) => part.type === \"text\")\n    .map((part) => part.text)\n    .join(\"\");\n\nexport type ConversationDownloadProps = Omit<\n  ComponentProps<typeof Button>,\n  \"onClick\"\n> & {\n  messages: UIMessage[];\n  filename?: string;\n  formatMessage?: (message: UIMessage, index: number) => string;\n};\n\nconst defaultFormatMessage = (message: UIMessage): string => {\n  const roleLabel =\n    message.role.charAt(0).toUpperCase() + message.role.slice(1);\n  return `**${roleLabel}:** ${getMessageText(message)}`;\n};\n\nexport const messagesToMarkdown = (\n  messages: UIMessage[],\n  formatMessage: (\n    message: UIMessage,\n    index: number\n  ) => string = defaultFormatMessage\n): string => messages.map((msg, i) => formatMessage(msg, i)).join(\"\\n\\n\");\n\nexport const ConversationDownload = ({\n  messages,\n  filename = \"conversation.md\",\n  formatMessage = defaultFormatMessage,\n  className,\n  children,\n  ...props\n}: ConversationDownloadProps) => {\n  const handleDownload = useCallback(() => {\n    const markdown = messagesToMarkdown(messages, formatMessage);\n    const blob = new Blob([markdown], { type: \"text/markdown\" });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = filename;\n    document.body.append(link);\n    link.click();\n    link.remove();\n    URL.revokeObjectURL(url);\n  }, [messages, filename, formatMessage]);\n\n  return (\n    <Button\n      className={cn(\n        \"absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-accent\",\n        className\n      )}\n      onClick={handleDownload}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"outline\"\n      {...props}\n    >\n      {children ?? <DownloadIcon className=\"size-4\" />}\n    </Button>\n  );\n};\n"],"names":["Conversation","className","props","jsx","StickToBottom","cn","ConversationContent","ConversationEmptyState","title","description","icon","children","jsxs","Fragment","ConversationScrollButton","isAtBottom","scrollToBottom","useStickToBottomContext","handleScrollToBottom","useCallback","Button","ArrowDownIcon","getMessageText","message","part","defaultFormatMessage","messagesToMarkdown","messages","formatMessage","msg","i","ConversationDownload","filename","handleDownload","markdown","blob","url","link","DownloadIcon"],"mappings":"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"}

package/dist/components/ai/conversation.js

@@ -56,7 +56,7 @@ const T = ({ className: o, ...t }) => /* @__PURE__ */ e(
     p,
     {
       className: l(
-        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-accent",
         o
       ),
       onClick: a,
@@ -85,7 +85,7 @@ const T = ({ className: o, ...t }) => /* @__PURE__ */ e(
     p,
     {
       className: l(
-        "absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted",
+        "absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-accent",
         r
       ),
       onClick: b,

package/dist/components/ai/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","sources":["../../../src/components/ai/conversation.tsx"],"sourcesContent":["import { ArrowDownIcon, DownloadIcon } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { StickToBottom, useStickToBottomContext } from \"use-stick-to-bottom\";\n\nimport type { UIMessage } from \"ai\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ConversationProps = ComponentProps<typeof StickToBottom>;\n\nexport const Conversation = ({ className, ...props }: ConversationProps) => (\n  <StickToBottom\n    className={cn(\"relative flex-1 overflow-y-hidden\", className)}\n    initial=\"smooth\"\n    resize=\"smooth\"\n    role=\"log\"\n    {...props}\n  />\n);\n\nexport type ConversationContentProps = ComponentProps<\n  typeof StickToBottom.Content\n>;\n\nexport const ConversationContent = ({\n  className,\n  ...props\n}: ConversationContentProps) => (\n  <StickToBottom.Content\n    className={cn(\"flex flex-col gap-8 p-4\", className)}\n    {...props}\n  />\n);\n\nexport type ConversationEmptyStateProps = ComponentProps<\"div\"> & {\n  title?: string;\n  description?: string;\n  icon?: React.ReactNode;\n};\n\nexport const ConversationEmptyState = ({\n  className,\n  title = \"No messages yet\",\n  description = \"Start a conversation to see messages here\",\n  icon,\n  children,\n  ...props\n}: ConversationEmptyStateProps) => (\n  <div\n    className={cn(\n      \"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon && <div className=\"text-muted-foreground\">{icon}</div>}\n        <div className=\"space-y-1\">\n          <h3 className=\"font-medium text-sm\">{title}</h3>\n          {description && (\n            <p className=\"text-muted-foreground text-sm\">{description}</p>\n          )}\n        </div>\n      </>\n    )}\n  </div>\n);\n\nexport type ConversationScrollButtonProps = ComponentProps<typeof Button>;\n\nexport const ConversationScrollButton = ({\n  className,\n  ...props\n}: ConversationScrollButtonProps) => {\n  const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n\n  const handleScrollToBottom = useCallback(() => {\n    scrollToBottom();\n  }, [scrollToBottom]);\n\n  return (\n    !isAtBottom && (\n      <Button\n        className={cn(\n          \"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted\",\n          className\n        )}\n        onClick={handleScrollToBottom}\n        size=\"icon\"\n        type=\"button\"\n        variant=\"outline\"\n        {...props}\n      >\n        <ArrowDownIcon className=\"size-4\" />\n      </Button>\n    )\n  );\n};\n\nconst getMessageText = (message: UIMessage): string =>\n  message.parts\n    .filter((part) => part.type === \"text\")\n    .map((part) => part.text)\n    .join(\"\");\n\nexport type ConversationDownloadProps = Omit<\n  ComponentProps<typeof Button>,\n  \"onClick\"\n> & {\n  messages: UIMessage[];\n  filename?: string;\n  formatMessage?: (message: UIMessage, index: number) => string;\n};\n\nconst defaultFormatMessage = (message: UIMessage): string => {\n  const roleLabel =\n    message.role.charAt(0).toUpperCase() + message.role.slice(1);\n  return `**${roleLabel}:** ${getMessageText(message)}`;\n};\n\nexport const messagesToMarkdown = (\n  messages: UIMessage[],\n  formatMessage: (\n    message: UIMessage,\n    index: number\n  ) => string = defaultFormatMessage\n): string => messages.map((msg, i) => formatMessage(msg, i)).join(\"\\n\\n\");\n\nexport const ConversationDownload = ({\n  messages,\n  filename = \"conversation.md\",\n  formatMessage = defaultFormatMessage,\n  className,\n  children,\n  ...props\n}: ConversationDownloadProps) => {\n  const handleDownload = useCallback(() => {\n    const markdown = messagesToMarkdown(messages, formatMessage);\n    const blob = new Blob([markdown], { type: \"text/markdown\" });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = filename;\n    document.body.append(link);\n    link.click();\n    link.remove();\n    URL.revokeObjectURL(url);\n  }, [messages, filename, formatMessage]);\n\n  return (\n    <Button\n      className={cn(\n        \"absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-muted\",\n        className\n      )}\n      onClick={handleDownload}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"outline\"\n      {...props}\n    >\n      {children ?? <DownloadIcon className=\"size-4\" />}\n    </Button>\n  );\n};\n"],"names":["Conversation","className","props","jsx","StickToBottom","cn","ConversationContent","ConversationEmptyState","title","description","icon","children","jsxs","Fragment","ConversationScrollButton","isAtBottom","scrollToBottom","useStickToBottomContext","handleScrollToBottom","useCallback","Button","ArrowDownIcon","getMessageText","message","part","defaultFormatMessage","messagesToMarkdown","messages","formatMessage","msg","i","ConversationDownload","filename","handleDownload","markdown","blob","url","link","DownloadIcon"],"mappings":"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"}
+{"version":3,"file":"conversation.js","sources":["../../../src/components/ai/conversation.tsx"],"sourcesContent":["import { ArrowDownIcon, DownloadIcon } from \"lucide-react\";\nimport { useCallback } from \"react\";\nimport { StickToBottom, useStickToBottomContext } from \"use-stick-to-bottom\";\n\nimport type { UIMessage } from \"ai\";\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ConversationProps = ComponentProps<typeof StickToBottom>;\n\nexport const Conversation = ({ className, ...props }: ConversationProps) => (\n  <StickToBottom\n    className={cn(\"relative flex-1 overflow-y-hidden\", className)}\n    initial=\"smooth\"\n    resize=\"smooth\"\n    role=\"log\"\n    {...props}\n  />\n);\n\nexport type ConversationContentProps = ComponentProps<\n  typeof StickToBottom.Content\n>;\n\nexport const ConversationContent = ({\n  className,\n  ...props\n}: ConversationContentProps) => (\n  <StickToBottom.Content\n    className={cn(\"flex flex-col gap-8 p-4\", className)}\n    {...props}\n  />\n);\n\nexport type ConversationEmptyStateProps = ComponentProps<\"div\"> & {\n  title?: string;\n  description?: string;\n  icon?: React.ReactNode;\n};\n\nexport const ConversationEmptyState = ({\n  className,\n  title = \"No messages yet\",\n  description = \"Start a conversation to see messages here\",\n  icon,\n  children,\n  ...props\n}: ConversationEmptyStateProps) => (\n  <div\n    className={cn(\n      \"flex size-full flex-col items-center justify-center gap-3 p-8 text-center\",\n      className\n    )}\n    {...props}\n  >\n    {children ?? (\n      <>\n        {icon && <div className=\"text-muted-foreground\">{icon}</div>}\n        <div className=\"space-y-1\">\n          <h3 className=\"font-medium text-sm\">{title}</h3>\n          {description && (\n            <p className=\"text-muted-foreground text-sm\">{description}</p>\n          )}\n        </div>\n      </>\n    )}\n  </div>\n);\n\nexport type ConversationScrollButtonProps = ComponentProps<typeof Button>;\n\nexport const ConversationScrollButton = ({\n  className,\n  ...props\n}: ConversationScrollButtonProps) => {\n  const { isAtBottom, scrollToBottom } = useStickToBottomContext();\n\n  const handleScrollToBottom = useCallback(() => {\n    scrollToBottom();\n  }, [scrollToBottom]);\n\n  return (\n    !isAtBottom && (\n      <Button\n        className={cn(\n          \"absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-accent\",\n          className\n        )}\n        onClick={handleScrollToBottom}\n        size=\"icon\"\n        type=\"button\"\n        variant=\"outline\"\n        {...props}\n      >\n        <ArrowDownIcon className=\"size-4\" />\n      </Button>\n    )\n  );\n};\n\nconst getMessageText = (message: UIMessage): string =>\n  message.parts\n    .filter((part) => part.type === \"text\")\n    .map((part) => part.text)\n    .join(\"\");\n\nexport type ConversationDownloadProps = Omit<\n  ComponentProps<typeof Button>,\n  \"onClick\"\n> & {\n  messages: UIMessage[];\n  filename?: string;\n  formatMessage?: (message: UIMessage, index: number) => string;\n};\n\nconst defaultFormatMessage = (message: UIMessage): string => {\n  const roleLabel =\n    message.role.charAt(0).toUpperCase() + message.role.slice(1);\n  return `**${roleLabel}:** ${getMessageText(message)}`;\n};\n\nexport const messagesToMarkdown = (\n  messages: UIMessage[],\n  formatMessage: (\n    message: UIMessage,\n    index: number\n  ) => string = defaultFormatMessage\n): string => messages.map((msg, i) => formatMessage(msg, i)).join(\"\\n\\n\");\n\nexport const ConversationDownload = ({\n  messages,\n  filename = \"conversation.md\",\n  formatMessage = defaultFormatMessage,\n  className,\n  children,\n  ...props\n}: ConversationDownloadProps) => {\n  const handleDownload = useCallback(() => {\n    const markdown = messagesToMarkdown(messages, formatMessage);\n    const blob = new Blob([markdown], { type: \"text/markdown\" });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = filename;\n    document.body.append(link);\n    link.click();\n    link.remove();\n    URL.revokeObjectURL(url);\n  }, [messages, filename, formatMessage]);\n\n  return (\n    <Button\n      className={cn(\n        \"absolute top-4 right-4 rounded-full dark:bg-background dark:hover:bg-accent\",\n        className\n      )}\n      onClick={handleDownload}\n      size=\"icon\"\n      type=\"button\"\n      variant=\"outline\"\n      {...props}\n    >\n      {children ?? <DownloadIcon className=\"size-4\" />}\n    </Button>\n  );\n};\n"],"names":["Conversation","className","props","jsx","StickToBottom","cn","ConversationContent","ConversationEmptyState","title","description","icon","children","jsxs","Fragment","ConversationScrollButton","isAtBottom","scrollToBottom","useStickToBottomContext","handleScrollToBottom","useCallback","Button","ArrowDownIcon","getMessageText","message","part","defaultFormatMessage","messagesToMarkdown","messages","formatMessage","msg","i","ConversationDownload","filename","handleDownload","markdown","blob","url","link","DownloadIcon"],"mappings":"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"}

package/dist/components/ai/queue.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),x=require("lucide-react"),p=require("motion/react"),c=require("react"),Q=require("../ui/button.cjs"),d=require("../ui/collapsible.cjs"),j=require("../ui/scroll-area.cjs"),r=require("../../lib/utils.cjs"),I=({className:t,...e})=>o.jsx("li",{className:r.cn("group flex flex-row items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",t),...e}),v={pending:"border border-muted-foreground/40",loading:"border-2 border-muted-foreground/20 border-t-primary animate-spin",done:"border border-muted-foreground/20 bg-muted-foreground/30",error:"border border-destructive/30 bg-destructive/70"},N=({status:t,completed:e=!1,className:s,...n})=>{const u=t??(e?"done":"pending");return o.jsx("span",{className:r.cn("inline-block size-2.5 shrink-0 rounded-full",v[u],s),...n})},y=({completed:t=!1,className:e,...s})=>o.jsx("span",{className:r.cn("min-w-0 flex-1 truncate",t?"text-muted-foreground/50 line-through":"text-muted-foreground",e),...s}),A=({completed:t=!1,className:e,...s})=>o.jsx("div",{className:r.cn("text-xs",t?"text-muted-foreground/40 line-through":"text-muted-foreground/70",e),...s}),S=({className:t,...e})=>o.jsx("div",{className:r.cn("ml-auto flex shrink-0 gap-1",t),...e}),T=({className:t,...e})=>o.jsx(Q.Button,{className:r.cn("size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",t),size:"icon",type:"button",variant:"ghost",...e}),C=({className:t,...e})=>o.jsx("div",{className:r.cn("flex flex-wrap gap-2",t),...e}),w=({className:t,...e})=>o.jsx("img",{alt:"",className:r.cn("size-8 rounded border object-cover",t),height:32,width:32,...e}),q=({children:t,className:e,...s})=>o.jsxs("span",{className:r.cn("flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",e),...s,children:[o.jsx(x.PaperclipIcon,{size:12}),o.jsx("span",{className:"max-w-[100px] truncate",children:t})]}),z=({children:t,className:e,...s})=>o.jsx(j.ScrollArea,{className:r.cn("-mb-1 mt-2",e),...s,children:o.jsx("div",{className:"max-h-40 pr-4",children:o.jsx("ul",{className:"flex flex-col gap-0.5",children:t})})}),D=({className:t,defaultOpen:e=!0,...s})=>o.jsx(d.Collapsible,{className:r.cn(t),defaultOpen:e,...s}),E=({children:t,className:e,...s})=>o.jsx(d.CollapsibleTrigger,{asChild:!0,children:o.jsx("button",{className:r.cn("group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",e),type:"button",...s,children:t})}),O=({count:t,icon:e,className:s,children:n,...u})=>o.jsxs("span",{className:r.cn("flex items-center gap-2",s),...u,children:[o.jsx(x.ChevronDownIcon,{className:"size-4 opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:-rotate-90","data-slot":"collapsible-chevron"}),e,o.jsxs("span",{children:[t===void 0?"":`${t} `,n]})]}),R=({className:t,...e})=>o.jsx(d.CollapsibleContent,{className:r.cn(t),...e}),L=1e3,H=({className:t,isStreaming:e=!1,children:s,style:n,id:u,...g})=>{const[i,f]=c.useState(!0),l=c.useRef(e),[m,b]=c.useState(!1);c.useEffect(()=>{e&&(l.current=!0)},[e]),c.useEffect(()=>{if(l.current&&!e&&i&&!m){const a=setTimeout(()=>{f(!1),b(!0)},L);return()=>clearTimeout(a)}},[e,i,m]);const h=Object.fromEntries(Object.entries(g).filter(([a])=>a.startsWith("data-")||a.startsWith("aria-")));return o.jsx(p.AnimatePresence,{children:i&&o.jsx(p.motion.div,{...h,className:r.cn("flex flex-col gap-2 rounded-xl border border-border bg-background px-2 pb-2 pt-2 shadow-xs",t),exit:{opacity:0,height:0,marginTop:0,marginBottom:0,paddingTop:0,paddingBottom:0,overflow:"hidden"},id:u,style:n,transition:{duration:.35,ease:"easeOut"},children:s})})};exports.Queue=H;exports.QueueItem=I;exports.QueueItemAction=T;exports.QueueItemActions=S;exports.QueueItemAttachment=C;exports.QueueItemContent=y;exports.QueueItemDescription=A;exports.QueueItemFile=q;exports.QueueItemImage=w;exports.QueueItemIndicator=N;exports.QueueList=z;exports.QueueSection=D;exports.QueueSectionContent=R;exports.QueueSectionLabel=O;exports.QueueSectionTrigger=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),x=require("lucide-react"),p=require("motion/react"),c=require("react"),Q=require("../ui/button.cjs"),l=require("../ui/collapsible.cjs"),j=require("../ui/scroll-area.cjs"),r=require("../../lib/utils.cjs"),I=({className:t,...e})=>o.jsx("li",{className:r.cn("group flex flex-row items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent",t),...e}),v={pending:"border border-muted-foreground/40",loading:"border-2 border-muted-foreground/20 border-t-primary animate-spin",done:"border border-muted-foreground/20 bg-muted-foreground/30",error:"border border-destructive/30 bg-destructive/70"},N=({status:t,completed:e=!1,className:s,...n})=>{const u=t??(e?"done":"pending");return o.jsx("span",{className:r.cn("inline-block size-2.5 shrink-0 rounded-full",v[u],s),...n})},y=({completed:t=!1,className:e,...s})=>o.jsx("span",{className:r.cn("min-w-0 flex-1 truncate",t?"text-muted-foreground/50 line-through":"text-muted-foreground",e),...s}),A=({completed:t=!1,className:e,...s})=>o.jsx("div",{className:r.cn("text-xs",t?"text-muted-foreground/40 line-through":"text-muted-foreground/70",e),...s}),S=({className:t,...e})=>o.jsx("div",{className:r.cn("ml-auto flex shrink-0 gap-1",t),...e}),T=({className:t,...e})=>o.jsx(Q.Button,{className:r.cn("size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100",t),size:"icon",type:"button",variant:"ghost",...e}),C=({className:t,...e})=>o.jsx("div",{className:r.cn("flex flex-wrap gap-2",t),...e}),w=({className:t,...e})=>o.jsx("img",{alt:"",className:r.cn("size-8 rounded border object-cover",t),height:32,width:32,...e}),q=({children:t,className:e,...s})=>o.jsxs("span",{className:r.cn("flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs",e),...s,children:[o.jsx(x.PaperclipIcon,{size:12}),o.jsx("span",{className:"max-w-[100px] truncate",children:t})]}),z=({children:t,className:e,...s})=>o.jsx(j.ScrollArea,{className:r.cn("-mb-1 mt-2",e),...s,children:o.jsx("div",{className:"max-h-40 pr-4",children:o.jsx("ul",{className:"flex flex-col gap-0.5",children:t})})}),D=({className:t,defaultOpen:e=!0,...s})=>o.jsx(l.Collapsible,{className:r.cn(t),defaultOpen:e,...s}),E=({children:t,className:e,...s})=>o.jsx(l.CollapsibleTrigger,{asChild:!0,children:o.jsx("button",{className:r.cn("group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-accent",e),type:"button",...s,children:t})}),O=({count:t,icon:e,className:s,children:n,...u})=>o.jsxs("span",{className:r.cn("flex items-center gap-2",s),...u,children:[o.jsx(x.ChevronDownIcon,{className:"size-4 opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:-rotate-90","data-slot":"collapsible-chevron"}),e,o.jsxs("span",{children:[t===void 0?"":`${t} `,n]})]}),R=({className:t,...e})=>o.jsx(l.CollapsibleContent,{className:r.cn(t),...e}),L=1e3,H=({className:t,isStreaming:e=!1,children:s,style:n,id:u,...g})=>{const[i,f]=c.useState(!0),d=c.useRef(e),[m,b]=c.useState(!1);c.useEffect(()=>{e&&(d.current=!0)},[e]),c.useEffect(()=>{if(d.current&&!e&&i&&!m){const a=setTimeout(()=>{f(!1),b(!0)},L);return()=>clearTimeout(a)}},[e,i,m]);const h=Object.fromEntries(Object.entries(g).filter(([a])=>a.startsWith("data-")||a.startsWith("aria-")));return o.jsx(p.AnimatePresence,{children:i&&o.jsx(p.motion.div,{...h,className:r.cn("flex flex-col gap-2 rounded-xl border border-border bg-background px-2 pb-2 pt-2 shadow-xs",t),exit:{opacity:0,height:0,marginTop:0,marginBottom:0,paddingTop:0,paddingBottom:0,overflow:"hidden"},id:u,style:n,transition:{duration:.35,ease:"easeOut"},children:s})})};exports.Queue=H;exports.QueueItem=I;exports.QueueItemAction=T;exports.QueueItemActions=S;exports.QueueItemAttachment=C;exports.QueueItemContent=y;exports.QueueItemDescription=A;exports.QueueItemFile=q;exports.QueueItemImage=w;exports.QueueItemIndicator=N;exports.QueueList=z;exports.QueueSection=D;exports.QueueSectionContent=R;exports.QueueSectionLabel=O;exports.QueueSectionTrigger=E;
 //# sourceMappingURL=queue.cjs.map

package/dist/components/ai/queue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"queue.cjs","sources":["../../../src/components/ai/queue.tsx"],"sourcesContent":["import { ChevronDownIcon, PaperclipIcon } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface QueueMessagePart {\n  type: string;\n  text?: string;\n  url?: string;\n  filename?: string;\n  mediaType?: string;\n}\n\nexport interface QueueMessage {\n  id: string;\n  parts: QueueMessagePart[];\n}\n\nexport interface QueueTodo {\n  id: string;\n  title: string;\n  description?: string;\n  status?: \"pending\" | \"completed\";\n}\n\n// ---------------------------------------------------------------------------\n// QueueItem\n// ---------------------------------------------------------------------------\n\nexport type QueueItemProps = ComponentProps<\"li\">;\n\nexport const QueueItem = ({ className, ...props }: QueueItemProps) => (\n  <li\n    className={cn(\n      \"group flex flex-row items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemIndicator\n// ---------------------------------------------------------------------------\n\nexport type QueueItemStatus = \"pending\" | \"loading\" | \"done\" | \"error\";\n\nexport type QueueItemIndicatorProps = ComponentProps<\"span\"> & {\n  /**\n   * Visual state of the indicator dot.\n   * - `pending`  — unfilled muted ring\n   * - `loading`  — spinning ring (primary accent)\n   * - `done`     — filled muted dot (task complete)\n   * - `error`    — filled destructive dot\n   */\n  status?: QueueItemStatus;\n  /** @deprecated Use `status=\"done\"` instead. */\n  completed?: boolean;\n};\n\nconst INDICATOR_STATUS: Record<QueueItemStatus, string> = {\n  pending: \"border border-muted-foreground/40\",\n  loading:\n    \"border-2 border-muted-foreground/20 border-t-primary animate-spin\",\n  done: \"border border-muted-foreground/20 bg-muted-foreground/30\",\n  error: \"border border-destructive/30 bg-destructive/70\",\n};\n\nexport const QueueItemIndicator = ({\n  status,\n  completed = false,\n  className,\n  ...props\n}: QueueItemIndicatorProps) => {\n  const resolvedStatus: QueueItemStatus =\n    status ?? (completed ? \"done\" : \"pending\");\n\n  return (\n    <span\n      className={cn(\n        \"inline-block size-2.5 shrink-0 rounded-full\",\n        INDICATOR_STATUS[resolvedStatus],\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n// ---------------------------------------------------------------------------\n// QueueItemContent\n// ---------------------------------------------------------------------------\n\nexport type QueueItemContentProps = ComponentProps<\"span\"> & {\n  completed?: boolean;\n};\n\nexport const QueueItemContent = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemContentProps) => (\n  <span\n    className={cn(\n      \"min-w-0 flex-1 truncate\",\n      completed\n        ? \"text-muted-foreground/50 line-through\"\n        : \"text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemDescription\n// For items with a description, wrap QueueItemContent + QueueItemDescription\n// in a <div className=\"flex flex-col gap-0.5 min-w-0 flex-1\">\n// ---------------------------------------------------------------------------\n\nexport type QueueItemDescriptionProps = ComponentProps<\"div\"> & {\n  completed?: boolean;\n};\n\nexport const QueueItemDescription = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemDescriptionProps) => (\n  <div\n    className={cn(\n      \"text-xs\",\n      completed\n        ? \"text-muted-foreground/40 line-through\"\n        : \"text-muted-foreground/70\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemActions / QueueItemAction\n// ---------------------------------------------------------------------------\n\nexport type QueueItemActionsProps = ComponentProps<\"div\">;\n\nexport const QueueItemActions = ({\n  className,\n  ...props\n}: QueueItemActionsProps) => (\n  <div className={cn(\"ml-auto flex shrink-0 gap-1\", className)} {...props} />\n);\n\nexport type QueueItemActionProps = Omit<\n  ComponentProps<typeof Button>,\n  \"variant\" | \"size\"\n>;\n\nexport const QueueItemAction = ({\n  className,\n  ...props\n}: QueueItemActionProps) => (\n  <Button\n    className={cn(\n      \"size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100\",\n      className\n    )}\n    size=\"icon\"\n    type=\"button\"\n    variant=\"ghost\"\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemAttachment / QueueItemImage / QueueItemFile\n// ---------------------------------------------------------------------------\n\nexport type QueueItemAttachmentProps = ComponentProps<\"div\">;\n\nexport const QueueItemAttachment = ({\n  className,\n  ...props\n}: QueueItemAttachmentProps) => (\n  <div className={cn(\"flex flex-wrap gap-2\", className)} {...props} />\n);\n\nexport type QueueItemImageProps = ComponentProps<\"img\">;\n\nexport const QueueItemImage = ({\n  className,\n  ...props\n}: QueueItemImageProps) => (\n  <img\n    alt=\"\"\n    className={cn(\"size-8 rounded border object-cover\", className)}\n    height={32}\n    width={32}\n    {...props}\n  />\n);\n\nexport type QueueItemFileProps = ComponentProps<\"span\">;\n\nexport const QueueItemFile = ({\n  children,\n  className,\n  ...props\n}: QueueItemFileProps) => (\n  <span\n    className={cn(\n      \"flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs\",\n      className\n    )}\n    {...props}\n  >\n    <PaperclipIcon size={12} />\n    <span className=\"max-w-[100px] truncate\">{children}</span>\n  </span>\n);\n\n// ---------------------------------------------------------------------------\n// QueueList\n// ---------------------------------------------------------------------------\n\nexport type QueueListProps = ComponentProps<typeof ScrollArea>;\n\nexport const QueueList = ({\n  children,\n  className,\n  ...props\n}: QueueListProps) => (\n  <ScrollArea className={cn(\"-mb-1 mt-2\", className)} {...props}>\n    <div className=\"max-h-40 pr-4\">\n      <ul className=\"flex flex-col gap-0.5\">{children}</ul>\n    </div>\n  </ScrollArea>\n);\n\n// ---------------------------------------------------------------------------\n// QueueSection / QueueSectionTrigger / QueueSectionLabel / QueueSectionContent\n// ---------------------------------------------------------------------------\n\nexport type QueueSectionProps = ComponentProps<typeof Collapsible>;\n\nexport const QueueSection = ({\n  className,\n  defaultOpen = true,\n  ...props\n}: QueueSectionProps) => (\n  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />\n);\n\nexport type QueueSectionTriggerProps = ComponentProps<\"button\">;\n\nexport const QueueSectionTrigger = ({\n  children,\n  className,\n  ...props\n}: QueueSectionTriggerProps) => (\n  <CollapsibleTrigger asChild>\n    <button\n      className={cn(\n        \"group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted\",\n        className\n      )}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n    </button>\n  </CollapsibleTrigger>\n);\n\nexport type QueueSectionLabelProps = ComponentProps<\"span\"> & {\n  count?: number;\n  icon?: React.ReactNode;\n};\n\nexport const QueueSectionLabel = ({\n  count,\n  icon,\n  className,\n  children,\n  ...props\n}: QueueSectionLabelProps) => (\n  <span className={cn(\"flex items-center gap-2\", className)} {...props}>\n    <ChevronDownIcon\n      className=\"size-4 opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:-rotate-90\"\n      data-slot=\"collapsible-chevron\"\n    />\n    {icon}\n    <span>\n      {count === undefined ? \"\" : `${count} `}\n      {children}\n    </span>\n  </span>\n);\n\nexport type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const QueueSectionContent = ({\n  className,\n  ...props\n}: QueueSectionContentProps) => (\n  <CollapsibleContent className={cn(className)} {...props} />\n);\n\n// ---------------------------------------------------------------------------\n// Queue (root)\n// ---------------------------------------------------------------------------\n\nconst AUTO_HIDE_DELAY = 1000;\n\nexport type QueueProps = ComponentProps<\"div\"> & {\n  isStreaming?: boolean;\n};\n\nexport const Queue = ({ className, isStreaming = false, children, style, id, ...props }: QueueProps) => {\n  const [visible, setVisible] = useState(true);\n  const hasEverStreamedRef = useRef(isStreaming);\n  const [hasAutoHidden, setHasAutoHidden] = useState(false);\n\n  useEffect(() => {\n    if (isStreaming) hasEverStreamedRef.current = true;\n  }, [isStreaming]);\n\n  useEffect(() => {\n    if (hasEverStreamedRef.current && !isStreaming && visible && !hasAutoHidden) {\n      const timer = setTimeout(() => {\n        setVisible(false);\n        setHasAutoHidden(true);\n      }, AUTO_HIDE_DELAY);\n      return () => clearTimeout(timer);\n    }\n  }, [isStreaming, visible, hasAutoHidden]);\n\n  // Spread data-* and aria-* attributes through; drop event handlers to avoid\n  // onDrag type conflict between React and framer-motion.\n  const passthroughProps = Object.fromEntries(\n    Object.entries(props).filter(([k]) => k.startsWith(\"data-\") || k.startsWith(\"aria-\"))\n  );\n\n  return (\n    <AnimatePresence>\n      {visible && (\n        <motion.div\n          {...passthroughProps}\n          className={cn(\n            \"flex flex-col gap-2 rounded-xl border border-border bg-background px-2 pb-2 pt-2 shadow-xs\",\n            className\n          )}\n          exit={{ opacity: 0, height: 0, marginTop: 0, marginBottom: 0, paddingTop: 0, paddingBottom: 0, overflow: \"hidden\" }}\n          id={id}\n          style={style}\n          transition={{ duration: 0.35, ease: \"easeOut\" }}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["QueueItem","className","props","jsx","cn","INDICATOR_STATUS","QueueItemIndicator","status","completed","resolvedStatus","QueueItemContent","QueueItemDescription","QueueItemActions","QueueItemAction","Button","QueueItemAttachment","QueueItemImage","QueueItemFile","children","jsxs","PaperclipIcon","QueueList","ScrollArea","QueueSection","defaultOpen","Collapsible","QueueSectionTrigger","CollapsibleTrigger","QueueSectionLabel","count","icon","ChevronDownIcon","QueueSectionContent","CollapsibleContent","AUTO_HIDE_DELAY","Queue","isStreaming","style","id","visible","setVisible","useState","hasEverStreamedRef","useRef","hasAutoHidden","setHasAutoHidden","useEffect","timer","passthroughProps","k","AnimatePresence","motion"],"mappings":"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"}
+{"version":3,"file":"queue.cjs","sources":["../../../src/components/ai/queue.tsx"],"sourcesContent":["import { ChevronDownIcon, PaperclipIcon } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface QueueMessagePart {\n  type: string;\n  text?: string;\n  url?: string;\n  filename?: string;\n  mediaType?: string;\n}\n\nexport interface QueueMessage {\n  id: string;\n  parts: QueueMessagePart[];\n}\n\nexport interface QueueTodo {\n  id: string;\n  title: string;\n  description?: string;\n  status?: \"pending\" | \"completed\";\n}\n\n// ---------------------------------------------------------------------------\n// QueueItem\n// ---------------------------------------------------------------------------\n\nexport type QueueItemProps = ComponentProps<\"li\">;\n\nexport const QueueItem = ({ className, ...props }: QueueItemProps) => (\n  <li\n    className={cn(\n      \"group flex flex-row items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemIndicator\n// ---------------------------------------------------------------------------\n\nexport type QueueItemStatus = \"pending\" | \"loading\" | \"done\" | \"error\";\n\nexport type QueueItemIndicatorProps = ComponentProps<\"span\"> & {\n  /**\n   * Visual state of the indicator dot.\n   * - `pending`  — unfilled muted ring\n   * - `loading`  — spinning ring (primary accent)\n   * - `done`     — filled muted dot (task complete)\n   * - `error`    — filled destructive dot\n   */\n  status?: QueueItemStatus;\n  /** @deprecated Use `status=\"done\"` instead. */\n  completed?: boolean;\n};\n\nconst INDICATOR_STATUS: Record<QueueItemStatus, string> = {\n  pending: \"border border-muted-foreground/40\",\n  loading:\n    \"border-2 border-muted-foreground/20 border-t-primary animate-spin\",\n  done: \"border border-muted-foreground/20 bg-muted-foreground/30\",\n  error: \"border border-destructive/30 bg-destructive/70\",\n};\n\nexport const QueueItemIndicator = ({\n  status,\n  completed = false,\n  className,\n  ...props\n}: QueueItemIndicatorProps) => {\n  const resolvedStatus: QueueItemStatus =\n    status ?? (completed ? \"done\" : \"pending\");\n\n  return (\n    <span\n      className={cn(\n        \"inline-block size-2.5 shrink-0 rounded-full\",\n        INDICATOR_STATUS[resolvedStatus],\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\n// ---------------------------------------------------------------------------\n// QueueItemContent\n// ---------------------------------------------------------------------------\n\nexport type QueueItemContentProps = ComponentProps<\"span\"> & {\n  completed?: boolean;\n};\n\nexport const QueueItemContent = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemContentProps) => (\n  <span\n    className={cn(\n      \"min-w-0 flex-1 truncate\",\n      completed\n        ? \"text-muted-foreground/50 line-through\"\n        : \"text-muted-foreground\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemDescription\n// For items with a description, wrap QueueItemContent + QueueItemDescription\n// in a <div className=\"flex flex-col gap-0.5 min-w-0 flex-1\">\n// ---------------------------------------------------------------------------\n\nexport type QueueItemDescriptionProps = ComponentProps<\"div\"> & {\n  completed?: boolean;\n};\n\nexport const QueueItemDescription = ({\n  completed = false,\n  className,\n  ...props\n}: QueueItemDescriptionProps) => (\n  <div\n    className={cn(\n      \"text-xs\",\n      completed\n        ? \"text-muted-foreground/40 line-through\"\n        : \"text-muted-foreground/70\",\n      className\n    )}\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemActions / QueueItemAction\n// ---------------------------------------------------------------------------\n\nexport type QueueItemActionsProps = ComponentProps<\"div\">;\n\nexport const QueueItemActions = ({\n  className,\n  ...props\n}: QueueItemActionsProps) => (\n  <div className={cn(\"ml-auto flex shrink-0 gap-1\", className)} {...props} />\n);\n\nexport type QueueItemActionProps = Omit<\n  ComponentProps<typeof Button>,\n  \"variant\" | \"size\"\n>;\n\nexport const QueueItemAction = ({\n  className,\n  ...props\n}: QueueItemActionProps) => (\n  <Button\n    className={cn(\n      \"size-auto rounded p-1 text-muted-foreground opacity-0 transition-opacity hover:bg-muted-foreground/10 hover:text-foreground group-hover:opacity-100\",\n      className\n    )}\n    size=\"icon\"\n    type=\"button\"\n    variant=\"ghost\"\n    {...props}\n  />\n);\n\n// ---------------------------------------------------------------------------\n// QueueItemAttachment / QueueItemImage / QueueItemFile\n// ---------------------------------------------------------------------------\n\nexport type QueueItemAttachmentProps = ComponentProps<\"div\">;\n\nexport const QueueItemAttachment = ({\n  className,\n  ...props\n}: QueueItemAttachmentProps) => (\n  <div className={cn(\"flex flex-wrap gap-2\", className)} {...props} />\n);\n\nexport type QueueItemImageProps = ComponentProps<\"img\">;\n\nexport const QueueItemImage = ({\n  className,\n  ...props\n}: QueueItemImageProps) => (\n  <img\n    alt=\"\"\n    className={cn(\"size-8 rounded border object-cover\", className)}\n    height={32}\n    width={32}\n    {...props}\n  />\n);\n\nexport type QueueItemFileProps = ComponentProps<\"span\">;\n\nexport const QueueItemFile = ({\n  children,\n  className,\n  ...props\n}: QueueItemFileProps) => (\n  <span\n    className={cn(\n      \"flex items-center gap-1 rounded border bg-muted px-2 py-1 text-xs\",\n      className\n    )}\n    {...props}\n  >\n    <PaperclipIcon size={12} />\n    <span className=\"max-w-[100px] truncate\">{children}</span>\n  </span>\n);\n\n// ---------------------------------------------------------------------------\n// QueueList\n// ---------------------------------------------------------------------------\n\nexport type QueueListProps = ComponentProps<typeof ScrollArea>;\n\nexport const QueueList = ({\n  children,\n  className,\n  ...props\n}: QueueListProps) => (\n  <ScrollArea className={cn(\"-mb-1 mt-2\", className)} {...props}>\n    <div className=\"max-h-40 pr-4\">\n      <ul className=\"flex flex-col gap-0.5\">{children}</ul>\n    </div>\n  </ScrollArea>\n);\n\n// ---------------------------------------------------------------------------\n// QueueSection / QueueSectionTrigger / QueueSectionLabel / QueueSectionContent\n// ---------------------------------------------------------------------------\n\nexport type QueueSectionProps = ComponentProps<typeof Collapsible>;\n\nexport const QueueSection = ({\n  className,\n  defaultOpen = true,\n  ...props\n}: QueueSectionProps) => (\n  <Collapsible className={cn(className)} defaultOpen={defaultOpen} {...props} />\n);\n\nexport type QueueSectionTriggerProps = ComponentProps<\"button\">;\n\nexport const QueueSectionTrigger = ({\n  children,\n  className,\n  ...props\n}: QueueSectionTriggerProps) => (\n  <CollapsibleTrigger asChild>\n    <button\n      className={cn(\n        \"group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-accent\",\n        className\n      )}\n      type=\"button\"\n      {...props}\n    >\n      {children}\n    </button>\n  </CollapsibleTrigger>\n);\n\nexport type QueueSectionLabelProps = ComponentProps<\"span\"> & {\n  count?: number;\n  icon?: React.ReactNode;\n};\n\nexport const QueueSectionLabel = ({\n  count,\n  icon,\n  className,\n  children,\n  ...props\n}: QueueSectionLabelProps) => (\n  <span className={cn(\"flex items-center gap-2\", className)} {...props}>\n    <ChevronDownIcon\n      className=\"size-4 opacity-0 transition-all group-focus-visible:opacity-100 group-hover:opacity-100 group-data-[state=open]:opacity-100 group-data-[state=closed]:-rotate-90\"\n      data-slot=\"collapsible-chevron\"\n    />\n    {icon}\n    <span>\n      {count === undefined ? \"\" : `${count} `}\n      {children}\n    </span>\n  </span>\n);\n\nexport type QueueSectionContentProps = ComponentProps<typeof CollapsibleContent>;\n\nexport const QueueSectionContent = ({\n  className,\n  ...props\n}: QueueSectionContentProps) => (\n  <CollapsibleContent className={cn(className)} {...props} />\n);\n\n// ---------------------------------------------------------------------------\n// Queue (root)\n// ---------------------------------------------------------------------------\n\nconst AUTO_HIDE_DELAY = 1000;\n\nexport type QueueProps = ComponentProps<\"div\"> & {\n  isStreaming?: boolean;\n};\n\nexport const Queue = ({ className, isStreaming = false, children, style, id, ...props }: QueueProps) => {\n  const [visible, setVisible] = useState(true);\n  const hasEverStreamedRef = useRef(isStreaming);\n  const [hasAutoHidden, setHasAutoHidden] = useState(false);\n\n  useEffect(() => {\n    if (isStreaming) hasEverStreamedRef.current = true;\n  }, [isStreaming]);\n\n  useEffect(() => {\n    if (hasEverStreamedRef.current && !isStreaming && visible && !hasAutoHidden) {\n      const timer = setTimeout(() => {\n        setVisible(false);\n        setHasAutoHidden(true);\n      }, AUTO_HIDE_DELAY);\n      return () => clearTimeout(timer);\n    }\n  }, [isStreaming, visible, hasAutoHidden]);\n\n  // Spread data-* and aria-* attributes through; drop event handlers to avoid\n  // onDrag type conflict between React and framer-motion.\n  const passthroughProps = Object.fromEntries(\n    Object.entries(props).filter(([k]) => k.startsWith(\"data-\") || k.startsWith(\"aria-\"))\n  );\n\n  return (\n    <AnimatePresence>\n      {visible && (\n        <motion.div\n          {...passthroughProps}\n          className={cn(\n            \"flex flex-col gap-2 rounded-xl border border-border bg-background px-2 pb-2 pt-2 shadow-xs\",\n            className\n          )}\n          exit={{ opacity: 0, height: 0, marginTop: 0, marginBottom: 0, paddingTop: 0, paddingBottom: 0, overflow: \"hidden\" }}\n          id={id}\n          style={style}\n          transition={{ duration: 0.35, ease: \"easeOut\" }}\n        >\n          {children}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n"],"names":["QueueItem","className","props","jsx","cn","INDICATOR_STATUS","QueueItemIndicator","status","completed","resolvedStatus","QueueItemContent","QueueItemDescription","QueueItemActions","QueueItemAction","Button","QueueItemAttachment","QueueItemImage","QueueItemFile","children","jsxs","PaperclipIcon","QueueList","ScrollArea","QueueSection","defaultOpen","Collapsible","QueueSectionTrigger","CollapsibleTrigger","QueueSectionLabel","count","icon","ChevronDownIcon","QueueSectionContent","CollapsibleContent","AUTO_HIDE_DELAY","Queue","isStreaming","style","id","visible","setVisible","useState","hasEverStreamedRef","useRef","hasAutoHidden","setHasAutoHidden","useEffect","timer","passthroughProps","k","AnimatePresence","motion"],"mappings":"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"}

package/dist/components/ai/queue.js

@@ -1,4 +1,4 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { PaperclipIcon as h, ChevronDownIcon as v } from "lucide-react";
 import { AnimatePresence as N, motion as I } from "motion/react";
 import { useState as m, useRef as y, useEffect as p } from "react";
@@ -10,7 +10,7 @@ const P = ({ className: t, ...e }) => /* @__PURE__ */ o(
   "li",
   {
     className: s(
-      "group flex flex-row items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-muted",
+      "group flex flex-row items-center gap-2 rounded-md px-3 py-1 text-sm transition-colors hover:bg-accent",
       t
     ),
     ...e
@@ -100,7 +100,7 @@ const P = ({ className: t, ...e }) => /* @__PURE__ */ o(
   children: t,
   className: e,
   ...r
-}) => /* @__PURE__ */ d(
+}) => /* @__PURE__ */ c(
   "span",
   {
     className: s(
@@ -129,7 +129,7 @@ const P = ({ className: t, ...e }) => /* @__PURE__ */ o(
   "button",
   {
     className: s(
-      "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-muted",
+      "group flex w-full items-center justify-between rounded-md bg-muted/40 px-3 py-2 text-left font-medium text-muted-foreground text-sm transition-colors hover:bg-accent",
       e
     ),
     type: "button",
@@ -142,7 +142,7 @@ const P = ({ className: t, ...e }) => /* @__PURE__ */ o(
   className: r,
   children: n,
   ...a
-}) => /* @__PURE__ */ d("span", { className: s("flex items-center gap-2", r), ...a, children: [
+}) => /* @__PURE__ */ c("span", { className: s("flex items-center gap-2", r), ...a, children: [
   /* @__PURE__ */ o(
     v,
     {
@@ -151,7 +151,7 @@ const P = ({ className: t, ...e }) => /* @__PURE__ */ o(
     }
   ),
   e,
-  /* @__PURE__ */ d("span", { children: [
+  /* @__PURE__ */ c("span", { children: [
     t === void 0 ? "" : `${t} `,
     n
   ] })
@@ -159,11 +159,11 @@ const P = ({ className: t, ...e }) => /* @__PURE__ */ o(
   className: t,
   ...e
 }) => /* @__PURE__ */ o(w, { className: s(t), ...e }), j = 1e3, X = ({ className: t, isStreaming: e = !1, children: r, style: n, id: a, ...f }) => {
-  const [u, g] = m(!0), c = y(e), [l, b] = m(!1);
+  const [u, g] = m(!0), d = y(e), [l, b] = m(!1);
   p(() => {
-    e && (c.current = !0);
+    e && (d.current = !0);
   }, [e]), p(() => {
-    if (c.current && !e && u && !l) {
+    if (d.current && !e && u && !l) {
       const i = setTimeout(() => {
         g(!1), b(!0);
       }, j);