@chat-lab/ui 0.1.0-beta.8 → 0.1.0-beta.81

package/dist/components/assistant-ui/reasoning.js.map

@@ -1 +1 @@
-{"version":3,"file":"reasoning.js","sources":["../../../src/components/assistant-ui/reasoning.tsx"],"sourcesContent":["\"use client\";\n\nimport { BrainIcon, ChevronDownIcon } from \"lucide-react\";\nimport { createCollapsibleScope } from \"@radix-ui/react-collapsible\";\nimport {\n  memo,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from \"react\";\n\nimport {\n  useScrollLock,\n  useAssistantState,\n  type ReasoningMessagePartComponent,\n  type ReasoningGroupComponent,\n} from \"@assistant-ui/react\";\n\nimport { MarkdownText } from \"@/components/assistant-ui/markdown-text\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\nimport SpeakAiLine from \"@/assets/SpeakAiLineIcon\";\n\nconst ANIMATION_DURATION = 200;\nconst SHIMMER_DURATION = 1000;\n\n/**\n * Root collapsible container that manages open/closed state and scroll lock.\n * Provides animation timing via CSS variable and prevents scroll jumps on collapse.\n */\nconst ReasoningRoot: FC<\n  PropsWithChildren<{\n    className?: string;\n  }>\n> = ({ className, children }) => {\n  const collapsibleRef = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) {\n        lockScroll();\n      }\n      setIsOpen(open);\n    },\n    [lockScroll]\n  );\n  return (\n    <Collapsible\n      ref={collapsibleRef}\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      className={cn(\"aui-reasoning-root mb-4 h-fit w-full\", className)}\n      style={\n        {\n          \"--animation-duration\": `${ANIMATION_DURATION}ms`,\n          \"--shimmer-duration\": `${SHIMMER_DURATION}ms`,\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </Collapsible>\n  );\n};\n\nReasoningRoot.displayName = \"ReasoningRoot\";\n\n/**\n * Gradient overlay that softens the bottom edge during expand/collapse animations.\n * Animation: Fades out with delay when opening and fades back in when closing.\n */\nconst GradientFade: FC<{ className?: string }> = ({ className }) => (\n  <div\n    className={cn(\n      \"aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16\",\n      \"bg-[linear-gradient(to_top,var(--color-background),transparent)]\",\n      \"animate-in fade-in-0\",\n      \"group-data-[state=open]/collapsible-content:animate-out\",\n      \"group-data-[state=open]/collapsible-content:fade-out-0\",\n      \"group-data-[state=open]/collapsible-content:delay-[calc(var(--animation-duration)*0.75)]\", // calc for timing the delay\n      \"group-data-[state=open]/collapsible-content:fill-mode-forwards\",\n      \"duration-(--animation-duration)\",\n      \"group-data-[state=open]/collapsible-content:duration-(--animation-duration)\",\n      className\n    )}\n  />\n);\n\n/**\n * Trigger button for the Reasoning collapsible.\n * Composed of icons, label, and text shimmer animation when reasoning is being streamed.\n */\nconst ReasoningTrigger: FC<{\n  active: boolean;\n  className?: string;\n  isOpen: boolean;\n}> = ({ active, className, isOpen }) => {\n  return (\n    <CollapsibleTrigger\n      asChild\n      className={cn(\n        \"aui-reasoning-trigger group/trigger data-[state=open]:border-b border-[##0000001a] flex items-center justify-between gap-2 py-[6px] pl-[8px] pr-[12px] text-sm text-muted-foreground transition-colors hover:text-foreground\",\n        className\n      )}\n    >\n      <div>\n        <div className=\"flex items-center gap-0\">\n          <div className=\"aui-reasoning-trigger-icon size-4 shrink-0 w-[28px] h-[28px] flex items-center justify-center\">\n            <SpeakAiLine />\n          </div>\n          <span className=\"aui-reasoning-trigger-label-wrapper relative inline-block leading-none\">\n            <span>{!active ? \"思考过程\" : \"深度思考中...\"}</span>\n          </span>\n        </div>\n        <ChevronDownIcon\n          className={cn(\n            \"aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0\",\n            \"transition-transform duration-(--animation-duration) ease-out\",\n            \"group-data-[state=closed]/trigger:-rotate-90\",\n            \"group-data-[state=open]/trigger:rotate-0\"\n          )}\n        />\n      </div>\n    </CollapsibleTrigger>\n  );\n};\n/**\n * Collapsible content wrapper that handles height expand/collapse animation.\n * Animation: Height animates up (collapse) and down (expand).\n * Also provides group context for child animations via data-state attributes.\n */\nconst ReasoningContent: FC<\n  PropsWithChildren<{\n    className?: string;\n    \"aria-busy\"?: boolean;\n  }>\n> = ({ className, children, \"aria-busy\": ariaBusy }) => (\n  <CollapsibleContent\n    className={cn(\n      \"aui-reasoning-content relative overflow-hidden text-sm text-muted-foreground outline-none\",\n      \"group/collapsible-content ease-out\",\n      \"data-[state=closed]:animate-collapsible-up\",\n      \"data-[state=open]:animate-collapsible-down\",\n      \"data-[state=closed]:fill-mode-forwards\",\n      \"data-[state=closed]:pointer-events-none\",\n      \"data-[state=open]:duration-(--animation-duration)\",\n      \"data-[state=closed]:duration-(--animation-duration)\",\n      className\n    )}\n    aria-busy={ariaBusy}\n  >\n    {children}\n    <GradientFade />\n  </CollapsibleContent>\n);\n\nReasoningContent.displayName = \"ReasoningContent\";\n\n/**\n * Text content wrapper that animates the reasoning text visibility.\n * Animation: Slides in from top + fades in when opening, reverses when closing.\n * Reacts to parent ReasoningContent's data-state via Radix group selectors.\n */\nconst ReasoningText: FC<\n  PropsWithChildren<{\n    className?: string;\n  }>\n> = ({ className, children }) => (\n  <div\n    className={cn(\n      \"aui-reasoning-text relative z-0 space-y-4 pt-4 pl-6 leading-relaxed\",\n      \"transform-gpu transition-[transform,opacity]\",\n      \"text-[#86909C]\",\n      \"group-data-[state=open]/collapsible-content:animate-in\",\n      \"group-data-[state=closed]/collapsible-content:animate-out\",\n      \"group-data-[state=open]/collapsible-content:fade-in-0\",\n      \"group-data-[state=closed]/collapsible-content:fade-out-0\",\n      \"group-data-[state=open]/collapsible-content:slide-in-from-top-4\",\n      \"group-data-[state=closed]/collapsible-content:slide-out-to-top-4\",\n      \"group-data-[state=open]/collapsible-content:duration-(--animation-duration)\",\n      \"group-data-[state=closed]/collapsible-content:duration-(--animation-duration)\",\n      \"[&_p]:-mb-2\",\n      className\n    )}\n  >\n    {children}\n  </div>\n);\n\nReasoningText.displayName = \"ReasoningText\";\n\n/**\n * Renders a single reasoning part's text with markdown support.\n * Consecutive reasoning parts are automatically grouped by ReasoningGroup.\n *\n * Pass Reasoning to MessagePrimitive.Parts in thread.tsx\n *\n * @example:\n * ```tsx\n * <MessagePrimitive.Parts\n *   components={{\n *     Reasoning: Reasoning,\n *     ReasoningGroup: ReasoningGroup,\n *   }}\n * />\n * ```\n */\nconst ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;\n\n/**\n * Collapsible wrapper that groups consecutive reasoning parts together.\n *  Includes scroll lock to prevent page jumps during collapse animation.\n *\n *  Pass ReasoningGroup to MessagePrimitive.Parts in thread.tsx\n *\n * @example:\n * ```tsx\n * <MessagePrimitive.Parts\n *   components={{\n *     Reasoning: Reasoning,\n *     ReasoningGroup: ReasoningGroup,\n *   }}\n * />\n * ```\n */\nconst ReasoningGroupImpl: ReasoningGroupComponent = ({\n  children,\n  startIndex,\n  endIndex,\n}) => {\n  /**\n   * Detects if reasoning is currently streaming within this group's range.\n   */\n  const isReasoningStreaming = useAssistantState(({ message }) => {\n    if (message.status?.type !== \"running\") return false;\n    const lastIndex = message.parts.length - 1;\n    if (lastIndex < 0) return false;\n    const lastType = message.parts[lastIndex]?.type;\n    if (lastType !== \"reasoning\") return false;\n    return lastIndex >= startIndex && lastIndex <= endIndex;\n  });\n\n  return (\n    <ReasoningRoot className=\"border-[1px] rounded-[8px] border-[#0000001A] data-[state=closed]:w-[160px] data-[state=open]:w-full\">\n      <ReasoningTrigger\n        active={isReasoningStreaming}\n        isOpen={isReasoningStreaming}\n      />\n\n      <ReasoningContent aria-busy={isReasoningStreaming}>\n        <ReasoningText>{children}</ReasoningText>\n      </ReasoningContent>\n    </ReasoningRoot>\n  );\n};\n\nexport const Reasoning = memo(ReasoningImpl);\nReasoning.displayName = \"Reasoning\";\n\nexport const ReasoningGroup = memo(ReasoningGroupImpl);\nReasoningGroup.displayName = \"ReasoningGroup\";\n"],"names":["_jsx","_jsxs","SpeakAiLine","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"reasoning.js","sources":["../../../src/components/assistant-ui/reasoning.tsx"],"sourcesContent":["'use client';\n\nimport { BrainIcon, ChevronDownIcon } from 'lucide-react';\nimport { createCollapsibleScope } from '@radix-ui/react-collapsible';\nimport {\n  memo,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  type FC,\n  type PropsWithChildren,\n} from 'react';\n\nimport {\n  useScrollLock,\n  useAssistantState,\n  type ReasoningMessagePartComponent,\n  type ReasoningGroupComponent,\n} from '@assistant-ui/react';\n\nimport { MarkdownText } from '@/components/assistant-ui/markdown-text';\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/components/ui/collapsible';\nimport { cn } from '@/lib/utils';\nimport SpeakAiLine from '@/assets/SpeakAiLineIcon';\nimport { useChatkitContext } from '@/contexts/ChatkitContext';\nimport { useI18n } from '@/contexts/I18nContext';\n\nconst ANIMATION_DURATION = 200;\nconst SHIMMER_DURATION = 1000;\n\n/**\n * Root collapsible container that manages open/closed state and scroll lock.\n * Provides animation timing via CSS variable and prevents scroll jumps on collapse.\n */\nconst ReasoningRoot: FC<\n  PropsWithChildren<{\n    className?: string;\n  }>\n> = ({ className, children }) => {\n  const collapsibleRef = useRef<HTMLDivElement>(null);\n  const { expandReasoning } = useChatkitContext();\n  const [isOpen, setIsOpen] = useState(expandReasoning);\n  const lockScroll = useScrollLock(collapsibleRef, ANIMATION_DURATION);\n\n  const handleOpenChange = useCallback(\n    (open: boolean) => {\n      if (!open) {\n        lockScroll();\n      }\n      setIsOpen(open);\n    },\n    [lockScroll],\n  );\n  return (\n    <Collapsible\n      ref={collapsibleRef}\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      className={cn('aui-reasoning-root mb-4 h-fit w-full', className)}\n      style={\n        {\n          '--animation-duration': `${ANIMATION_DURATION}ms`,\n          '--shimmer-duration': `${SHIMMER_DURATION}ms`,\n        } as React.CSSProperties\n      }\n    >\n      {children}\n    </Collapsible>\n  );\n};\n\nReasoningRoot.displayName = 'ReasoningRoot';\n\n/**\n * Gradient overlay that softens the bottom edge during expand/collapse animations.\n * Animation: Fades out with delay when opening and fades back in when closing.\n */\nconst GradientFade: FC<{ className?: string }> = ({ className }) => (\n  <div\n    className={cn(\n      'aui-reasoning-fade pointer-events-none absolute inset-x-0 bottom-0 z-10 h-16',\n      'bg-[linear-gradient(to_top,var(--color-background),transparent)]',\n      'animate-in fade-in-0',\n      'group-data-[state=open]/collapsible-content:animate-out',\n      'group-data-[state=open]/collapsible-content:fade-out-0',\n      'group-data-[state=open]/collapsible-content:delay-[calc(var(--animation-duration)*0.75)]', // calc for timing the delay\n      'group-data-[state=open]/collapsible-content:fill-mode-forwards',\n      'duration-(--animation-duration)',\n      'group-data-[state=open]/collapsible-content:duration-(--animation-duration)',\n      className,\n    )}\n  />\n);\n\n/**\n * Trigger button for the Reasoning collapsible.\n * Composed of icons, label, and text shimmer animation when reasoning is being streamed.\n */\nconst ReasoningTrigger: FC<{\n  active: boolean;\n  className?: string;\n  isOpen: boolean;\n}> = ({ active, className, isOpen }) => {\n  const { t } = useI18n();\n  return (\n    <CollapsibleTrigger\n      asChild\n      className={cn(\n        'aui-reasoning-trigger group/trigger data-[state=open]:border-b border-[#0000001a] flex items-center justify-between gap-2 py-[6px] pl-[8px] pr-[12px] text-sm text-muted-foreground transition-colors hover:text-foreground',\n        className,\n      )}\n    >\n      <div>\n        <div className=\"flex items-center gap-0\">\n          <div className=\"aui-reasoning-trigger-icon size-4 shrink-0 w-[28px] h-[28px] flex items-center justify-center\">\n            <SpeakAiLine />\n          </div>\n          <span className=\"aui-reasoning-trigger-label-wrapper relative inline-block leading-none\">\n            <span>\n              {!active ? t('reasoning.process') : t('reasoning.thinking')}\n            </span>\n          </span>\n        </div>\n        <ChevronDownIcon\n          className={cn(\n            'aui-reasoning-trigger-chevron mt-0.5 size-4 shrink-0',\n            'transition-transform duration-(--animation-duration) ease-out',\n            'group-data-[state=closed]/trigger:-rotate-90',\n            'group-data-[state=open]/trigger:rotate-0',\n          )}\n        />\n      </div>\n    </CollapsibleTrigger>\n  );\n};\n/**\n * Collapsible content wrapper that handles height expand/collapse animation.\n * Animation: Height animates up (collapse) and down (expand).\n * Also provides group context for child animations via data-state attributes.\n */\nconst ReasoningContent: FC<\n  PropsWithChildren<{\n    className?: string;\n    'aria-busy'?: boolean;\n  }>\n> = ({ className, children, 'aria-busy': ariaBusy }) => (\n  <CollapsibleContent\n    className={cn(\n      'aui-reasoning-content relative overflow-hidden text-sm text-muted-foreground outline-none',\n      'group/collapsible-content ease-out',\n      'data-[state=closed]:animate-collapsible-up',\n      'data-[state=open]:animate-collapsible-down',\n      'data-[state=closed]:fill-mode-forwards',\n      'data-[state=closed]:pointer-events-none',\n      'data-[state=open]:duration-(--animation-duration)',\n      'data-[state=closed]:duration-(--animation-duration)',\n      className,\n    )}\n    aria-busy={ariaBusy}\n  >\n    {children}\n    <GradientFade />\n  </CollapsibleContent>\n);\n\nReasoningContent.displayName = 'ReasoningContent';\n\n/**\n * Text content wrapper that animates the reasoning text visibility.\n * Animation: Slides in from top + fades in when opening, reverses when closing.\n * Reacts to parent ReasoningContent's data-state via Radix group selectors.\n */\nconst ReasoningText: FC<\n  PropsWithChildren<{\n    className?: string;\n  }>\n> = ({ className, children }) => (\n  <div\n    className={cn(\n      'aui-reasoning-text relative z-0 space-y-4 pt-4 pl-6 leading-relaxed',\n      'transform-gpu transition-[transform,opacity]',\n      'text-[#86909C]',\n      'group-data-[state=open]/collapsible-content:animate-in',\n      'group-data-[state=closed]/collapsible-content:animate-out',\n      'group-data-[state=open]/collapsible-content:fade-in-0',\n      'group-data-[state=closed]/collapsible-content:fade-out-0',\n      'group-data-[state=open]/collapsible-content:slide-in-from-top-4',\n      'group-data-[state=closed]/collapsible-content:slide-out-to-top-4',\n      'group-data-[state=open]/collapsible-content:duration-(--animation-duration)',\n      'group-data-[state=closed]/collapsible-content:duration-(--animation-duration)',\n      '[&_p]:-mb-2',\n      className,\n    )}\n  >\n    {children}\n  </div>\n);\n\nReasoningText.displayName = 'ReasoningText';\n\n/**\n * Renders a single reasoning part's text with markdown support.\n * Consecutive reasoning parts are automatically grouped by ReasoningGroup.\n *\n * Pass Reasoning to MessagePrimitive.Parts in thread.tsx\n *\n * @example:\n * ```tsx\n * <MessagePrimitive.Parts\n *   components={{\n *     Reasoning: Reasoning,\n *     ReasoningGroup: ReasoningGroup,\n *   }}\n * />\n * ```\n */\nconst ReasoningImpl: ReasoningMessagePartComponent = () => <MarkdownText />;\n\n/**\n * Collapsible wrapper that groups consecutive reasoning parts together.\n *  Includes scroll lock to prevent page jumps during collapse animation.\n *\n *  Pass ReasoningGroup to MessagePrimitive.Parts in thread.tsx\n *\n * @example:\n * ```tsx\n * <MessagePrimitive.Parts\n *   components={{\n *     Reasoning: Reasoning,\n *     ReasoningGroup: ReasoningGroup,\n *   }}\n * />\n * ```\n */\nconst ReasoningGroupImpl: ReasoningGroupComponent = ({\n  children,\n  startIndex,\n  endIndex,\n}) => {\n  /**\n   * Detects if reasoning is currently streaming within this group's range.\n   */\n  const isReasoningStreaming = useAssistantState(({ message }) => {\n    if (message.status?.type !== 'running') return false;\n    const lastIndex = message.parts.length - 1;\n    if (lastIndex < 0) return false;\n    const lastType = message.parts[lastIndex]?.type;\n    if (lastType !== 'reasoning') return false;\n    return lastIndex >= startIndex && lastIndex <= endIndex;\n  });\n\n  return (\n    <ReasoningRoot className=\"border-[1px] rounded-[8px] border-[#0000001A] data-[state=closed]:w-[160px] data-[state=open]:w-full\">\n      <ReasoningTrigger\n        active={isReasoningStreaming}\n        isOpen={isReasoningStreaming}\n      />\n\n      <ReasoningContent aria-busy={isReasoningStreaming}>\n        <ReasoningText>{children}</ReasoningText>\n      </ReasoningContent>\n    </ReasoningRoot>\n  );\n};\n\nexport const Reasoning = memo(ReasoningImpl);\nReasoning.displayName = 'Reasoning';\n\nexport const ReasoningGroup = memo(ReasoningGroupImpl);\nReasoningGroup.displayName = 'ReasoningGroup';\n"],"names":["_jsx","_jsxs","SpeakAiLine"],"mappings":"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"}

package/dist/components/assistant-ui/shiki-highlighter.cjs

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('react-shiki/core');
+var core$1 = require('shiki/core');
+var oniguruma = require('shiki/engine/oniguruma');
+var utils = require('../../lib/utils.cjs');
+var js = require('@shikijs/langs/javascript');
+var ts = require('@shikijs/langs/typescript');
+var json = require('@shikijs/langs/json');
+var html = require('@shikijs/langs/html');
+var css = require('@shikijs/langs/css');
+var python = require('@shikijs/langs/python');
+var bash = require('@shikijs/langs/bash');
+var yaml = require('@shikijs/langs/yaml');
+var md = require('@shikijs/langs/markdown');
+var java = require('@shikijs/langs/java');
+var go = require('@shikijs/langs/go');
+var rust = require('@shikijs/langs/rust');
+var sql = require('@shikijs/langs/sql');
+var githubDark = require('@shikijs/themes/github-dark');
+var githubLight = require('@shikijs/themes/github-light');
+
+// 创建自定义 highlighter
+const createHighlighter = async () => core$1.createHighlighterCore({
+    langs: [js, ts, json, html, css, python, bash, yaml, md, java, go, rust, sql],
+    themes: [githubDark, githubLight],
+    engine: oniguruma.createOnigurumaEngine(() => import('shiki/wasm')),
+});
+// 缓存 highlighter 实例
+let highlighterPromise = null;
+const getHighlighter = () => {
+    if (!highlighterPromise) {
+        highlighterPromise = createHighlighter();
+    }
+    return highlighterPromise;
+};
+/**
+ * SyntaxHighlighter component, using react-shiki
+ */
+const SyntaxHighlighter = ({ code, language, theme = { dark: 'github-dark', light: 'github-light' }, className, addDefaultStyles = false, showLanguage = false, node: _node, components: _components, ...props }) => {
+    const [highlighter, setHighlighter] = React.useState(null);
+    React.useEffect(() => {
+        getHighlighter().then(setHighlighter);
+    }, []);
+    if (!highlighter) {
+        return (jsxRuntime.jsx("pre", { className: utils.cn('bg-muted/75 p-4 rounded-lg', className), children: jsxRuntime.jsx("code", { children: code.trim() }) }));
+    }
+    return (jsxRuntime.jsx(core.ShikiHighlighter, { ...props, language: language, theme: theme, addDefaultStyles: addDefaultStyles, showLanguage: showLanguage, defaultColor: "light-dark()", className: utils.cn('aui-shiki-base [&_pre]:overflow-x-auto [&_pre]:rounded-b-lg [&_pre]:!bg-muted/75 [&_pre]:p-4 [&_pre]:border max-w-[800px] overflow-auto', className), highlighter: highlighter, children: code.trim() }));
+};
+SyntaxHighlighter.displayName = 'SyntaxHighlighter';
+
+exports.SyntaxHighlighter = SyntaxHighlighter;
+//# sourceMappingURL=shiki-highlighter.cjs.map

package/dist/components/assistant-ui/shiki-highlighter.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki-highlighter.cjs","sources":["../../../src/components/assistant-ui/shiki-highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { FC, useEffect, useState } from 'react';\nimport {\n  ShikiHighlighter,\n  type ShikiHighlighterProps,\n} from 'react-shiki/core';\nimport { createHighlighterCore } from 'shiki/core';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { SyntaxHighlighterProps as AUIProps } from '@assistant-ui/react-markdown';\nimport { cn } from '@/lib/utils';\n\n// 按需导入常用语言 (从 @shikijs/langs 导入)\nimport js from '@shikijs/langs/javascript';\nimport ts from '@shikijs/langs/typescript';\nimport json from '@shikijs/langs/json';\nimport html from '@shikijs/langs/html';\nimport css from '@shikijs/langs/css';\nimport python from '@shikijs/langs/python';\nimport bash from '@shikijs/langs/bash';\nimport yaml from '@shikijs/langs/yaml';\nimport md from '@shikijs/langs/markdown';\nimport java from '@shikijs/langs/java';\nimport go from '@shikijs/langs/go';\nimport rust from '@shikijs/langs/rust';\nimport sql from '@shikijs/langs/sql';\n\n// 按需导入主题 (从 @shikijs/themes 导入)\nimport githubDark from '@shikijs/themes/github-dark';\nimport githubLight from '@shikijs/themes/github-light';\n\n// 创建自定义 highlighter\nconst createHighlighter = async () => createHighlighterCore({\n  langs: [js, ts, json, html, css, python, bash, yaml, md, java, go, rust, sql],\n  themes: [githubDark, githubLight],\n  engine: createOnigurumaEngine(() => import('shiki/wasm')),\n});\n\n// 缓存 highlighter 实例\nlet highlighterPromise: ReturnType<typeof createHighlighter> | null = null;\nconst getHighlighter = () => {\n  if (!highlighterPromise) {\n    highlighterPromise = createHighlighter();\n  }\n  return highlighterPromise;\n};\n\n/**\n * Props for the SyntaxHighlighter component\n */\nexport type HighlighterProps = Omit<\n  ShikiHighlighterProps,\n  'children' | 'theme' | 'highlighter'\n> & {\n  theme?: ShikiHighlighterProps['theme'];\n} & Pick<AUIProps, 'node' | 'components' | 'language' | 'code'>;\n\n/**\n * SyntaxHighlighter component, using react-shiki\n */\nexport const SyntaxHighlighter: FC<HighlighterProps> = ({\n  code,\n  language,\n  theme = { dark: 'github-dark', light: 'github-light' },\n  className,\n  addDefaultStyles = false,\n  showLanguage = false,\n  node: _node,\n  components: _components,\n  ...props\n}) => {\n  const [highlighter, setHighlighter] = useState<Awaited<ReturnType<typeof createHighlighter>> | null>(null);\n\n  useEffect(() => {\n    getHighlighter().then(setHighlighter);\n  }, []);\n\n  if (!highlighter) {\n    return (\n      <pre className={cn('bg-muted/75 p-4 rounded-lg', className)}>\n        <code>{code.trim()}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <ShikiHighlighter\n      {...props}\n      language={language}\n      theme={theme}\n      addDefaultStyles={addDefaultStyles}\n      showLanguage={showLanguage}\n      defaultColor=\"light-dark()\"\n      className={cn(\n        'aui-shiki-base [&_pre]:overflow-x-auto [&_pre]:rounded-b-lg [&_pre]:!bg-muted/75 [&_pre]:p-4 [&_pre]:border max-w-[800px] overflow-auto',\n        className,\n      )}\n      highlighter={highlighter}\n    >\n      {code.trim()}\n    </ShikiHighlighter>\n  );\n};\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n"],"names":["createHighlighterCore","createOnigurumaEngine","useState","useEffect","_jsx","cn","ShikiHighlighter"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA+BA;AACA,MAAM,iBAAiB,GAAG,YAAYA,4BAAqB,CAAC;IAC1D,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC;AAC7E,IAAA,MAAM,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC;IACjC,MAAM,EAAEC,+BAAqB,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAC1D,CAAA,CAAC,CAAC;AAEH;AACA,IAAI,kBAAkB,GAAgD,IAAI,CAAC;AAC3E,MAAM,cAAc,GAAG,MAAK;IAC1B,IAAI,CAAC,kBAAkB,EAAE;QACvB,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;KAC1C;AACD,IAAA,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAYF;;AAEG;MACU,iBAAiB,GAAyB,CAAC,EACtD,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,EACtD,SAAS,EACT,gBAAgB,GAAG,KAAK,EACxB,YAAY,GAAG,KAAK,EACpB,IAAI,EAAE,KAAK,EACX,UAAU,EAAE,WAAW,EACvB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAAuD,IAAI,CAAC,CAAC;IAE3GC,eAAS,CAAC,MAAK;AACb,QAAA,cAAc,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KACvC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,WAAW,EAAE;AAChB,QAAA,QACEC,cAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAEC,QAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EACzD,QAAA,EAAAD,cAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,CAAC,IAAI,EAAE,EAAQ,CAAA,EAAA,CACtB,EACN;KACH;IAED,QACEA,eAACE,qBAAgB,EAAA,EAAA,GACX,KAAK,EACT,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAC,cAAc,EAC3B,SAAS,EAAED,QAAE,CACX,yIAAyI,EACzI,SAAS,CACV,EACD,WAAW,EAAE,WAAW,EAEvB,QAAA,EAAA,IAAI,CAAC,IAAI,EAAE,EACK,CAAA,EACnB;AACJ,EAAE;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/components/assistant-ui/shiki-highlighter.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { type ShikiHighlighterProps } from 'react-shiki/core';
+import type { SyntaxHighlighterProps as AUIProps } from '@assistant-ui/react-markdown';
+/**
+ * Props for the SyntaxHighlighter component
+ */
+export type HighlighterProps = Omit<ShikiHighlighterProps, 'children' | 'theme' | 'highlighter'> & {
+    theme?: ShikiHighlighterProps['theme'];
+} & Pick<AUIProps, 'node' | 'components' | 'language' | 'code'>;
+/**
+ * SyntaxHighlighter component, using react-shiki
+ */
+export declare const SyntaxHighlighter: FC<HighlighterProps>;
+//# sourceMappingURL=shiki-highlighter.d.ts.map

package/dist/components/assistant-ui/shiki-highlighter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki-highlighter.d.ts","sourceRoot":"","sources":["../../../src/components/assistant-ui/shiki-highlighter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAC;AAChD,OAAO,EAEL,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAG1B,OAAO,KAAK,EAAE,sBAAsB,IAAI,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAsCvF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,qBAAqB,EACrB,UAAU,GAAG,OAAO,GAAG,aAAa,CACrC,GAAG;IACF,KAAK,CAAC,EAAE,qBAAqB,CAAC,OAAO,CAAC,CAAC;CACxC,GAAG,IAAI,CAAC,QAAQ,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC,CAAC;AAEhE;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,gBAAgB,CA0ClD,CAAC"}

package/dist/components/assistant-ui/shiki-highlighter.js

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { ShikiHighlighter } from 'react-shiki/core';
+import { createHighlighterCore } from 'shiki/core';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+import { cn } from '../../lib/utils.js';
+import js from '@shikijs/langs/javascript';
+import ts from '@shikijs/langs/typescript';
+import json from '@shikijs/langs/json';
+import html from '@shikijs/langs/html';
+import css from '@shikijs/langs/css';
+import python from '@shikijs/langs/python';
+import bash from '@shikijs/langs/bash';
+import yaml from '@shikijs/langs/yaml';
+import md from '@shikijs/langs/markdown';
+import java from '@shikijs/langs/java';
+import go from '@shikijs/langs/go';
+import rust from '@shikijs/langs/rust';
+import sql from '@shikijs/langs/sql';
+import githubDark from '@shikijs/themes/github-dark';
+import githubLight from '@shikijs/themes/github-light';
+
+// 创建自定义 highlighter
+const createHighlighter = async () => createHighlighterCore({
+    langs: [js, ts, json, html, css, python, bash, yaml, md, java, go, rust, sql],
+    themes: [githubDark, githubLight],
+    engine: createOnigurumaEngine(() => import('shiki/wasm')),
+});
+// 缓存 highlighter 实例
+let highlighterPromise = null;
+const getHighlighter = () => {
+    if (!highlighterPromise) {
+        highlighterPromise = createHighlighter();
+    }
+    return highlighterPromise;
+};
+/**
+ * SyntaxHighlighter component, using react-shiki
+ */
+const SyntaxHighlighter = ({ code, language, theme = { dark: 'github-dark', light: 'github-light' }, className, addDefaultStyles = false, showLanguage = false, node: _node, components: _components, ...props }) => {
+    const [highlighter, setHighlighter] = useState(null);
+    useEffect(() => {
+        getHighlighter().then(setHighlighter);
+    }, []);
+    if (!highlighter) {
+        return (jsx("pre", { className: cn('bg-muted/75 p-4 rounded-lg', className), children: jsx("code", { children: code.trim() }) }));
+    }
+    return (jsx(ShikiHighlighter, { ...props, language: language, theme: theme, addDefaultStyles: addDefaultStyles, showLanguage: showLanguage, defaultColor: "light-dark()", className: cn('aui-shiki-base [&_pre]:overflow-x-auto [&_pre]:rounded-b-lg [&_pre]:!bg-muted/75 [&_pre]:p-4 [&_pre]:border max-w-[800px] overflow-auto', className), highlighter: highlighter, children: code.trim() }));
+};
+SyntaxHighlighter.displayName = 'SyntaxHighlighter';
+
+export { SyntaxHighlighter };
+//# sourceMappingURL=shiki-highlighter.js.map

package/dist/components/assistant-ui/shiki-highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiki-highlighter.js","sources":["../../../src/components/assistant-ui/shiki-highlighter.tsx"],"sourcesContent":["'use client';\n\nimport { FC, useEffect, useState } from 'react';\nimport {\n  ShikiHighlighter,\n  type ShikiHighlighterProps,\n} from 'react-shiki/core';\nimport { createHighlighterCore } from 'shiki/core';\nimport { createOnigurumaEngine } from 'shiki/engine/oniguruma';\nimport type { SyntaxHighlighterProps as AUIProps } from '@assistant-ui/react-markdown';\nimport { cn } from '@/lib/utils';\n\n// 按需导入常用语言 (从 @shikijs/langs 导入)\nimport js from '@shikijs/langs/javascript';\nimport ts from '@shikijs/langs/typescript';\nimport json from '@shikijs/langs/json';\nimport html from '@shikijs/langs/html';\nimport css from '@shikijs/langs/css';\nimport python from '@shikijs/langs/python';\nimport bash from '@shikijs/langs/bash';\nimport yaml from '@shikijs/langs/yaml';\nimport md from '@shikijs/langs/markdown';\nimport java from '@shikijs/langs/java';\nimport go from '@shikijs/langs/go';\nimport rust from '@shikijs/langs/rust';\nimport sql from '@shikijs/langs/sql';\n\n// 按需导入主题 (从 @shikijs/themes 导入)\nimport githubDark from '@shikijs/themes/github-dark';\nimport githubLight from '@shikijs/themes/github-light';\n\n// 创建自定义 highlighter\nconst createHighlighter = async () => createHighlighterCore({\n  langs: [js, ts, json, html, css, python, bash, yaml, md, java, go, rust, sql],\n  themes: [githubDark, githubLight],\n  engine: createOnigurumaEngine(() => import('shiki/wasm')),\n});\n\n// 缓存 highlighter 实例\nlet highlighterPromise: ReturnType<typeof createHighlighter> | null = null;\nconst getHighlighter = () => {\n  if (!highlighterPromise) {\n    highlighterPromise = createHighlighter();\n  }\n  return highlighterPromise;\n};\n\n/**\n * Props for the SyntaxHighlighter component\n */\nexport type HighlighterProps = Omit<\n  ShikiHighlighterProps,\n  'children' | 'theme' | 'highlighter'\n> & {\n  theme?: ShikiHighlighterProps['theme'];\n} & Pick<AUIProps, 'node' | 'components' | 'language' | 'code'>;\n\n/**\n * SyntaxHighlighter component, using react-shiki\n */\nexport const SyntaxHighlighter: FC<HighlighterProps> = ({\n  code,\n  language,\n  theme = { dark: 'github-dark', light: 'github-light' },\n  className,\n  addDefaultStyles = false,\n  showLanguage = false,\n  node: _node,\n  components: _components,\n  ...props\n}) => {\n  const [highlighter, setHighlighter] = useState<Awaited<ReturnType<typeof createHighlighter>> | null>(null);\n\n  useEffect(() => {\n    getHighlighter().then(setHighlighter);\n  }, []);\n\n  if (!highlighter) {\n    return (\n      <pre className={cn('bg-muted/75 p-4 rounded-lg', className)}>\n        <code>{code.trim()}</code>\n      </pre>\n    );\n  }\n\n  return (\n    <ShikiHighlighter\n      {...props}\n      language={language}\n      theme={theme}\n      addDefaultStyles={addDefaultStyles}\n      showLanguage={showLanguage}\n      defaultColor=\"light-dark()\"\n      className={cn(\n        'aui-shiki-base [&_pre]:overflow-x-auto [&_pre]:rounded-b-lg [&_pre]:!bg-muted/75 [&_pre]:p-4 [&_pre]:border max-w-[800px] overflow-auto',\n        className,\n      )}\n      highlighter={highlighter}\n    >\n      {code.trim()}\n    </ShikiHighlighter>\n  );\n};\n\nSyntaxHighlighter.displayName = 'SyntaxHighlighter';\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA+BA;AACA,MAAM,iBAAiB,GAAG,YAAY,qBAAqB,CAAC;IAC1D,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC;AAC7E,IAAA,MAAM,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC;IACjC,MAAM,EAAE,qBAAqB,CAAC,MAAM,OAAO,YAAY,CAAC,CAAC;AAC1D,CAAA,CAAC,CAAC;AAEH;AACA,IAAI,kBAAkB,GAAgD,IAAI,CAAC;AAC3E,MAAM,cAAc,GAAG,MAAK;IAC1B,IAAI,CAAC,kBAAkB,EAAE;QACvB,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;KAC1C;AACD,IAAA,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAYF;;AAEG;MACU,iBAAiB,GAAyB,CAAC,EACtD,IAAI,EACJ,QAAQ,EACR,KAAK,GAAG,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,cAAc,EAAE,EACtD,SAAS,EACT,gBAAgB,GAAG,KAAK,EACxB,YAAY,GAAG,KAAK,EACpB,IAAI,EAAE,KAAK,EACX,UAAU,EAAE,WAAW,EACvB,GAAG,KAAK,EACT,KAAI;IACH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAuD,IAAI,CAAC,CAAC;IAE3G,SAAS,CAAC,MAAK;AACb,QAAA,cAAc,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KACvC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,CAAC,WAAW,EAAE;AAChB,QAAA,QACEA,GAAK,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,4BAA4B,EAAE,SAAS,CAAC,EACzD,QAAA,EAAAA,GAAA,CAAA,MAAA,EAAA,EAAA,QAAA,EAAO,IAAI,CAAC,IAAI,EAAE,EAAQ,CAAA,EAAA,CACtB,EACN;KACH;IAED,QACEA,IAAC,gBAAgB,EAAA,EAAA,GACX,KAAK,EACT,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAC,cAAc,EAC3B,SAAS,EAAE,EAAE,CACX,yIAAyI,EACzI,SAAS,CACV,EACD,WAAW,EAAE,WAAW,EAEvB,QAAA,EAAA,IAAI,CAAC,IAAI,EAAE,EACK,CAAA,EACnB;AACJ,EAAE;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB;;;;"}

package/dist/components/assistant-ui/thread.cjs

@@ -1,125 +1,137 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+require('uuid');
+var react$1 = require('@assistant-ui/react');
 var React = require('react');
+var react = require('motion/react');
 var button = require('../ui/button.cjs');
-var markdownText = require('./markdown-text.cjs');
-var toolFallback = require('./tool-fallback.cjs');
+require('./markdown-text.cjs');
+var utils = require('../../lib/utils.cjs');
 var tooltipIconButton = require('./tooltip-icon-button.cjs');
 var attachment = require('./attachment.cjs');
-var index$2 = require('./file/index.cjs');
-var utils = require('../../lib/utils.cjs');
-var reasoning = require('./reasoning.cjs');
+require('./file/index.cjs');
 var ChatkitContext = require('../../contexts/ChatkitContext.cjs');
-var ThumbUpIcon = require('../../assets/ThumbUpIcon.cjs');
-var ThumbDownIcon = require('../../assets/ThumbDownIcon.cjs');
+var I18nContext = require('../../contexts/I18nContext.cjs');
 var Copy = require('../../assets/Copy.cjs');
-var RefreshIcon = require('../../assets/RefreshIcon.cjs');
-var threadHeader = require('./thread-header.cjs');
-var NewSessioin = require('../../assets/NewSessioin.cjs');
-var dayjs_min = require('../../node_modules/.pnpm/dayjs@1.11.18/node_modules/dayjs/dayjs.min.cjs');
+require('dayjs');
 var useThread = require('../../hooks/useThread.cjs');
-var index = require('../../node_modules/.pnpm/framer-motion@12.23.24_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/framer-motion/dist/es/components/LazyMotion/index.cjs');
-var featuresAnimation = require('../../node_modules/.pnpm/framer-motion@12.23.24_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/framer-motion/dist/es/render/dom/features-animation.cjs');
-var index$1 = require('../../node_modules/.pnpm/framer-motion@12.23.24_react-dom@17.0.2_react@17.0.2__react@17.0.2/node_modules/framer-motion/dist/es/components/MotionConfig/index.cjs');
-var loaderCircle = require('../../node_modules/.pnpm/lucide-react@0.552.0_react@17.0.2/node_modules/lucide-react/dist/esm/icons/loader-circle.cjs');
-var arrowUp = require('../../node_modules/.pnpm/lucide-react@0.552.0_react@17.0.2/node_modules/lucide-react/dist/esm/icons/arrow-up.cjs');
-var square = require('../../node_modules/.pnpm/lucide-react@0.552.0_react@17.0.2/node_modules/lucide-react/dist/esm/icons/square.cjs');
-var check = require('../../node_modules/.pnpm/lucide-react@0.552.0_react@17.0.2/node_modules/lucide-react/dist/esm/icons/check.cjs');
-var chevronLeft = require('../../node_modules/.pnpm/lucide-react@0.552.0_react@17.0.2/node_modules/lucide-react/dist/esm/icons/chevron-left.cjs');
-var chevronRight = require('../../node_modules/.pnpm/lucide-react@0.552.0_react@17.0.2/node_modules/lucide-react/dist/esm/icons/chevron-right.cjs');
-var arrowDown = require('../../node_modules/.pnpm/lucide-react@0.552.0_react@17.0.2/node_modules/lucide-react/dist/esm/icons/arrow-down.cjs');
-var ThreadRoot = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/thread/ThreadRoot.cjs');
-var ThreadIf = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/thread/ThreadIf.cjs');
-var ThreadViewport = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/thread/ThreadViewport.cjs');
-var ThreadMessages = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/thread/ThreadMessages.cjs');
-var ComposerRoot = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/composer/ComposerRoot.cjs');
-var ComposerInput = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/composer/ComposerInput.cjs');
-var ComposerSend = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/composer/ComposerSend.cjs');
-var ComposerCancel = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/composer/ComposerCancel.cjs');
-var MessageRoot = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/message/MessageRoot.cjs');
-var MessageParts = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/message/MessageParts.cjs');
-var ActionBarRoot = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/actionBar/ActionBarRoot.cjs');
-var ActionBarCopy = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/actionBar/ActionBarCopy.cjs');
-var MessageIf = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/message/MessageIf.cjs');
-var ActionBarReload = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/actionBar/ActionBarReload.cjs');
-var BranchPickerRoot = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/branchPicker/BranchPickerRoot.cjs');
-var BranchPickerPrevious = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/branchPicker/BranchPickerPrevious.cjs');
-var BranchPickerNumber = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/branchPicker/BranchPickerNumber.cjs');
-var BranchPickerCount = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/branchPicker/BranchPickerCount.cjs');
-var BranchPickerNext = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/branchPicker/BranchPickerNext.cjs');
-var ThreadScrollToBottom$1 = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/thread/ThreadScrollToBottom.cjs');
-var MessageError$1 = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/message/MessageError.cjs');
-var ErrorRoot = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/error/ErrorRoot.cjs');
-var ErrorMessage = require('../../node_modules/.pnpm/@assistant-ui_react@0.11.37_patch_hash_ynfhbcwv6lgckkdmenopdkbtmq_@types_react-dom@17.0.2_@ty_7dz2xsf2ib2guiutzhjhoerypu/node_modules/@assistant-ui/react/dist/primitives/error/ErrorMessage.cjs');
+var AbortMessage = require('../../assets/AbortMessage.cjs');
+require('../../core/dist/index.cjs');
+var ahooks = require('ahooks');
+var welcome = require('../welcome.cjs');
+var threadHeader = require('./thread-header.cjs');
+require('./reasoning.cjs');
+var messageComponentsWithAvatar = require('./message-components-with-avatar.cjs');
+var valtio = require('valtio');
 
-const Thread = ({ welcome }) => {
-    const { currentThread } = useThread();
-    const { showHeader } = ChatkitContext.useChatkitContext();
-    return (jsxRuntime.jsxs("div", { className: "min-w-full h-full flex flex-col", children: [showHeader && jsxRuntime.jsx(threadHeader, { title: currentThread?.name || "Thread Title" }), jsxRuntime.jsx(index.LazyMotion, { features: featuresAnimation.domAnimation, children: jsxRuntime.jsx(index$1.MotionConfig, { reducedMotion: "user", children: jsxRuntime.jsxs(ThreadRoot.ThreadPrimitiveRoot, { className: "aui-root aui-thread-root @container flex-1 flex  h-[calc(100%-65px)] flex-col bg-background", style: {
-                            ["--thread-max-width"]: "66rem",
-                        }, children: [jsxRuntime.jsx(ThreadIf.ThreadPrimitiveIf, { empty: false, children: jsxRuntime.jsxs(ThreadViewport.ThreadPrimitiveViewport, { className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll px-4", children: [jsxRuntime.jsx(ThreadMessages.ThreadPrimitiveMessages, { components: {
-                                                UserMessage,
-                                                EditComposer,
-                                                AssistantMessage,
-                                            } }), jsxRuntime.jsx("div", { className: "aui-thread-viewport-spacer min-h-12 grow z-9 bg-white" }), jsxRuntime.jsx(Composer, {})] }) }), jsxRuntime.jsx(ThreadIf.ThreadPrimitiveIf, { empty: true, children: jsxRuntime.jsxs(ThreadViewport.ThreadPrimitiveViewport, { className: "aui-thread-viewport  relative flex flex-1 flex-col overflow-x-auto overflow-y-auto px-4 justify-center gap-[80px] ", children: [welcome ?? jsxRuntime.jsx(ThreadWelcome, {}), jsxRuntime.jsx("div", { className: "flex items-center", children: jsxRuntime.jsx(Composer, {}) })] }) })] }) }) })] }));
-};
-const ThreadScrollToBottom = () => {
-    return (jsxRuntime.jsx(ThreadScrollToBottom$1.ThreadPrimitiveScrollToBottom, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Scroll to bottom", variant: "outline", className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent", children: jsxRuntime.jsx(arrowDown.default, {}) }) }));
+const userMessageComponents = {
+    Text: () => (jsxRuntime.jsxs("p", { style: { whiteSpace: 'pre-line', fontSize: 16 }, children: [jsxRuntime.jsx(react$1.MessagePartPrimitive.Text, {}), jsxRuntime.jsx(react$1.MessagePartPrimitive.InProgress, { children: jsxRuntime.jsx("span", { style: { fontFamily: 'revert' }, children: ' \u25CF' }) })] })),
 };
