@windrun-huaiin/third-ui 15.1.0 → 16.0.0

package/src/ai/use-ai-conversation.ts

@@ -0,0 +1,422 @@
+'use client';
+
+import {
+  type AIErrorPayload,
+  type AIRuntimeRequest,
+  type AIStreamEvent,
+  type ConversationMessage,
+} from '@windrun-huaiin/contracts/ai';
+import { startTransition, useRef, useState } from 'react';
+import type {
+  AIMessageRuntimeMetadata,
+  AIConversationOptions,
+  AIConversationState,
+  SendMessageInput,
+} from './types';
+
+function createId(prefix: string) {
+  try {
+    return `${prefix}-${crypto.randomUUID()}`;
+  } catch {
+    return `${prefix}-${Date.now()}-${Math.random().toString(16).slice(2)}`;
+  }
+}
+
+function getAssistantMessageText(message: ConversationMessage) {
+  return message.parts
+    .flatMap((part) => (part.type === 'text' ? [part.text] : []))
+    .join('');
+}
+
+function createUserMessage(input: SendMessageInput): ConversationMessage {
+  return {
+    id: createId('user'),
+    role: 'user',
+    parts: [{ type: 'text', text: input.text }],
+    createdAt: Date.now(),
+    metadata: input.metadata,
+  };
+}
+
+function getRuntimeMetadata(message: ConversationMessage): AIMessageRuntimeMetadata {
+  const metadata = message.metadata?.aiRuntime;
+  if (!metadata || typeof metadata !== 'object') {
+    return {};
+  }
+
+  return metadata as AIMessageRuntimeMetadata;
+}
+
+function withRuntimeMetadata(
+  message: ConversationMessage,
+  nextMetadata: AIMessageRuntimeMetadata,
+): ConversationMessage {
+  return {
+    ...message,
+    metadata: {
+      ...(message.metadata ?? {}),
+      aiRuntime: {
+        ...getRuntimeMetadata(message),
+        ...nextMetadata,
+      },
+    },
+  };
+}
+
+function createAssistantPlaceholder(requestStartedAt: number): ConversationMessage {
+  return {
+    id: createId('assistant'),
+    role: 'assistant',
+    parts: [{ type: 'text', text: '' }],
+    status: 'streaming',
+    createdAt: Date.now(),
+    metadata: {
+      aiRuntime: {
+        requestStartedAt,
+      },
+    },
+  };
+}
+
+function defaultTransport(endpoint: string) {
+  return async (input: AIRuntimeRequest, signal: AbortSignal) => {
+    return fetch(endpoint, {
+      method: 'POST',
+      signal,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(input),
+    });
+  };
+}
+
+function updateAssistantText(
+  messages: ConversationMessage[],
+  messageId: string,
+  textDelta: string,
+): ConversationMessage[] {
+  return messages.map((message): ConversationMessage => {
+    if (message.id !== messageId) {
+      return message;
+    }
+
+    const currentText = getAssistantMessageText(message);
+    const runtimeMetadata = getRuntimeMetadata(message);
+    const now = Date.now();
+
+    return withRuntimeMetadata(
+      {
+        ...message,
+        parts: [{ type: 'text', text: currentText + textDelta }],
+        status: 'streaming',
+      },
+      runtimeMetadata.firstTokenAt
+        ? {}
+        : {
+            firstTokenAt: now,
+            firstTokenMs: runtimeMetadata.requestStartedAt
+              ? now - runtimeMetadata.requestStartedAt
+              : undefined,
+          },
+    );
+  });
+}
+
+function updateMessageStarted(
+  messages: ConversationMessage[],
+  placeholderId: string,
+  messageId: string,
+): ConversationMessage[] {
+  return messages.map((message): ConversationMessage => {
+    if (message.id !== placeholderId) {
+      return message;
+    }
+
+    return withRuntimeMetadata(
+      {
+        ...message,
+        id: messageId,
+      },
+      {
+        streamStartedAt: Date.now(),
+      },
+    );
+  });
+}
+
+function updateMessageStatus(
+  messages: ConversationMessage[],
+  messageId: string,
+  status: ConversationMessage['status'],
+): ConversationMessage[] {
+  return messages.map((message): ConversationMessage => {
+    if (message.id !== messageId) {
+      return message;
+    }
+
+    const now = Date.now();
+    const runtimeMetadata = getRuntimeMetadata(message);
+
+    return withRuntimeMetadata(
+      {
+        ...message,
+        status,
+      },
+      {
+        completedAt: now,
+        totalMs: runtimeMetadata.requestStartedAt
+          ? now - runtimeMetadata.requestStartedAt
+          : undefined,
+      },
+    );
+  });
+}
+
+function applyErrorToLatestAssistant(
+  messages: ConversationMessage[],
+  error: AIErrorPayload,
+) {
+  for (let index = messages.length - 1; index >= 0; index -= 1) {
+    const message = messages[index];
+    if (message.role !== 'assistant') {
+      continue;
+    }
+
+    const nextMessages = [...messages];
+    const now = Date.now();
+    const runtimeMetadata = getRuntimeMetadata(message);
+    nextMessages[index] = withRuntimeMetadata(
+      {
+        ...message,
+        status: error.status,
+        failureReason: error.failureReason,
+        errorMessage: error.error,
+        upstreamStatusCode: error.upstreamStatusCode,
+      },
+      {
+        completedAt: now,
+        totalMs: runtimeMetadata.requestStartedAt
+          ? now - runtimeMetadata.requestStartedAt
+          : undefined,
+      },
+    );
+    return nextMessages;
+  }
+
+  return messages;
+}
+
+async function consumeEventStream(
+  response: Response,
+  onEvent: (event: AIStreamEvent) => void,
+) {
+  if (!response.body) {
+    throw new Error('Missing response body');
+  }
+
+  const reader = response.body.getReader();
+  const decoder = new TextDecoder();
+  let buffer = '';
+
+  for (;;) {
+    const chunk = await reader.read();
+    if (chunk.done) {
+      break;
+    }
+
+    buffer += decoder.decode(chunk.value, { stream: true });
+    const frames = buffer.split('\n\n');
+    buffer = frames.pop() ?? '';
+
+    for (const frame of frames) {
+      const line = frame
+        .split('\n')
+        .find((item) => item.startsWith('data: '));
+
+      if (!line) {
+        continue;
+      }
+
+      onEvent(JSON.parse(line.slice(6)) as AIStreamEvent);
+    }
+  }
+}
+
+export function useAIConversation(options: AIConversationOptions) {
+  const transport = options.transport ?? defaultTransport(options.endpoint);
+  const [state, setState] = useState<AIConversationState>({
+    sessionId: options.initialSessionId,
+    messages: options.initialMessages ?? [],
+    isStreaming: false,
+  });
+  const abortRef = useRef<AbortController | null>(null);
+
+  const sendMessage = async (input: SendMessageInput) => {
+    const text = input.text.trim();
+    if (!text || state.isStreaming) {
+      return;
+    }
+
+    const userMessage = createUserMessage(input);
+    const requestStartedAt = Date.now();
+    const assistantMessage = createAssistantPlaceholder(requestStartedAt);
+
+    startTransition(() => {
+      setState((current) => ({
+        ...current,
+        messages: [...current.messages, userMessage, assistantMessage],
+        isStreaming: true,
+        error: undefined,
+      }));
+    });
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    try {
+      const response = await transport(
+        {
+          sessionId: state.sessionId,
+          messages: [...state.messages, userMessage],
+          modelName: options.modelName,
+          metadata: {
+            ...(options.metadata ?? {}),
+            ...(input.metadata ?? {}),
+          },
+        },
+        controller.signal,
+      );
+
+      if (!response.ok) {
+        const payload = (await response.json()) as AIErrorPayload;
+        throw new Error(payload.error || 'AI request failed');
+      }
+
+      await consumeEventStream(response, (event) => {
+        options.onEvent?.(event);
+
+        startTransition(() => {
+          setState((current) => {
+            if (event.type === 'message_started') {
+              return {
+                ...current,
+                messages: updateMessageStarted(current.messages, assistantMessage.id, event.messageId),
+              };
+            }
+
+            if (event.type === 'text_delta') {
+              return {
+                ...current,
+                messages: updateAssistantText(current.messages, event.messageId, event.text),
+              };
+            }
+
+            if (event.type === 'part') {
+              return {
+                ...current,
+                messages: current.messages.map((message): ConversationMessage => {
+                  if (message.id !== event.messageId) {
+                    return message;
+                  }
+
+                  return {
+                    ...message,
+                    parts: [...message.parts, event.part],
+                  };
+                }),
+              };
+            }
+
+            if (event.type === 'message_completed') {
+              return {
+                ...current,
+                isStreaming: false,
+                messages: updateMessageStatus(current.messages, event.messageId, 'completed'),
+              };
+            }
+
+            if (event.type === 'error') {
+              return {
+                ...current,
+                isStreaming: false,
+                error: event.error.error,
+                messages: applyErrorToLatestAssistant(current.messages, event.error),
+              };
+            }
+
+            return current;
+          });
+        });
+      });
+
+      startTransition(() => {
+        setState((current) => ({
+          ...current,
+          isStreaming: false,
+        }));
+      });
+    } catch (error) {
+      const nextError = error instanceof Error ? error : new Error('AI request failed');
+      options.onError?.(nextError);
+
+      startTransition(() => {
+        setState((current) => ({
+          ...current,
+          isStreaming: false,
+          error: nextError.message,
+          messages: applyErrorToLatestAssistant(current.messages, {
+            error: nextError.message,
+            status: controller.signal.aborted ? 'request_aborted' : 'failed',
+            failureReason: 'unknown',
+            upstreamStatusCode: controller.signal.aborted ? 499 : 500,
+          }),
+        }));
+      });
+    } finally {
+      abortRef.current = null;
+    }
+  };
+
+  const stopGeneration = () => {
+    abortRef.current?.abort();
+  };
+
+  const resetConversation = () => {
+    startTransition(() => {
+      setState({
+        sessionId: options.initialSessionId,
+        messages: options.initialMessages ?? [],
+        isStreaming: false,
+      });
+    });
+  };
+
+  const removeMessage = (messageId: string) => {
+    startTransition(() => {
+      setState((current) => ({
+        ...current,
+        messages: current.messages.filter((message) => message.id !== messageId),
+      }));
+    });
+  };
+
+  const loadConversation = (messages: ConversationMessage[], sessionId?: string) => {
+    startTransition(() => {
+      setState({
+        sessionId,
+        messages,
+        isStreaming: false,
+      });
+    });
+  };
+
+  return {
+    ...state,
+    sendMessage,
+    stopGeneration,
+    resetConversation,
+    removeMessage,
+    loadConversation,
+  };
+}

