@windrun-huaiin/third-ui 15.1.1 → 16.0.1

package/dist/main/pill-select/x-token-input.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { XIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeRingColor, themeBgColor, themeIconColor, themeBorderColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 
@@ -48,7 +48,7 @@ function XTokenInput({ value, onChange, placeholder, emptyLabel, disabled = fals
                 }, className: cn('w-full min-w-0 rounded-3xl border border-black/10 transition dark:border-white/10', compact ? 'min-h-9 px-3 py-1.5' : 'min-h-11 px-4 py-2.5', focused && themeBorderColor), children: jsxs("div", { className: cn('flex w-full min-w-0 flex-wrap items-center', compact ? 'gap-1.5' : 'gap-2'), children: [tokens.length > 0 ? (jsx("ul", { className: "contents", role: "list", children: tokens.map((token) => (jsx("li", { className: "max-w-full list-none", children: jsxs("span", { className: cn('inline-flex max-w-full items-center rounded-full font-semibold transition', compact ? 'gap-1 px-2.5 py-0.5 text-[11px]' : 'gap-1 px-3 py-1 text-xs', themeBgColor, themeIconColor, disabled && 'opacity-60'), title: token, children: [jsx("span", { className: cn('truncate', maxPillWidthClassName), children: token }), jsx("button", { type: "button", onClick: (event) => {
                                                 event.stopPropagation();
                                                 removeToken(token);
-                                            }, disabled: disabled, "aria-label": `Remove ${token}`, className: cn('inline-flex shrink-0 items-center justify-center rounded-full transition', compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'hover:bg-black/10 dark:hover:bg-white/10', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1', themeRingColor, disabled && 'cursor-not-allowed'), children: jsx(globalLucideIcons.X, { className: cn(compact ? 'h-2 w-2' : 'h-2.5 w-2.5') }) })] }) }, token))) })) : null, jsx("div", { className: cn('min-w-0 overflow-hidden', tokens.length === 0
+                                            }, disabled: disabled, "aria-label": `Remove ${token}`, className: cn('inline-flex shrink-0 items-center justify-center rounded-full transition', compact ? 'h-3.5 w-3.5' : 'h-4 w-4', 'hover:bg-black/10 dark:hover:bg-white/10', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1', themeRingColor, disabled && 'cursor-not-allowed'), children: jsx(XIcon, { className: cn(compact ? 'h-2 w-2' : 'h-2.5 w-2.5') }) })] }) }, token))) })) : null, jsx("div", { className: cn('min-w-0 overflow-hidden', tokens.length === 0
                                 ? 'flex-1 min-w-[160px]'
                                 : draftValue || focused
                                     ? 'flex-1 min-w-[120px]'

package/dist/main/x-button.js

@@ -4,7 +4,7 @@
 var tslib = require('tslib');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var server = require('@windrun-huaiin/base-ui/components/server');
+var icons = require('@windrun-huaiin/base-ui/icons');
 var lib = require('@windrun-huaiin/base-ui/lib');
 var utils = require('@windrun-huaiin/lib/utils');
 
@@ -81,7 +81,7 @@ function XButton(props) {
         const isDisabled = button.disabled || isLoading;
         // loadingText: props.loadingText > button.text > 'Loading...'
         const actualLoadingText = loadingText || ((_b = button.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
-        return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(button.icon), jsxRuntime.jsx("span", { children: button.text })] })) }));
+        return (jsxRuntime.jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: utils.cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.Loader2Icon, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(button.icon), jsxRuntime.jsx("span", { children: button.text })] })) }));
     }
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
@@ -93,7 +93,7 @@ function XButton(props) {
             : variant === 'subtle'
                 ? utils.cn(lib.themeMainBgColor, "border border-neutral-200 dark:border-neutral-800")
                 : "bg-neutral-200 dark:bg-neutral-800", className), children: [jsxRuntime.jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: utils.cn("min-w-0 flex-1", baseButtonClass, splitMainButtonVariantClass, "rounded-l-full rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(server.globalLucideIcons.Loader2, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(mainButton.icon), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className: utils.cn("flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10", splitDropdownVariantClass, dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsxRuntime.jsx(server.globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-[100] border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { onClick: () => {
+                    e.preventDefault(); }, children: isLoading ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(icons.Loader2Icon, { className: loadingIconClass }), jsxRuntime.jsx("span", { children: actualLoadingText })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderIcon(mainButton.icon), jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: mainButton.text })] })) }), jsxRuntime.jsx("button", { type: "button", className: utils.cn("flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10", splitDropdownVariantClass, dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsxRuntime.jsx(icons.ChevronDownIcon, { className: chevronIconClass }) }), menuOpen && (jsxRuntime.jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-[100] border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxRuntime.jsxs("button", { onClick: () => {
                         handleButtonClick(item.onClick);
                         setMenuOpen(false);
                     }, disabled: item.disabled, className: `flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxRuntime.jsxs("span", { className: "flex items-center", children: [item.icon, jsxRuntime.jsx("span", { children: item.text })] }), item.tag && (jsxRuntime.jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));

package/dist/main/x-button.mjs

@@ -2,7 +2,7 @@
 import { __awaiter } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useState, useRef, useEffect } from 'react';
-import { globalLucideIcons } from '@windrun-huaiin/base-ui/components/server';
+import { Loader2Icon, ChevronDownIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeIconColor, themeBgColor, themeBorderColor, themeMainBgColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 
@@ -79,7 +79,7 @@ function XButton(props) {
         const isDisabled = button.disabled || isLoading;
         // loadingText: props.loadingText > button.text > 'Loading...'
         const actualLoadingText = loadingText || ((_b = button.text) === null || _b === void 0 ? void 0 : _b.trim()) || 'Loading...';
-        return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(button.icon), jsx("span", { children: button.text })] })) }));
+        return (jsx("button", { onClick: () => handleButtonClick(button.onClick), disabled: isDisabled, className: cn("w-full sm:w-auto", minWidth, baseButtonClass, singleButtonVariantClass, "rounded-full", isDisabled && disabledClass, className), title: button.text, children: isLoading ? (jsxs(Fragment, { children: [jsx(Loader2Icon, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(button.icon), jsx("span", { children: button.text })] })) }));
     }
     // Split button
     const { mainButton, menuItems, loadingText, menuWidth = 'w-full sm:w-40', className = '', mainButtonClassName = '', dropdownButtonClassName = '' } = props;
@@ -91,7 +91,7 @@ function XButton(props) {
             : variant === 'subtle'
                 ? cn(themeMainBgColor, "border border-neutral-200 dark:border-neutral-800")
                 : "bg-neutral-200 dark:bg-neutral-800", className), children: [jsx("button", { onClick: () => handleButtonClick(mainButton.onClick), disabled: isMainDisabled, className: cn("min-w-0 flex-1", baseButtonClass, splitMainButtonVariantClass, "rounded-l-full rounded-r-none", isMainDisabled && disabledClass, mainButtonClassName), onMouseDown: e => { if (e.button === 2)
-                    e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(globalLucideIcons.Loader2, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(mainButton.icon), jsx("span", { className: "min-w-0 truncate", children: mainButton.text })] })) }), jsx("button", { type: "button", className: cn("flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10", splitDropdownVariantClass, dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsx(globalLucideIcons.ChevronDown, { className: chevronIconClass }) }), menuOpen && (jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-[100] border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxs("button", { onClick: () => {
+                    e.preventDefault(); }, children: isLoading ? (jsxs(Fragment, { children: [jsx(Loader2Icon, { className: loadingIconClass }), jsx("span", { children: actualLoadingText })] })) : (jsxs(Fragment, { children: [renderIcon(mainButton.icon), jsx("span", { className: "min-w-0 truncate", children: mainButton.text })] })) }), jsx("button", { type: "button", className: cn("flex h-full w-9 shrink-0 items-center justify-center px-0 py-1.5 cursor-pointer transition rounded-r-full rounded-l-none border-l sm:w-10", splitDropdownVariantClass, dropdownButtonClassName), onClick: e => { e.stopPropagation(); setMenuOpen(v => !v); }, "aria-label": "More actions", "aria-expanded": menuOpen, children: jsx(ChevronDownIcon, { className: chevronIconClass }) }), menuOpen && (jsx("div", { ref: menuRef, className: `absolute right-0 top-full ${menuWidth} bg-white dark:bg-neutral-800 text-neutral-800 dark:text-white text-sm rounded-xl shadow-lg z-[100] border border-neutral-200 dark:border-neutral-700 overflow-hidden animate-fade-in`, children: menuItems.map((item, index) => (jsxs("button", { onClick: () => {
                         handleButtonClick(item.onClick);
                         setMenuOpen(false);
                     }, disabled: item.disabled, className: `flex items-center w-full px-4 py-3 transition hover:bg-neutral-300 dark:hover:bg-neutral-600 text-left relative ${item.disabled ? disabledClass : ''}`, style: item.splitTopBorder ? { borderTop: '1px solid #AC62FD' } : undefined, children: [jsxs("span", { className: "flex items-center", children: [item.icon, jsx("span", { children: item.text })] }), item.tag && (jsx("span", { className: "absolute right-3 top-1 text-[10px] font-semibold", style: { color: item.tag.color || '#A855F7', pointerEvents: 'none' }, children: item.tag.text }))] }, index))) }))] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@windrun-huaiin/third-ui",
-  "version": "15.1.1",
+  "version": "16.0.1",
   "description": "Third-party integrated UI components for windrun-huaiin projects",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -41,6 +41,11 @@
       "import": "./dist/main/server.mjs",
       "require": "./dist/main/server.js"
     },
+    "./ai": {
+      "types": "./dist/ai/index.d.ts",
+      "import": "./dist/ai/index.mjs",
+      "require": "./dist/ai/index.js"
+    },
     "./fuma/server": {
       "types": "./dist/fuma/server.d.ts",
       "import": "./dist/fuma/server.mjs",
@@ -84,14 +89,22 @@
     "fumadocs-mdx": "13.0.6",
     "fumadocs-typescript": "4.0.13",
     "fumadocs-ui": "16.0.9",
+    "hast-util-to-jsx-runtime": "^2.3.6",
     "katex": "^0.16.33",
     "mermaid": "11.12.1",
     "react-medium-image-zoom": "^5.4.1",
+    "remark": "^15.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "roughjs": "^4.6.6",
     "swiper": "^12.1.2",
     "tslib": "^2.8.1",
+    "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@windrun-huaiin/base-ui": "^15.1.1",
-    "@windrun-huaiin/lib": "^15.1.1"
+    "@windrun-huaiin/base-ui": "^16.0.0",
+    "@windrun-huaiin/lib": "^16.0.0",
+    "@windrun-huaiin/contracts": "^16.0.0"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",

package/src/ai/ai-chat-composer.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useEffect, useRef } from 'react';
+import type { KeyboardEvent } from 'react';
+import type { AIChatComposerProps } from './types';
+
+function resizeTextarea(
+  textarea: HTMLTextAreaElement,
+  minHeight: number,
+  maxHeight: number,
+) {
+  textarea.style.height = 'auto';
+  const nextHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
+  textarea.style.height = `${nextHeight}px`;
+  textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
+}
+
+export function AIChatComposer({
+  value,
+  onChange,
+  onSubmit,
+  onStop,
+  disabled = false,
+  isStreaming = false,
+  placeholder = 'Ask anything...',
+  className,
+  leftSlot,
+  attachments,
+  helper,
+  submitLabel = 'Send',
+  stopLabel = 'Stop',
+  minHeight = 52,
+  maxHeight = 220,
+  submitOnEnter = true,
+  shellClassName,
+  textareaClassName,
+  submitControl,
+  stopControl,
+  textareaRef: externalTextareaRef,
+  secondaryActions,
+  actionLayout = 'inline',
+}: AIChatComposerProps) {
+  const internalTextareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const textareaRef = externalTextareaRef ?? internalTextareaRef;
+
+  useEffect(() => {
+    if (!textareaRef.current) {
+      return;
+    }
+
+    resizeTextarea(textareaRef.current, minHeight, maxHeight);
+  }, [actionLayout, maxHeight, minHeight, value]);
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (!submitOnEnter || event.nativeEvent.isComposing) {
+      return;
+    }
+
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      if (isStreaming && onStop) {
+        onStop();
+        return;
+      }
+
+      if (!disabled && value.trim()) {
+        onSubmit();
+      }
+    }
+  };
+
+  const primaryAction = isStreaming && onStop
+    ? (
+        stopControl ?? (
+          <button
+            type="button"
+            onClick={onStop}
+            className="inline-flex h-10 items-center justify-center rounded-2xl border border-border px-4 text-sm text-foreground transition hover:bg-muted"
+          >
+            {stopLabel}
+          </button>
+        )
+      )
+    : (
+        submitControl ?? (
+          <button
+            type="button"
+            onClick={onSubmit}
+            disabled={disabled || isStreaming || value.trim().length === 0}
+            className="inline-flex h-10 items-center justify-center rounded-2xl bg-foreground px-4 text-sm text-background transition disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {submitLabel}
+          </button>
+        )
+      );
+
+  if (actionLayout === 'stacked') {
+    return (
+      <div className={cn('space-y-3', className)}>
+        {attachments ? <div>{attachments}</div> : null}
+
+        <div
+          className={cn(
+            'rounded-3xl border border-border bg-background px-3 py-3',
+            shellClassName,
+          )}
+        >
+          <div className="flex items-end gap-3">
+            <div className="flex shrink-0 items-center">
+              {leftSlot}
+            </div>
+
+            <div className="min-w-0 flex-1">
+              <textarea
+                ref={textareaRef}
+                rows={1}
+                value={value}
+                onChange={(event) => onChange(event.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={placeholder}
+                disabled={disabled}
+                className={cn(
+                  'block w-full resize-none border-0 bg-transparent px-0 py-2 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 box-border',
+                  textareaClassName,
+                )}
+                style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
+              />
+            </div>
+          </div>
+
+          <div className="mt-3 flex items-center justify-between gap-3 border-t border-border/70 pt-3">
+            <div className="flex min-w-0 flex-1 items-center gap-2">
+              {secondaryActions}
+            </div>
+            <div className="flex shrink-0 items-center gap-2">
+              {primaryAction}
+            </div>
+          </div>
+        </div>
+
+        {helper ? <div>{helper}</div> : null}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {attachments ? <div>{attachments}</div> : null}
+
+      <div
+        className={cn(
+          'flex items-end gap-3 rounded-3xl border border-border bg-background px-3 py-3',
+          shellClassName,
+        )}
+      >
+        <div className="flex shrink-0 items-center">
+          {leftSlot}
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <textarea
+            ref={textareaRef}
+            rows={1}
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className={cn(
+              'block w-full resize-none border-0 bg-transparent px-0 py-2 text-sm leading-6 text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60 box-border',
+              textareaClassName,
+            )}
+            style={{ minHeight: `${minHeight}px`, maxHeight: `${maxHeight}px` }}
+          />
+        </div>
+
+        <div className="flex shrink-0 items-center gap-2">
+          {secondaryActions}
+          {primaryAction}
+        </div>
+      </div>
+
+      {helper ? <div>{helper}</div> : null}
+    </div>
+  );
+}

package/src/ai/ai-markdown.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { cn } from '@windrun-huaiin/lib/utils';
+import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
+import { baseMarkdownComponents } from '../fuma/mdx/markdown-component-map';
+import { useMemo } from 'react';
+import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
+import remarkGfm from 'remark-gfm';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+import type { AIMarkdownComponentMap, AIMarkdownProps } from './types';
+
+const processor = unified()
+  .use(remarkParse)
+  .use(remarkGfm)
+  .use(remarkRehype);
+
+const defaultComponents: AIMarkdownComponentMap = baseMarkdownComponents;
+
+export function AIMarkdown({ content, className, components }: AIMarkdownProps) {
+  const tree = useMemo(() => {
+    return processor.runSync(processor.parse(content));
+  }, [content]);
+
+  const element = useMemo(() => {
+    return toJsxRuntime(tree, {
+      Fragment,
+      jsx,
+      jsxs,
+      components: {
+        ...defaultComponents,
+        ...(components ?? {}),
+      },
+      elementAttributeNameCase: 'html',
+      stylePropertyNameCase: 'css',
+    });
+  }, [components, tree]);
+
+  return (
+    <div className={cn('space-y-4 text-sm text-inherit', className)}>
+      {element}
+    </div>
+  );
+}

package/src/ai/ai-message-actions.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { cn } from '@windrun-huaiin/lib/utils';
+import type { AIMessageActionsProps } from './types';
+
+export function AIMessageActions({ className, children }: AIMessageActionsProps) {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex flex-wrap items-center justify-end gap-2', className)}>
+      {children}
+    </div>
+  );
+}

package/src/ai/ai-message-bubble.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import type { ConversationMessage } from '@windrun-huaiin/contracts/ai';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useEffect, useRef, useState } from 'react';
+import { AIMessageActions } from './ai-message-actions';
+import { AIMessageContent } from './ai-message-content';
+import { AIMessageMeta } from './ai-message-meta';
+import type { AIMessageBubbleProps } from './types';
+
+function getRoleLabel(role: ConversationMessage['role']) {
+  switch (role) {
+    case 'assistant':
+      return 'Assistant';
+    case 'system':
+      return 'System';
+    case 'tool':
+      return 'Tool';
+    default:
+      return 'You';
+  }
+}
+
+export function AIMessageBubble({
+  message,
+  className,
+  cardClassName,
+  contentClassName,
+  footerClassName,
+  maxWidthClassName,
+  showRoleLabel = false,
+  markdownComponents,
+  showFooter = true,
+  renderContent,
+  renderMeta,
+  renderActions,
+}: AIMessageBubbleProps) {
+  const isUser = message.role === 'user';
+  const contentWrapperRef = useRef<HTMLDivElement | null>(null);
+  const [isCompactSingleLine, setIsCompactSingleLine] = useState(false);
+  const content = renderContent
+    ? renderContent(message)
+    : <AIMessageContent message={message} className={contentClassName} markdownComponents={markdownComponents} />;
+  const meta = renderMeta ? renderMeta(message) : <AIMessageMeta message={message} />;
+  const actions = renderActions ? renderActions(message) : null;
+  const hasFooter = Boolean(meta) || Boolean(actions);
+  const isTextOnlyMessage =
+    message.parts.length > 0
+      ? message.parts.every((part) => part.type === 'text')
+      : Boolean(message.errorMessage);
+
+  useEffect(() => {
+    if (!isTextOnlyMessage || !contentWrapperRef.current) {
+      setIsCompactSingleLine(false);
+      return;
+    }
+
+    const element = contentWrapperRef.current;
+
+    const measure = () => {
+      const computedStyle = window.getComputedStyle(element);
+      const lineHeight = Number.parseFloat(computedStyle.lineHeight);
+      if (!Number.isFinite(lineHeight) || lineHeight <= 0) {
+        setIsCompactSingleLine(false);
+        return;
+      }
+
+      const nextIsSingleLine = element.scrollHeight <= lineHeight * 1.75;
+      setIsCompactSingleLine(nextIsSingleLine);
+    };
+
+    measure();
+
+    const observer = new ResizeObserver(() => {
+      measure();
+    });
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [isTextOnlyMessage, message.errorMessage, message.id, message.parts]);
+
+  return (
+    <div
+      className={cn(
+        'flex w-full',
+        isUser ? 'justify-end' : 'justify-start',
+        className,
+      )}
+    >
+      <article
+        className={cn(
+          'min-h-12 min-w-30 max-w-full rounded-3xl border px-4 py-3 sm:min-h-13 sm:min-w-36',
+          isUser ? 'w-fit' : 'w-full',
+          maxWidthClassName ?? 'max-w-[92%] sm:max-w-[82%]',
+          isUser
+            ? 'border-foreground/10 bg-foreground text-background'
+            : 'border-border bg-background text-foreground',
+          cardClassName,
+        )}
+      >
+        {showRoleLabel ? (
+          <div className="mb-2 flex items-center gap-3">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.14em] opacity-60">
+              {getRoleLabel(message.role)}
+            </span>
+          </div>
+        ) : null}
+
+        <div
+          ref={contentWrapperRef}
+          className={cn(
+            'min-w-0',
+            isTextOnlyMessage && isCompactSingleLine && 'flex justify-center',
+          )}
+        >
+          {content}
+        </div>
+
+        {showFooter && hasFooter ? (
+          <div
+            className={cn(
+              'mt-3 flex flex-wrap items-center justify-between gap-3 border-t border-border/70 pt-3',
+              footerClassName,
+            )}
+          >
+            <div className="min-w-0 flex-1">
+              {meta}
+            </div>
+            {actions ? <AIMessageActions>{actions}</AIMessageActions> : null}
+          </div>
+        ) : null}
+      </article>
+    </div>
+  );
+}

package/src/ai/ai-message-content.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import type { MessagePart } from '@windrun-huaiin/contracts/ai';
+import { themeIconColor } from '@windrun-huaiin/base-ui/lib';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { TrophyCard } from '../fuma/mdx/trophy-card';
+import { AIMarkdown } from './ai-markdown';
+import type { AIMessageContentProps } from './types';
+
+function hasRenderablePart(part: MessagePart) {
+  if (part.type === 'text') {
+    return part.text.trim().length > 0;
+  }
+
+  return true;
+}
+
+function getEmptyAssistantFallback(message: AIMessageContentProps['message']) {
+  if (message.status === 'streaming') {
+    return null;
+  }
+
+  if (message.status === 'timeout') {
+    return 'No response received. The request timed out before the model returned any content.';
+  }
+
+  if (message.status === 'request_aborted' || message.status === 'stopped') {
+    return 'Response stopped before any content was returned.';
+  }
+
+  if (message.status === 'failed') {
+    return message.errorMessage || 'The model did not return any visible content.';
+  }
+
+  if (message.errorMessage) {
+    return message.errorMessage;
+  }
+
+  return 'The model returned no visible content.';
+}
+
+function renderPart(
+  part: MessagePart,
+  index: number,
+  markdownComponents?: AIMessageContentProps['markdownComponents'],
+) {
+  if (part.type === 'text') {
+    return (
+      <AIMarkdown
+        key={`text-${index}`}
+        content={part.text}
+        components={markdownComponents}
+      />
+    );
+  }
+
+  if (part.type === 'image') {
+    return (
+      <div
+        key={`image-${index}`}
+        className="rounded-2xl border border-dashed border-border/70 px-3 py-2 text-xs text-muted-foreground"
+      >
+        Image part reserved: {part.alt || part.url}
+      </div>
+    );
+  }
+
+  if (part.type === 'trophy_card') {
+    return (
+      <div
+        key={`trophy-card-${index}`}
+        className="rounded-2xl bg-muted/35 p-1 text-foreground"
+      >
+        <TrophyCard title={part.title}>
+          {part.description ? (
+            <div className="mt-2">
+              <AIMarkdown
+                content={part.description}
+                components={markdownComponents}
+                className="space-y-3 text-sm text-inherit"
+              />
+            </div>
+          ) : null}
+        </TrophyCard>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      key={`file-${index}`}
+      className="rounded-2xl border border-dashed border-border/70 px-3 py-2 text-xs text-muted-foreground"
+    >
+      File part reserved: {part.name || part.url}
+    </div>
+  );
+}
+
+export function AIMessageContent({
+  message,
+  className,
+  markdownComponents,
+}: AIMessageContentProps) {
+  const parts = message.parts.filter(hasRenderablePart);
+
+  if (
+    message.role === 'assistant' &&
+    message.status === 'streaming' &&
+    parts.length === 0
+  ) {
+    return (
+      <div
+        className={cn(
+          'flex items-center gap-2 text-sm text-muted-foreground',
+          themeIconColor,
+          className,
+        )}
+      >
+        <span>AI is thinking</span>
+        <span className="inline-flex items-center gap-1" aria-hidden="true">
+          <span className="size-1.5 rounded-full bg-current animate-pulse [animation-delay:0ms]" />
+          <span className="size-1.5 rounded-full bg-current animate-pulse [animation-delay:180ms]" />
+          <span className="size-1.5 rounded-full bg-current animate-pulse [animation-delay:360ms]" />
+        </span>
+      </div>
+    );
+  }
+
+  if (parts.length === 0) {
+    const fallbackText = getEmptyAssistantFallback(message);
+    if (!fallbackText) {
+      return null;
+    }
+
+    return (
+      <AIMarkdown
+        content={fallbackText}
+        components={markdownComponents}
+        className={cn('space-y-3 text-sm text-inherit', className)}
+      />
+    );
+  }
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      {parts.map((part, index) => renderPart(part, index, markdownComponents))}
+    </div>
+  );
+}