-const NewThread = () => {
-    const ref = ChatkitContext.useChatkitRef();
-    const handleCreateNewThread = () => {
-        // 新建会话的逻辑
-        const id = `thread-${Date.now()}`;
-        ref.current?.addThread({
-            id,
-            name: "新对话",
-            sending: false,
-            metadata: {},
-            messages: [],
-            createdAt: dayjs_min().unix(),
-        });
-        ref.current?.setCurrentThread(id);
-    };
-    return (jsxRuntime.jsx("div", { className: "absolute -top-12 h-[20px]", children: jsxRuntime.jsxs("button", { onClick: handleCreateNewThread, className: "flex items-center px-[8px] py-[3px] gap-[4px] rounded-lg bg-white border border-[#EAEDF1] text-[#0C0D0E] transition-colors hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none", "aria-label": "\u65B0\u5EFA\u4F1A\u8BDD", children: [jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-[8px] size-[16px]", children: jsxRuntime.jsx(NewSessioin, {}) }), jsxRuntime.jsx("span", { className: "text-sm font-medium leading-[22px] z-10 ", children: "\u65B0\u4F1A\u8BDD" })] }) }));
-};
-const ClearThread = () => {
+const Thread = ({ welcome: welcome$1, recommends }) => {
+    const { currentThread } = useThread();
     const ref = ChatkitContext.useChatkitRef();
-    useThread();
-    const handleCreateNewThread = () => {
-        ref.current?.clearCurrentThread();
-    };
-    return (jsxRuntime.jsx("div", { className: "absolute -top-12 h-[20px]", children: jsxRuntime.jsxs("button", { onClick: handleCreateNewThread, className: "flex items-center px-[8px] py-[3px] gap-[4px] rounded-lg bg-white border border-[#EAEDF1] text-[#0C0D0E] transition-colors hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none", "aria-label": "\u65B0\u5EFA\u4F1A\u8BDD", children: [jsxRuntime.jsx("span", { className: "flex h-5 w-5 items-center justify-center rounded-[8px] size-[16px]", children: jsxRuntime.jsx(NewSessioin, {}) }), jsxRuntime.jsx("span", { className: "text-sm font-medium leading-[22px] z-10 ", children: "\u6E05\u7A7A\u4F1A\u8BDD" })] }) }));
+    const welcomeElement = React.useMemo(() => {
+        if (welcome$1)
+            return welcome$1;
+        if (recommends) {
+            return (jsxRuntime.jsx(welcome, { recommends: recommends, onSelect: (question) => {
+                    ref?.sendMessage({
+                        content: [
+                            {
+                                type: 'text',
+                                text: question,
+                            },
+                        ],
+                    });
+                } }));
+        }
+        return undefined;
+    }, [recommends, welcome$1]);
+    const threadMessageComponents = React.useMemo(() => ({
+        UserMessage,
+        EditComposer,
+        AssistantMessage,
+    }), []);
+    const { showHeader, renderHeader, threadMaxWidth, threadBottom, } = ChatkitContext.useChatkitContext();
+    return (jsxRuntime.jsxs("div", { className: "min-w-full h-full flex flex-col", children: [showHeader
+                && (renderHeader ? (renderHeader({ thread: currentThread })) : (jsxRuntime.jsx(threadHeader, { title: currentThread?.name || 'Thread Title' }))), jsxRuntime.jsx(react.LazyMotion, { features: react.domAnimation, children: jsxRuntime.jsx(react.MotionConfig, { reducedMotion: "user", children: jsxRuntime.jsxs(react$1.ThreadPrimitive.Root, { className: "aui-root aui-thread-root @container flex-1 flex  h-[calc(100%-65px)] flex-col bg-background", style: {
+                            ['--thread-max-width']: '66rem',
+                            background: 'white',
+                        }, children: [jsxRuntime.jsx(react$1.ThreadPrimitive.If, { empty: false, children: jsxRuntime.jsxs(react$1.ThreadPrimitive.Viewport, { className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-auto px-4", children: [jsxRuntime.jsx(react$1.ThreadPrimitive.Messages, { components: threadMessageComponents }), jsxRuntime.jsx("div", { className: "aui-thread-viewport-spacer min-h-12 grow z-9" }), jsxRuntime.jsx(Composer, {})] }) }), jsxRuntime.jsx(react$1.ThreadPrimitive.If, { empty: true, children: jsxRuntime.jsxs(react$1.ThreadPrimitive.Viewport, { className: "aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-auto px-4 justify-center items-center", children: [jsxRuntime.jsx("div", { className: " aui-thread-viewport-spacer min-h-12 grow z-9", style: {
+                                                maxWidth: threadMaxWidth,
+                                                backgroundColor: 'white',
+                                            } }), currentThread?.loading ? (jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-1.5 h-[180px]", children: [jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 bg-gray-500 rounded-full", style: {
+                                                        animation: 'bounce 1s ease-in-out infinite',
+                                                        animationDelay: '0ms',
+                                                    } }), jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 bg-gray-500 rounded-full", style: {
+                                                        animation: 'bounce 1s ease-in-out infinite',
+                                                        animationDelay: '150ms',
+                                                    } }), jsxRuntime.jsx("span", { className: "w-2.5 h-2.5 bg-gray-500 rounded-full", style: {
+                                                        animation: 'bounce 1s ease-in-out infinite',
+                                                        animationDelay: '300ms',
+                                                    } })] })) : (jsxRuntime.jsx("div", { style: { maxWidth: threadMaxWidth }, className: "max-w-[var(--thread-max-width)] w-full h-full", children: welcomeElement ?? jsxRuntime.jsx(ThreadWelcome, {}) })), jsxRuntime.jsx("div", { className: "aui-thread-viewport-spacer  min-h-12 grow z-9", style: { background: 'white' } }), jsxRuntime.jsx(Composer, {})] }) })] }) }) })] }));
 };