package/src/clerk/clerk-organization-client.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { OrganizationSwitcher } from '@clerk/nextjs';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { D8Icon, ReceiptTextIcon, ShieldUserIcon } from '@windrun-huaiin/base-ui/icons';
 
 interface ClerkOrganizationData {
   homepage: string;
@@ -28,17 +28,17 @@ export function ClerkOrganizationClient({ data }: { data: ClerkOrganizationData
           <OrganizationSwitcher.OrganizationProfilePage
             label={data.homepage}
             url="/"
-            labelIcon={<icons.D8 />}
+            labelIcon={<D8Icon />}
           />
           <OrganizationSwitcher.OrganizationProfilePage 
-            labelIcon={<icons.ReceiptText />}
+            labelIcon={<ReceiptTextIcon />}
             label={data.terms}
             url={`/${data.locale}/legal/terms`}
           >
           </OrganizationSwitcher.OrganizationProfilePage>
 
           <OrganizationSwitcher.OrganizationProfilePage
-            labelIcon={<icons.ShieldUser />}
+            labelIcon={<ShieldUserIcon />}
             label={data.privacy}
             url={`/${data.locale}/legal/privacy`}
           >
@@ -47,4 +47,4 @@ export function ClerkOrganizationClient({ data }: { data: ClerkOrganizationData
       </div>
     </div>
   );
-}
+}

package/src/clerk/clerk-page-generator.tsx

@@ -1,7 +1,7 @@
 /**
  * @license
  * MIT License
- * Copyright (c) 2025 D8ger
+ * Copyright (c) 2026 D8ger
  * 
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/src/clerk/clerk-user-client.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { ClerkLoaded, ClerkLoading, SignInButton, UserButton, useAuth } from "@clerk/nextjs";
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import { ReceiptTextIcon, ShieldUserIcon } from '@windrun-huaiin/base-ui/icons';
 import { themeButtonGradientClass } from '@windrun-huaiin/base-ui/lib';
 import { SignUpButtonWithFingerprint } from './signup-button-with-fingerprint-client';
 
@@ -70,12 +70,12 @@ export function ClerkUserClient({ data }: { data: ClerkUserData }) {
             <UserButton.MenuItems>
               <UserButton.Action label="manageAccount" />
               <UserButton.Link
-                labelIcon={<icons.ReceiptText className="size-4 fill-none stroke-(--clerk-icon-stroke-color)" />}
+                labelIcon={<ReceiptTextIcon className="size-4 fill-none stroke-(--clerk-icon-stroke-color)" />}
                 label={data.terms}
                 href={`/${data.locale}/legal/terms`}>
               </UserButton.Link>
               <UserButton.Link
-                labelIcon={<icons.ShieldUser className="size-4 fill-none stroke-(--clerk-icon-stroke-color)" />}
+                labelIcon={<ShieldUserIcon className="size-4 fill-none stroke-(--clerk-icon-stroke-color)" />}
                 label={data.privacy}
                 href={`/${data.locale}/legal/privacy`}>
               </UserButton.Link>
@@ -86,4 +86,4 @@ export function ClerkUserClient({ data }: { data: ClerkUserData }) {
       </ClerkLoaded>
     </div>
   );
-}
+}

package/src/clerk/fingerprint/fingerprint-provider.tsx

@@ -1,6 +1,18 @@
 'use client';
 
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
+import {
+  BellIcon,
+  CoinsIcon,
+  DatabaseZapIcon,
+  FingerprintIcon,
+  GemIcon,
+  GiftIcon,
+  LightbulbIcon,
+  RefreshCcwIcon,
+  Settings2Icon,
+  ShieldUserIcon,
+  XIcon,
+} from '@windrun-huaiin/base-ui/icons';
 import { themeButtonGradientClass, themeButtonGradientHoverClass, themeIconColor } from '@windrun-huaiin/base-ui/lib';
 import { cn } from '@windrun-huaiin/lib/utils';
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
@@ -125,7 +137,7 @@ export function FingerprintStatus() {
       {
         key: 'paid',
         label: 'Paid',
-        icon: <icons.Settings2 className="size-4 text-green-500 dark:text-green-300" />,
+        icon: <Settings2Icon className="size-4 text-green-500 dark:text-green-300" />,
         balance: xCredit.balancePaid,
         total: xCredit.totalPaidLimit,
         start: xCredit.paidStart,
@@ -134,7 +146,7 @@ export function FingerprintStatus() {
       {
         key: 'oneTimePaid',
         label: 'OneTimePaid',
-        icon: <icons.Coins className="size-4 text-amber-500 dark:text-amber-300" />,
+        icon: <CoinsIcon className="size-4 text-amber-500 dark:text-amber-300" />,
         balance: xCredit.balanceOneTimePaid,
         total: xCredit.totalOneTimePaidLimit,
         start: xCredit.oneTimePaidStart,
@@ -143,7 +155,7 @@ export function FingerprintStatus() {
       {
         key: 'free',
         label: 'Free',
-        icon: <icons.Gift className="size-4 text-purple-500 dark:text-purple-300" />,
+        icon: <GiftIcon className="size-4 text-purple-500 dark:text-purple-300" />,
         balance: xCredit.balanceFree,
         total: xCredit.totalFreeLimit,
         start: xCredit.freeStart,
@@ -314,14 +326,14 @@ export function FingerprintStatus() {
           onClick={handleToggle}
           type="button"
           aria-label="Fingerprint debug panel"
-          className={cn(
-            'fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full',
-            themeButtonGradientClass,
-            themeButtonGradientHoverClass,
-            'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300',
-          )}
-        >
-          <icons.Lightbulb className="size-6 text-white" />
+        className={cn(
+          'fixed left-2 top-2 md:left-2 md:top-3 z-10000 inline-flex size-8 md:size-11 items-center justify-center rounded-full',
+          themeButtonGradientClass,
+          themeButtonGradientHoverClass,
+          'text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300',
+        )}
+      >
+          <LightbulbIcon className="size-6 text-white" />
         </button>
       )}
 
@@ -341,7 +353,7 @@ export function FingerprintStatus() {
             <header className="mb-4">
               <div className="flex items-start justify-between gap-3">
                 <div className={cn("flex items-center gap-2 text-base font-bold tracking-wider", themeIconColor)}>
-                  <icons.ShieldUser className="size-4" />
+                  <ShieldUserIcon className="size-4" />
                   Fingerprint Debug Panel
                 </div>
                 <div className="flex items-center gap-2">
@@ -380,7 +392,7 @@ export function FingerprintStatus() {
                     className="rounded-full p-2 text-slate-500 transition hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10 dark:hover:text-white"
                     onClick={() => setIsOpen(false)}
                   >
-                    <icons.X className="size-4" />
+                    <XIcon className="size-4" />
                   </button>
                 </div>
               </div>
@@ -390,7 +402,7 @@ export function FingerprintStatus() {
               {panelMode === 'info' ? (
                 <>
                   <PanelSection
-                    icon={<icons.Fingerprint className="size-4" />}
+                    icon={<FingerprintIcon className="size-4" />}
                     title="User"
                     rightInfo={<StatusTag value={userStatus} />}
                     items={[
@@ -406,7 +418,7 @@ export function FingerprintStatus() {
 
                   <div className="space-y-2 rounded-xl border border-slate-200/70 bg-white/80 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/50">
                     <PanelHeader
-                      icon={<icons.Gem className="size-4" />}
+                      icon={<GemIcon className="size-4" />}
                       title="Credits Info"
                       rightInfo={<span className={cn("font-semibold", themeIconColor)}>{totalCredits}</span>}
                     />
@@ -439,13 +451,13 @@ export function FingerprintStatus() {
                           );
                         })
                       ) : (
-                        <EmptyPlaceholder label="No Credits Yet" icon={<icons.DatabaseZap className="size-4" />} />
+                        <EmptyPlaceholder label="No Credits Yet" icon={<DatabaseZapIcon className="size-4" />} />
                       )}
                     </div>
                   </div>
 
                   <PanelSection
-                    icon={<icons.Bell className="size-4" />}
+                    icon={<BellIcon className="size-4" />}
                     title="Subscription"
                     rightInfo={<StatusTag value={subStatus} />}
                     items={[
@@ -461,7 +473,7 @@ export function FingerprintStatus() {
               ) : (
                 <div className="space-y-3 rounded-xl border border-slate-200/70 bg-white/85 p-4 shadow-sm dark:border-white/12 dark:bg-slate-900/45">
                   <PanelHeader
-                    icon={<icons.DatabaseZap className="size-4" />}
+                    icon={<DatabaseZapIcon className="size-4" />}
                     title="Concurrent Base Info"
                     rightInfo={<StatusTag value={isRunningTest ? 'pending' : 'idle'} />}
                   />
@@ -484,7 +496,7 @@ export function FingerprintStatus() {
                           aria-label="Generate new test fingerprint"
                           className="inline-flex size-9 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/10 dark:bg-slate-950 dark:text-slate-100 dark:hover:bg-slate-900"
                         >
-                          <icons.RefreshCcw className="size-4" />
+                          <RefreshCcwIcon className="size-4" />
                         </button>
                       </div>
                     </div>
@@ -528,7 +540,7 @@ export function FingerprintStatus() {
               {error && (
                 <div className="flex items-start justify-between gap-3 rounded-xl border border-amber-200 bg-amber-50 p-3 text-xs text-amber-600 shadow-sm dark:border-amber-500/40 dark:bg-amber-500/10 dark:text-amber-200">
                   <div className="flex items-start gap-2">
-                    <icons.X className="mt-0.5 size-4 shrink-0" />
+                    <XIcon className="mt-0.5 size-4 shrink-0" />
                     <span>{error}</span>
                   </div>
                   <button
@@ -537,7 +549,7 @@ export function FingerprintStatus() {
                     onClick={clearError}
                     className="shrink-0 rounded-full p-1 text-amber-500 transition hover:bg-amber-100 hover:text-amber-700 dark:text-amber-200 dark:hover:bg-amber-500/10 dark:hover:text-amber-100"
                   >
-                    <icons.X className="size-4" />
+                    <XIcon className="size-4" />
                   </button>
                 </div>
               )}

package/src/fuma/base/custom-header.tsx

@@ -9,8 +9,8 @@ import {
   useState,
 } from 'react';
 import { cva } from 'class-variance-authority';
+import { ChevronDownIcon, LanguagesIcon } from '@windrun-huaiin/base-ui/icons';
 import Link from 'fumadocs-core/link';
-import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
 import { HomeLayoutProps } from 'fumadocs-ui/layouts/home';
 import {
   BaseLinkItem,
@@ -185,7 +185,7 @@ export function CustomHomeHeader({
         : null,
     i18n: i18n ? (
       <CompactLanguageToggle>
-        <icons.Languages className="size-5" />
+        <LanguagesIcon className="size-5" />
       </CompactLanguageToggle>
     ) : null,
     secondary: desktopSecondaryDisplayItems.length ? (
@@ -237,9 +237,9 @@ export function CustomHomeHeader({
     separator: <div role="separator" className="flex-1" />,
     i18n: i18n ? (
       <CompactLanguageToggle>
-        <icons.Languages className="size-5" />
+        <LanguagesIcon className="size-5" />
         <LanguageToggleText />
-        <icons.ChevronDown className="size-3 text-fd-muted-foreground" />
+        <ChevronDownIcon className="size-3 text-fd-muted-foreground" />
       </CompactLanguageToggle>
     ) : null,
     theme:
@@ -268,7 +268,7 @@ export function CustomHomeHeader({
         )}
         enableHover={nav.enableHoverToOpen}
       >
-        <icons.ChevronDown className="transition-transform duration-300 group-data-[state=open]:rotate-180" />
+        <ChevronDownIcon className="transition-transform duration-300 group-data-[state=open]:rotate-180" />
       </MenuTrigger>
       <MenuContent className="sm:flex-row sm:items-center sm:justify-end">
         {primaryMenuItems.map((item, i) => (