@tablestore/tablestore-agent-cli 0.1.9 → 0.2.0

package/dist/dashboard-runtime/dashboard/src/components/retrieval/retrieval-rerank-fields.tsx

@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
 import type { RetrievalInput } from "@/schemas/retrieval";
 
 interface RerankFieldsProps {
@@ -106,32 +107,63 @@ function RrfFields({ form }: { form: UseFormReturn<RetrievalInput> }) {
 }
 
 function WeightFields({ form }: { form: UseFormReturn<RetrievalInput> }) {
+  // WEIGHT rerank weights are bounded 0–1 floats — the previous "0 ~ 1"
+  // FormDescription read as a clunky bottom caption. A slider with the
+  // numeric value pinned inline next to the label communicates the
+  // range visually and gives instant tactile feedback, no caption needed.
   return (
-    <RerankPanel cols={2}>
-      <NumField
-        form={form}
-        name="weightDense"
-        label="向量权重"
-        step={0.1}
-        min={0}
-        max={1}
-        placeholder="0.5"
-        description="0 ~ 1"
-      />
-      <NumField
-        form={form}
-        name="weightFullText"
-        label="全文权重"
-        step={0.1}
-        min={0}
-        max={1}
-        placeholder="0.5"
-        description="0 ~ 1"
-      />
+    <RerankPanel cols={1}>
+      <WeightSliderField form={form} name="weightDense" label="向量权重" />
+      <WeightSliderField form={form} name="weightFullText" label="全文权重" />
     </RerankPanel>
   );
 }
 
+function WeightSliderField({
+  form,
+  name,
+  label,
+}: {
+  form: UseFormReturn<RetrievalInput>;
+  name: "weightDense" | "weightFullText";
+  label: string;
+}) {
+  return (
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => {
+        const value =
+          typeof field.value === "number" && Number.isFinite(field.value)
+            ? field.value
+            : 0.5;
+        return (
+          <FormItem>
+            <div className="flex items-center justify-between gap-3">
+              <FormLabel>{label}</FormLabel>
+              <span className="rounded bg-[hsl(var(--secondary))] px-2 py-0.5 text-xs font-medium tabular-nums text-[hsl(var(--foreground))]">
+                {value.toFixed(2)}
+              </span>
+            </div>
+            <FormControl>
+              <Slider
+                min={0}
+                max={1}
+                step={0.05}
+                value={[value]}
+                onValueChange={(values) => field.onChange(values[0] ?? 0)}
+                onBlur={field.onBlur}
+                aria-label={label}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        );
+      }}
+    />
+  );
+}
+
 /** Providers currently wired up on the server side. Kept inline because the
  *  list is short and the settings page uses the same hard-coded catalogue. */
 const PROVIDER_OPTIONS: { value: string; label: string }[] = [
@@ -185,10 +217,15 @@ function RerankPanel({
   cols = 3,
   children,
 }: {
-  cols?: 2 | 3;
+  cols?: 1 | 2 | 3;
   children: React.ReactNode;
 }) {
-  const colClass = cols === 2 ? "sm:grid-cols-2" : "sm:grid-cols-3";
+  const colClass =
+    cols === 1
+      ? "grid-cols-1"
+      : cols === 2
+        ? "sm:grid-cols-2"
+        : "sm:grid-cols-3";
   return (
     <div className={"grid gap-3 px-0.5 pt-1 " + colClass}>{children}</div>
   );

package/dist/dashboard-runtime/dashboard/src/components/shared/empty-state.tsx

@@ -25,7 +25,7 @@ export function EmptyState({
           <Icon className="text-primary" size={36} strokeWidth={1.75} />
         </div>
       )}
-      <h3 className="mb-2 font-display text-lg font-semibold text-foreground">
+      <h3 className="mb-2 text-base font-semibold text-foreground">
         {title}
       </h3>
       <p className="mb-6 max-w-sm text-sm text-muted-foreground">

package/dist/dashboard-runtime/dashboard/src/components/shared/error-state.tsx

@@ -31,7 +31,7 @@ export function ErrorState({ error, onRetry }: ErrorStateProps) {
           strokeWidth={1.75}
         />
       </div>
-      <h3 className="mb-2 font-display text-lg font-semibold text-foreground">
+      <h3 className="mb-2 text-base font-semibold text-foreground">
         Failed to load data
       </h3>
       <p className="mb-1 max-w-md text-sm text-muted-foreground">

package/dist/dashboard-runtime/dashboard/src/components/shared/llm-model-selector.tsx

@@ -1,11 +1,23 @@
 "use client";
 
-import { useEffect, useMemo } from "react";
-import { Loader2, RefreshCw } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Check, ChevronsUpDown, Loader2, Plus, RefreshCw } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
 import { Label } from "@/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
 import {
   Select,
   SelectContent,
@@ -15,18 +27,15 @@ import {
 } from "@/components/ui/select";
 import { useLLMProviders } from "@/hooks/use-llm-providers";
 import { useLLMProviderModels } from "@/hooks/use-llm-provider-models";
+import { cn } from "@/lib/utils";
 
 interface LLMModelSelectorProps {
   providerId: string;
   model: string;
   onProviderChange: (providerId: string, defaultModel?: string) => void;
   onModelChange: (model: string) => void;
-  /**
-   * Show a free-text input next to the model dropdown so users can type any
-   * model id (useful when the provider's model list isn't exhaustive).
-   * Defaults to false; the chat config drawer keeps the dropdown only,
-   * while the QA tester opts in.
-   */
+  /** @deprecated Free-text typing is now part of the unified combobox in
+   *  every surface; this flag is ignored. Kept for callsite compatibility. */
   allowFreeText?: boolean;
   /** Auto-select the first provider on mount when no providerId is set. */
   autoSelectFirst?: boolean;
@@ -37,17 +46,19 @@ interface LLMModelSelectorProps {
 }
 
 /**
- * Reusable Provider + Model selector. Both QA test page and chat config
- * drawer mounted nearly identical inline copies of this widget; centralising
- * the data fetch + auto-select + refresh-list affordance keeps behaviour
- * uniform across surfaces.
+ * Reusable Provider + Model selector. The provider stays a plain Select
+ * (the list is small and authoritative), but the model widget is a
+ * typeable combobox: it filters known model ids as the user types and
+ * always offers a `使用 "<typed>"` row so callers can submit a model
+ * the upstream `/models` endpoint did not return — useful when a
+ * provider exposes a partial list, or when the user wants to test a
+ * preview / private model id.
  */
 export function LLMModelSelector({
   providerId,
   model,
   onProviderChange,
   onModelChange,
-  allowFreeText = false,
   autoSelectFirst = false,
   providerLabel = "Provider",
   modelLabel = "Model",
@@ -101,7 +112,7 @@ export function LLMModelSelector({
                 providersLoading
                   ? "加载中..."
                   : providers.length === 0
-                    ? "请先在「大模型」中创建配置"
+                    ? "请先在「模型提供商」中创建配置"
                     : "选择 Provider"
               }
             />
@@ -135,62 +146,141 @@ export function LLMModelSelector({
             刷新列表
           </Button>
         </div>
-        {allowFreeText ? (
-          <div className="flex gap-2">
-            <Select
-              value={modelOptions.includes(model) ? model : ""}
-              onValueChange={onModelChange}
-              disabled={!providerId}
-            >
-              <SelectTrigger className="flex-1">
-                <SelectValue placeholder="选择或输入模型名" />
-              </SelectTrigger>
-              <SelectContent>
-                {modelOptions.length === 0 ? (
-                  <div className="px-3 py-2 text-xs text-muted-foreground">
-                    点击「刷新列表」拉取可用模型
-                  </div>
-                ) : (
-                  modelOptions.map((id) => (
-                    <SelectItem key={id} value={id}>
-                      {id}
-                    </SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
-            <Input
-              placeholder="或手动输入"
-              value={model}
-              onChange={(e) => onModelChange(e.target.value)}
-              className="flex-1"
-            />
-          </div>
-        ) : (
-          <Select
-            value={model}
-            onValueChange={onModelChange}
-            disabled={!providerId}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder="选择模型" />
-            </SelectTrigger>
-            <SelectContent>
-              {modelOptions.length === 0 ? (
-                <SelectItem value="__empty" disabled>
-                  无可用模型
-                </SelectItem>
-              ) : (
-                modelOptions.map((id) => (
-                  <SelectItem key={id} value={id}>
-                    {id}
-                  </SelectItem>
-                ))
-              )}
-            </SelectContent>
-          </Select>
-        )}
+        <LLMModelCombobox
+          value={model}
+          options={modelOptions}
+          onChange={onModelChange}
+          disabled={!providerId}
+          fetching={modelsFetching}
+        />
       </div>
     </div>
   );
 }
+
+interface LLMModelComboboxProps {
+  value: string;
+  options: string[];
+  onChange: (model: string) => void;
+  disabled?: boolean;
+  fetching?: boolean;
+}
+
+/**
+ * Typeable model picker with custom-value escape hatch. Built on
+ * Popover + Command (cmdk) so the input filters the known list as the
+ * user types; if no exact match exists, an "use <typed>" row appears at
+ * the bottom of the list, letting the user commit a model id the
+ * upstream `/models` endpoint never returned.
+ */
+function LLMModelCombobox({
+  value,
+  options,
+  onChange,
+  disabled,
+  fetching,
+}: LLMModelComboboxProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  // We do our own filtering so we can show a "use custom" row even when
+  // the typed value doesn't match any existing option.
+  const trimmed = query.trim();
+  const filtered = useMemo(() => {
+    if (!trimmed) return options;
+    const lower = trimmed.toLowerCase();
+    return options.filter((opt) => opt.toLowerCase().includes(lower));
+  }, [options, trimmed]);
+  const hasExactMatch = options.some(
+    (opt) => opt.toLowerCase() === trimmed.toLowerCase(),
+  );
+  const showCustom = trimmed.length > 0 && !hasExactMatch;
+
+  const commit = (next: string) => {
+    onChange(next);
+    setQuery("");
+    setOpen(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className="w-full justify-between font-normal"
+        >
+          <span
+            className={cn(
+              "truncate text-left",
+              !value && "text-[hsl(var(--subtle))]",
+            )}
+          >
+            {value || "选择或输入模型名"}
+          </span>
+          <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        // cmdk's Command primitive sizes to its content, so widen the
+        // popover to match the trigger width for visual continuity.
+        className="w-[var(--radix-popover-trigger-width)] p-0"
+      >
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder="搜索或输入模型名"
+            value={query}
+            onValueChange={setQuery}
+          />
+          <CommandList>
+            {filtered.length === 0 && !showCustom ? (
+              <CommandEmpty>
+                {fetching
+                  ? "正在拉取模型列表..."
+                  : options.length === 0
+                    ? "点击「刷新列表」拉取可用模型"
+                    : "无匹配结果"}
+              </CommandEmpty>
+            ) : null}
+            {filtered.length > 0 && (
+              <CommandGroup heading={showCustom ? "可选模型" : undefined}>
+                {filtered.map((id) => (
+                  <CommandItem
+                    key={id}
+                    value={id}
+                    onSelect={() => commit(id)}
+                  >
+                    <Check
+                      className={cn(
+                        "h-4 w-4",
+                        value === id ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    <span className="truncate">{id}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            )}
+            {showCustom && (
+              <CommandGroup heading="使用自定义">
+                <CommandItem
+                  value={`__custom__${trimmed}`}
+                  onSelect={() => commit(trimmed)}
+                >
+                  <Plus className="h-4 w-4 text-[hsl(var(--primary))]" />
+                  <span className="truncate">
+                    使用 &quot;{trimmed}&quot;
+                  </span>
+                </CommandItem>
+              </CommandGroup>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/dist/dashboard-runtime/dashboard/src/components/shared/relative-time.tsx

@@ -1,10 +1,16 @@
-
 "use client";
 
 import { useSyncExternalStore } from "react";
 import { formatDistanceToNow, format } from "date-fns";
 import { zhCN } from "date-fns/locale";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
 // Shared singleton timer — all RelativeTime instances share one tick
 let tick = 0;
 const listeners: Set<() => void> = new Set();
@@ -39,21 +45,39 @@ interface RelativeTimeProps {
   timestamp: number;
 }
 
+/**
+ * Shows a relative-time label (e.g. "2 小时前") with a styled tooltip
+ * exposing the absolute local-timezone timestamp on hover. Replaces
+ * the previous native `title` attribute, which had a 1.5 s delay and
+ * unstyled OS tooltip; the shadcn Tooltip surfaces instantly with the
+ * dashboard's own typography + shadow tokens.
+ */
 export function RelativeTime({ timestamp }: RelativeTimeProps) {
   useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
-  const relativeText = formatDistanceToNow(new Date(timestamp), {
+  const date = new Date(timestamp);
+  const relativeText = formatDistanceToNow(date, {
     addSuffix: true,
     locale: zhCN,
   });
 
-  const fullDate = format(new Date(timestamp), "yyyy-MM-dd HH:mm:ss", {
+  // `format` from date-fns uses the runtime's local timezone implicitly;
+  // showing the timezone offset tag (e.g. UTC+8) makes that explicit so
+  // users in different regions can interpret the value unambiguously.
+  const localText = format(date, "yyyy-MM-dd HH:mm:ss (OOOO)", {
     locale: zhCN,
   });
 
   return (
-    <span title={fullDate} className="cursor-default text-sm text-muted-foreground">
-      {relativeText}
-    </span>
+    <TooltipProvider delayDuration={150}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span className="cursor-default text-sm text-muted-foreground">
+            {relativeText}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="top">{localText}</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

package/dist/dashboard-runtime/dashboard/src/components/ui/badge.tsx

@@ -4,17 +4,28 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[hsl(var(--primary)/0.3)] focus:ring-offset-1",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+          "border-transparent bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] hover:opacity-90",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          "border-transparent bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] hover:opacity-80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
+          "border-transparent bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] hover:opacity-90",
+        outline:
+          "border-[hsl(var(--border))] text-[hsl(var(--foreground))] bg-[hsl(var(--card))]",
+        primary:
+          "border-transparent bg-[hsl(var(--primary-soft))] text-[hsl(var(--primary))]",
+        success:
+          "border-transparent bg-[hsl(var(--success-soft))] text-[hsl(var(--success))]",
+        warning:
+          "border-transparent bg-[hsl(var(--warning-soft))] text-[hsl(var(--warning))]",
+        danger:
+          "border-transparent bg-[hsl(var(--danger-soft))] text-[hsl(var(--danger))]",
+        purple:
+          "border-transparent bg-[hsl(var(--purple-soft))] text-[hsl(var(--purple))]",
       },
     },
     defaultVariants: {

package/dist/dashboard-runtime/dashboard/src/components/ui/button.tsx

@@ -5,26 +5,27 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[hsl(var(--primary)/0.3)] focus-visible:ring-offset-1 focus-visible:ring-offset-[hsl(var(--background))] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow hover:opacity-90",
+          "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] shadow-sm hover:opacity-90",
         destructive:
           "bg-[hsl(var(--destructive))] text-[hsl(var(--destructive-foreground))] shadow-sm hover:opacity-90",
         outline:
-          "border border-[hsl(var(--input))] bg-[hsl(var(--background))] shadow-sm hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+          "border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--foreground))] shadow-sm hover:border-[hsl(var(--primary))] hover:text-[hsl(var(--primary))]",
         secondary:
           "bg-[hsl(var(--secondary))] text-[hsl(var(--secondary-foreground))] shadow-sm hover:opacity-80",
-        ghost: "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
+        ghost:
+          "hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--accent-foreground))]",
         link: "text-[hsl(var(--primary))] underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "h-8 px-3 py-1",
+        sm: "h-7 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-4",
+        icon: "h-8 w-8",
       },
     },
     defaultVariants: {

package/dist/dashboard-runtime/dashboard/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow-sm",
       className
     )}
     {...props}
@@ -23,7 +23,10 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn(
+      "flex flex-col space-y-1 px-5 pt-5 pb-3 border-b border-[hsl(var(--border-light))]",
+      className,
+    )}
     {...props}
   />
 ))
@@ -35,7 +38,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
+    className={cn("text-base font-semibold leading-tight", className)}
     {...props}
   />
 ))
@@ -47,7 +50,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-[hsl(var(--muted-foreground))]", className)}
     {...props}
   />
 ))
@@ -57,7 +60,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("px-5 py-4", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -67,7 +70,10 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn(
+      "flex items-center px-5 py-3 border-t border-[hsl(var(--border-light))]",
+      className,
+    )}
     {...props}
   />
 ))
@@ -84,9 +90,9 @@ const CardInteractive = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))] shadow-sm",
       "transition-[transform,box-shadow,border-color] duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)]",
-      "hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md",
+      "hover:border-[hsl(var(--primary))] hover:shadow-primary-soft",
       className,
     )}
     {...props}

package/dist/dashboard-runtime/dashboard/src/components/ui/chat-bubble.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+type ChatRole = "user" | "assistant"
+
+interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  role: ChatRole
+  avatar?: React.ReactNode
+}
+
+export const ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageProps>(
+  ({ className, role, avatar, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "mb-4 flex items-start gap-2.5",
+        role === "user" && "flex-row-reverse",
+        className,
+      )}
+      {...props}
+    >
+      {avatar ? (
+        <div
+          className={cn(
+            "flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm",
+            role === "user"
+              ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+              : "bg-[hsl(var(--border-light))] text-[hsl(var(--muted-foreground))]",
+          )}
+        >
+          {avatar}
+        </div>
+      ) : null}
+      <div className="flex max-w-[75%] flex-col gap-1">{children}</div>
+    </div>
+  ),
+)
+ChatMessage.displayName = "ChatMessage"
+
+interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+  role: ChatRole
+}
+
+export const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
+  ({ className, role, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "rounded-xl px-4 py-3 text-sm leading-6",
+        role === "user"
+          ? "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] rounded-tr-sm"
+          : "rounded-tl-sm border border-[hsl(var(--border))] bg-[hsl(var(--background))] text-[hsl(var(--foreground))] hover:border-[hsl(var(--primary))]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+ChatBubble.displayName = "ChatBubble"