+const ThreadScrollToBottom = () => (jsxRuntime.jsx(react$1.ThreadPrimitive.ScrollToBottom, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Scroll to bottom", variant: "outline", className: "aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent", children: jsxRuntime.jsx(lucideReact.ArrowDownIcon, {}) }) }));
 const ThreadWelcome = () => {
-    return (jsxRuntime.jsx("div", { className: "aui-thread-welcome-root mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col", children: jsxRuntime.jsx("div", { className: "aui-thread-welcome-center flex w-full flex-col items-center justify-center", children: jsxRuntime.jsx("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-8 text-[24px] text-center font-medium leading-[100%] text-[#0C0D0E]", children: "\u4F60\u597D" }) }) }));
+    const { t } = I18nContext.useI18n();
+    const { threadMaxWidth } = ChatkitContext.useChatkitContext();
+    return (jsxRuntime.jsx("div", { className: "aui-thread-welcome-root mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col", style: { maxWidth: threadMaxWidth }, children: jsxRuntime.jsx("div", { className: "aui-thread-welcome-center flex w-full flex-col items-center justify-center", children: jsxRuntime.jsx("div", { className: "aui-thread-welcome-message flex size-full flex-col justify-center px-8 text-[24px] text-center font-medium leading-[100%] text-[#0C0D0E]", children: t('thread.greeting') }) }) }));
 };
 const Composer = () => {
-    const { showThreadList, placeholder } = ChatkitContext.useChatkitContext();
-    return (jsxRuntime.jsxs("div", { className: "aui-composer-wrapper sticky bottom-0 mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6", children: [jsxRuntime.jsx(ThreadScrollToBottom, {}), showThreadList ? jsxRuntime.jsx(NewThread, {}) : jsxRuntime.jsx(ClearThread, {}), jsxRuntime.jsxs(ComposerRoot.ComposerPrimitiveRoot, { className: "aui-composer-root group/input-group relative flex w-full flex-col rounded-[8px] border border-input bg-background px-1 pt-2 shadow-xs transition-[color,box-shadow] outline-none has-[textarea:focus-visible]:border-ring has-[textarea:focus-visible]:ring-[3px] has-[textarea:focus-visible]:ring-ring/50 dark:bg-background", children: [jsxRuntime.jsx(attachment.ComposerAttachments, {}), jsxRuntime.jsx(ComposerInput.ComposerPrimitiveInput, { placeholder: placeholder, className: "aui-composer-input mb-1 max-h-32 min-h-16 w-full resize-none bg-transparent px-3.5 pt-1.5 pb-3 text-base outline-none placeholder:text-muted-foreground focus-visible:ring-0", rows: 1, autoFocus: true, "aria-label": "Message input" }), jsxRuntime.jsx(ComposerAction, {})] })] }));
+    const { placeholder, composerTop, controller, threadMaxWidth, threadBottom, } = ChatkitContext.useChatkitContext();
+    const metaData = valtio.useSnapshot(controller?.metaData);
+    const clawStatus = metaData?.clawStatus;
+    const isDisabled = clawStatus?.status === false;
+    const disabledReason = clawStatus?.reason || '';
+    const handleKeyDown = (e) => {
+        if (isDisabled && e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    };
+    // 1. 定义禁用状态和 tooltip 显示状态
+    React.useState(false);
+    return (jsxRuntime.jsxs("div", { style: { maxWidth: threadMaxWidth, background: 'white' }, className: "aui-composer-wrapper sticky bottom-0 mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 overflow-visible bg-background", children: [jsxRuntime.jsx(ThreadScrollToBottom, {}), jsxRuntime.jsx("div", { className: "pt-[8px]", children: composerTop }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: jsxRuntime.jsxs(react$1.ComposerPrimitive.Root, { className: utils.cn('aui-composer-root group/input-group relative flex flex-1 flex-col rounded-[16px] border border-[#EAEDF1] bg-background px-[12px] py-[8px] shadow-sm transition-all min-h-[84px]', isDisabled && 'cursor-not-allowed bg-gray-100'), children: [jsxRuntime.jsx(attachment.ComposerAttachments, {}), jsxRuntime.jsx("div", { className: "flex items-center w-full gap-2 mb-[10px]", children: jsxRuntime.jsx(react$1.ComposerPrimitive.Input, { placeholder: isDisabled ? disabledReason : placeholder, className: "aui-composer-input max-h-[60px] min-h-[60px] flex-1 overflow-y-auto resize-none bg-transparent py-0 text-[14px] leading-[24px] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed", rows: 1, "aria-label": "Message input", disabled: isDisabled, onKeyDown: handleKeyDown }) }), jsxRuntime.jsx(ComposerAction, { disabled: isDisabled, disabledReason: disabledReason })] }) }), threadBottom || jsxRuntime.jsx("div", { className: "pb-4 md:pb-6" })] }));
 };
-const ComposerAction = () => {
+const ComposerAction = ({ disabled, disabledReason, }) => {
     const { currentThread } = useThread();
     const plugins = ChatkitContext.useChatkitPlugins();
-    return (jsxRuntime.jsxs("div", { className: "aui-composer-action-wrapper relative mx-1 mt-2 mb-2 flex items-center justify-between", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: plugins.map((plugin, idx) => (jsxRuntime.jsx("div", { className: "rounded-[8px] border size-8 border-[#0000001A] flex items-center justify-center hover:bg-muted-foreground/15", children: plugin }, idx))) }), jsxRuntime.jsx(ThreadIf.ThreadPrimitiveIf, { running: false, children: jsxRuntime.jsx(ComposerSend.ComposerPrimitiveSend, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Send message", side: "bottom", type: "submit", variant: "default", size: "icon", className: utils.cn("aui-composer-send size-[34px] rounded-full p-1 bg-[#1664FF] text-white", "hover:bg-primary/75 dark:border-muted-foreground/90"), "aria-label": "Send message", children: currentThread?.loading ? (jsxRuntime.jsx(loaderCircle.default, { className: "aui-composer-send-icon size-5 animate-spin" })) : (jsxRuntime.jsx(arrowUp.default, { className: "aui-composer-send-icon size-5" })) }) }) }), jsxRuntime.jsx(ThreadIf.ThreadPrimitiveIf, { running: true, children: jsxRuntime.jsx(ComposerCancel.ComposerPrimitiveCancel, { asChild: true, children: jsxRuntime.jsx(button.Button, { type: "button", variant: "default", size: "icon", className: "aui-composer-cancel size-[34px] rounded-full border border-muted-foreground/60 hover:bg-primary/75 dark:border-muted-foreground/90", "aria-label": "Stop generating", children: jsxRuntime.jsx(square.default, { className: "aui-composer-cancel-icon size-3.5 fill-white dark:fill-black" }) }) }) })] }));
+    const { controller } = ChatkitContext.useChatkitContext();
+    const cancel = ahooks.useMemoizedFn(() => {
+        controller?.abortMessage();
+    });
+    const { t } = I18nContext.useI18n();
+    return (jsxRuntime.jsxs("div", { className: "aui-composer-action-wrapper flex items-center gap-3 justify-between", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: plugins.map((plugin, idx) => (jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: plugin }, idx))) }), jsxRuntime.jsx(react$1.ThreadPrimitive.If, { running: false, children: jsxRuntime.jsx(react$1.ComposerPrimitive.Send, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: disabled ? disabledReason : t('thread.send'), type: "submit", variant: "ghost", size: "icon", 
+                        // disabled={disabled}
+                        className: utils.cn('aui-composer-send size-[28px] rounded-[8px] text-white p-0', disabled
+                            ? 'bg-gray-400 cursor-not-allowed'
+                            : 'bg-[#5252FF] hover:bg-primary/10 hover:text-primary'), "aria-label": "Send message", children: currentThread?.loading ? (jsxRuntime.jsx(lucideReact.LoaderCircle, { className: "aui-composer-send-icon size-[16px] animate-spin" })) : (jsxRuntime.jsx(lucideReact.ArrowUpIcon, { className: "aui-composer-send-icon size-[16px] text-white" })) }) }) }), jsxRuntime.jsx(react$1.ThreadPrimitive.If, { running: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { onClick: cancel, tooltip: "stop", type: "submit", variant: "ghost", size: "icon", className: "aui-composer-send size-[28px]  bg-[#5252FF] rounded-full text-white text-primary hover:bg-primary/10 hover:text-primary p-0", "aria-label": "Send message", children: jsxRuntime.jsx(AbortMessage, { className: "aui-composer-send-icon size-[28px] fill-white" }) }) })] }));
 };
 const MessageError = () => {
-    return (jsxRuntime.jsx(MessageError$1.MessagePrimitiveError, { children: jsxRuntime.jsxs(ErrorRoot.ErrorPrimitiveRoot, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive dark:bg-destructive/5 dark:text-red-200", children: [jsxRuntime.jsx("div", { className: "font-medium text-destructive text-red-500", children: "\u8BF7\u6C42\u51FA\u73B0\u9519\u8BEF\uFF01" }), jsxRuntime.jsx(ErrorMessage.ErrorPrimitiveMessage, { className: "aui-message-error-message line-clamp-2" })] }) }));
+    const { t } = I18nContext.useI18n();
+    return (jsxRuntime.jsx(react$1.MessagePrimitive.Error, { children: jsxRuntime.jsxs(react$1.ErrorPrimitive.Root, { className: "aui-message-error-root mt-2 rounded-md border border-destructive bg-destructive/10 p-3 text-sm text-destructive dark:bg-destructive/5 dark:text-red-200", children: [jsxRuntime.jsx("div", { className: "font-medium text-destructive text-red-500", children: t('thread.requestError') }), jsxRuntime.jsx(react$1.ErrorPrimitive.Message, { className: "aui-message-error-message line-clamp-2" })] }) }));
 };
 const AssistantMessage = () => {
-    return (jsxRuntime.jsx(MessageRoot.MessagePrimitiveRoot, { asChild: true, children: jsxRuntime.jsx("div", { className: "aui-assistant-message-root relative mx-auto w-full max-w-[var(--thread-max-width)] py-4 duration-150 slide-in-from-bottom-1 last:mb-24", "data-role": "assistant", children: jsxRuntime.jsxs("div", { className: "group", children: [jsxRuntime.jsxs("div", { className: "aui-assistant-message-content mx-2 leading-7 break-words text-foreground flex flex-col gap-[12px]", children: [jsxRuntime.jsx(MessageParts.MessagePrimitiveParts, { components: {
-                                    Text: markdownText.MarkdownText,
-                                    tools: { Fallback: toolFallback.ToolFallback },
-                                    File: index$2.File,
-                                    Reasoning: reasoning.Reasoning,
-                                    // ToolGroup,
-                                    ReasoningGroup: reasoning.ReasoningGroup,
-                                } }), jsxRuntime.jsx(MessageError, {})] }), jsxRuntime.jsxs("div", { className: "aui-assistant-message-footer mt-2 ml-2 flex hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: [jsxRuntime.jsx(BranchPicker, {}), jsxRuntime.jsx(AssistantActionBar, {})] })] }) }) }));
+    const { threadMaxWidth } = ChatkitContext.useChatkitContext();
+    return (jsxRuntime.jsx(react$1.MessagePrimitive.Root, { asChild: true, children: jsxRuntime.jsx("div", { style: { maxWidth: threadMaxWidth }, className: "aui-assistant-message-root relative mx-auto w-full max-w-[var(--thread-max-width)] py-4 duration-150 slide-in-from-bottom-1 last:mb-24", "data-role": "assistant", children: jsxRuntime.jsxs("div", { className: "group", children: [jsxRuntime.jsxs("div", { className: "aui-assistant-message-content mx-2 leading-7 break-words text-foreground flex flex-col gap-[12px]", children: [jsxRuntime.jsx(react$1.MessagePrimitive.Parts, { components: messageComponentsWithAvatar.assistantMessageComponentsWithAvatar }), jsxRuntime.jsx(MessageError, {})] }), jsxRuntime.jsxs("div", { className: "aui-assistant-message-footer mt-2 ml-2 flex hover:visible opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: [jsxRuntime.jsx(BranchPicker, {}), jsxRuntime.jsx(AssistantActionBar, {})] })] }) }) }));
 };
 const AssistantActionBar = () => {
-    const [submittedFeedback, setSubmittedFeedback] = React.useState(undefined);
-    return (jsxRuntime.jsxs(ActionBarRoot.ActionBarPrimitiveRoot, { hideWhenRunning: true, autohide: "never", autohideFloat: "single-branch", className: "aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex items-center gap-[8px] text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm", children: [jsxRuntime.jsx("div", { onClick: () => setSubmittedFeedback(submittedFeedback === "positive" ? undefined : "positive"), children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Like", children: jsxRuntime.jsx(ThumbUpIcon, { className: "aui-assistant-action-bar-copy-check-icon size-[16px]", fill: submittedFeedback === "positive" ? "#000" : undefined }) }) }), jsxRuntime.jsx("div", { onClick: () => setSubmittedFeedback(submittedFeedback === "negative" ? undefined : "negative"), children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Dislike", children: jsxRuntime.jsx(ThumbDownIcon, { className: "aui-assistant-action-bar-copy-check-icon size-[16px]", fill: submittedFeedback === "negative" ? "#000" : undefined }) }) }), jsxRuntime.jsx("div", { className: "w-[1px] h-[12px] bg-[#DDE2E9]" }), jsxRuntime.jsx(ActionBarCopy.ActionBarPrimitiveCopy, { asChild: true, children: jsxRuntime.jsxs(tooltipIconButton.TooltipIconButton, { tooltip: "Copy", children: [jsxRuntime.jsx(MessageIf.MessagePrimitiveIf, { copied: true, children: jsxRuntime.jsx(check.default, { className: "aui-assistant-action-bar-copy-check-icon size-[16px]" }) }), jsxRuntime.jsx(MessageIf.MessagePrimitiveIf, { copied: false, children: jsxRuntime.jsx(Copy, { className: "aui-assistant-action-bar-copy-icon size-[16px]" }) })] }) }), jsxRuntime.jsx(ActionBarReload.ActionBarPrimitiveReload, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Refresh", children: jsxRuntime.jsx(RefreshIcon, { className: "aui-assistant-action-bar-refresh-icon size-[16px]" }) }) })] }));
+    React.useState(undefined);
+    const { t } = I18nContext.useI18n();
+    react$1.useAssistantState(({ message }) => {
+        if ((message.role !== 'assistant' || message.status?.type !== 'running')
+            && message.parts.some((c) => c.type === 'text' && c.text.length > 0)) {
+            return message.parts
+                .filter((c) => c.type === 'text')
+                .map((c) => c.text)
+                .join('\n');
+        }
+        return '';
+    });
+    const { authors } = ChatkitContext.useChatkitContext();
+    return (jsxRuntime.jsx(react$1.ActionBarPrimitive.Root, { hideWhenRunning: true, autohide: "never", autohideFloat: "single-branch", className: utils.cn('aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex items-center gap-[8px] text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm', authors.length >= 2 ? 'ml-[50px]' : ''), children: jsxRuntime.jsx(react$1.ActionBarPrimitive.Copy, { asChild: true, children: jsxRuntime.jsxs(tooltipIconButton.TooltipIconButton, { tooltip: t('thread.copy'), children: [jsxRuntime.jsx(react$1.MessagePrimitive.If, { copied: true, children: jsxRuntime.jsx(lucideReact.CheckIcon, { className: "aui-assistant-action-bar-copy-check-icon size-[16px]" }) }), jsxRuntime.jsx(react$1.MessagePrimitive.If, { copied: false, children: jsxRuntime.jsx(Copy, { className: "aui-assistant-action-bar-copy-icon size-[16px]" }) })] }) }) }));
 };
 // const UserActionBar: FC = () => {
 //   return (
@@ -137,13 +149,14 @@ const AssistantActionBar = () => {
 //   );
 // };
 const EditComposer = () => {
-    return (jsxRuntime.jsx("div", { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-2 first:mt-4", children: jsxRuntime.jsxs(ComposerRoot.ComposerPrimitiveRoot, { className: "aui-edit-composer-root ml-auto flex w-full max-w-7/8 flex-col rounded-xl bg-muted", children: [jsxRuntime.jsx(ComposerInput.ComposerPrimitiveInput, { className: "aui-edit-composer-input flex min-h-[60px] w-full resize-none bg-transparent p-4 text-foreground outline-none", autoFocus: true }), jsxRuntime.jsxs("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center justify-center gap-2 self-end", children: [jsxRuntime.jsx(ComposerCancel.ComposerPrimitiveCancel, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "sm", "aria-label": "Cancel edit", children: "Cancel" }) }), jsxRuntime.jsx(ComposerSend.ComposerPrimitiveSend, { asChild: true, children: jsxRuntime.jsx(button.Button, { size: "sm", "aria-label": "Update message", children: "Update" }) })] })] }) }));
-};
-const BranchPicker = ({ className, ...rest }) => {
-    return (jsxRuntime.jsxs(BranchPickerRoot.BranchPickerPrimitiveRoot, { hideWhenSingleBranch: true, className: utils.cn("aui-branch-picker-root mr-2 -ml-2 inline-flex items-center text-xs text-muted-foreground", className), ...rest, children: [jsxRuntime.jsx(BranchPickerPrevious.BranchPickerPrimitivePrevious, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Previous", children: jsxRuntime.jsx(chevronLeft.default, {}) }) }), jsxRuntime.jsxs("span", { className: "aui-branch-picker-state font-medium", children: [jsxRuntime.jsx(BranchPickerNumber.BranchPickerPrimitiveNumber, {}), " / ", jsxRuntime.jsx(BranchPickerCount.BranchPickerPrimitiveCount, {})] }), jsxRuntime.jsx(BranchPickerNext.BranchPickerPrimitiveNext, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Next", children: jsxRuntime.jsx(chevronRight.default, {}) }) })] }));
+    const { t } = I18nContext.useI18n();
+    const { threadMaxWidth } = ChatkitContext.useChatkitContext();
+    return (jsxRuntime.jsx("div", { className: "aui-edit-composer-wrapper mx-auto flex w-full max-w-[var(--thread-max-width)] flex-col gap-4 px-2 first:mt-4", style: { maxWidth: threadMaxWidth }, children: jsxRuntime.jsxs(react$1.ComposerPrimitive.Root, { className: "aui-edit-composer-root ml-auto flex w-full max-w-7/8 flex-col rounded-xl bg-muted", children: [jsxRuntime.jsx(react$1.ComposerPrimitive.Input, { className: "aui-edit-composer-input flex min-h-[60px] w-full resize-none bg-transparent p-4 text-foreground outline-none", autoFocus: true }), jsxRuntime.jsxs("div", { className: "aui-edit-composer-footer mx-3 mb-3 flex items-center justify-center gap-2 self-end", children: [jsxRuntime.jsx(react$1.ComposerPrimitive.Cancel, { asChild: true, children: jsxRuntime.jsx(button.Button, { variant: "ghost", size: "sm", "aria-label": t('thread.cancelEdit'), children: t('warningModal.cancel') }) }), jsxRuntime.jsx(react$1.ComposerPrimitive.Send, { asChild: true, children: jsxRuntime.jsx(button.Button, { size: "sm", "aria-label": "Update message", children: t('thread.update') }) })] })] }) }));
 };
+const BranchPicker = ({ className, ...rest }) => (jsxRuntime.jsxs(react$1.BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: utils.cn('aui-branch-picker-root mr-2 -ml-2 inline-flex items-center text-xs text-muted-foreground', className), ...rest, children: [jsxRuntime.jsx(react$1.BranchPickerPrimitive.Previous, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Previous", children: jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {}) }) }), jsxRuntime.jsxs("span", { className: "aui-branch-picker-state font-medium", children: [jsxRuntime.jsx(react$1.BranchPickerPrimitive.Number, {}), ' ', "/", jsxRuntime.jsx(react$1.BranchPickerPrimitive.Count, {})] }), jsxRuntime.jsx(react$1.BranchPickerPrimitive.Next, { asChild: true, children: jsxRuntime.jsx(tooltipIconButton.TooltipIconButton, { tooltip: "Next", children: jsxRuntime.jsx(lucideReact.ChevronRightIcon, {}) }) })] }));
 const UserMessage = () => {
-    return (jsxRuntime.jsx(MessageRoot.MessagePrimitiveRoot, { asChild: true, children: jsxRuntime.jsxs("div", { className: "aui-user-message-root mx-auto grid w-full max-w-[var(--thread-max-width)] animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 px-2 py-4 duration-150 ease-out fade-in slide-in-from-bottom-1 first:mt-3 last:mb-5 [&:where(>*)]:col-start-2 group", "data-role": "user", children: [jsxRuntime.jsx(attachment.UserMessageAttachments, {}), jsxRuntime.jsx("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: jsxRuntime.jsx("div", { className: "aui-user-message-content bg-muted px-5 py-2.5 break-words text-foreground bg-[#F3F7FF] rounded-[8px]", children: jsxRuntime.jsx(MessageParts.MessagePrimitiveParts, {}) }) }), jsxRuntime.jsx(BranchPicker, { className: "aui-user-branch-picker col-span-full col-start-1 row-start-3 -mr-1 justify-end" })] }) }));
+    const { threadMaxWidth } = ChatkitContext.useChatkitContext();
+    return (jsxRuntime.jsx(react$1.MessagePrimitive.Root, { asChild: true, children: jsxRuntime.jsxs("div", { style: { maxWidth: threadMaxWidth }, className: "aui-user-message-root mx-auto grid w-full max-w-[var(--thread-max-width)] animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 px-2 py-4 duration-150 ease-out fade-in slide-in-from-bottom-1 first:mt-3 last:mb-5 [&:where(>*)]:col-start-2 group", "data-role": "user", children: [jsxRuntime.jsx(attachment.UserMessageAttachments, {}), jsxRuntime.jsx("div", { className: "aui-user-message-content-wrapper relative col-start-2 min-w-0", children: jsxRuntime.jsx("div", { className: "aui-user-message-content bg-muted px-[12px] py-[10px] break-words text-foreground bg-[#EDEFFC] rounded-[8px] max-w-[720px]", children: jsxRuntime.jsx(react$1.MessagePrimitive.Parts, { components: userMessageComponents }) }) })] }) }));
 };
 
 exports.Thread = Thread;