@windrun-huaiin/third-ui 15.1.1 → 16.0.0

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

@@ -0,0 +1,59 @@
+'use client';
+
+import type { ConversationMessage } from '@windrun-huaiin/contracts/ai';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { useEffect, useRef } from 'react';
+import type { AIMessageListProps } from './types';
+import { AIMessageBubble } from './ai-message-bubble';
+
+export function AIMessageList({
+  messages,
+  className,
+  contentClassName,
+  emptyText = 'No messages yet.',
+  emptyState,
+  autoScroll = true,
+  scrollBehavior = 'smooth',
+  renderMessage,
+}: AIMessageListProps) {
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (!autoScroll) {
+      return;
+    }
+
+    bottomRef.current?.scrollIntoView({ behavior: scrollBehavior, block: 'end' });
+  }, [autoScroll, messages, scrollBehavior]);
+
+  const content = messages.length === 0
+    ? (
+        emptyState ?? (
+          <div className="rounded-2xl border border-dashed border-border p-6 text-sm text-muted-foreground">
+            {emptyText}
+          </div>
+        )
+      )
+    : (
+        messages.map((message: ConversationMessage) => (
+          <div key={message.id}>
+            {renderMessage ? renderMessage(message) : <AIMessageBubble message={message} />}
+          </div>
+        ))
+      );
+
+  return (
+    <div className={cn('min-h-0 flex-1 overflow-y-auto', className)}>
+      <div
+        className={cn(
+          'mx-auto flex min-h-full w-full max-w-5xl flex-col gap-5 px-1',
+          messages.length === 0 ? 'justify-center' : 'justify-end',
+          contentClassName,
+        )}
+      >
+        {content}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { cn } from '@windrun-huaiin/lib/utils';
+import { AIStatusIndicator } from './ai-status-indicator';
+import type { AIMessageMetaProps, AIMessageRuntimeMetadata } from './types';
+
+function getRuntimeMetadata(message: AIMessageMetaProps['message']): AIMessageRuntimeMetadata {
+  const metadata = message.metadata?.aiRuntime;
+  if (!metadata || typeof metadata !== 'object') {
+    return {};
+  }
+
+  return metadata as AIMessageRuntimeMetadata;
+}
+
+function formatDuration(durationMs?: number) {
+  if (durationMs === undefined || Number.isNaN(durationMs)) {
+    return null;
+  }
+
+  if (durationMs < 1000) {
+    return `${durationMs}ms`;
+  }
+
+  return `${(durationMs / 1000).toFixed(2)}s`;
+}
+
+function formatTime(createdAt: number) {
+  return new Intl.DateTimeFormat(undefined, {
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(createdAt);
+}
+
+export function AIMessageMeta({
+  message,
+  className,
+  showTime = true,
+  showStatus = true,
+  showRuntime = true,
+  showFailureReason = true,
+}: AIMessageMetaProps) {
+  const runtime = getRuntimeMetadata(message);
+  const firstToken = formatDuration(runtime.firstTokenMs);
+  const total = formatDuration(runtime.totalMs);
+
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2 text-[11px] text-muted-foreground', className)}>
+      {showTime ? <span>{formatTime(message.createdAt)}</span> : null}
+      {showStatus ? <AIStatusIndicator message={message} /> : null}
+      {showRuntime && firstToken ? <span>First Token {firstToken}</span> : null}
+      {showRuntime && total ? <span>Total {total}</span> : null}
+      {showFailureReason && message.failureReason ? <span>Reason {message.failureReason}</span> : null}
+    </div>
+  );
+}

package/src/ai/ai-status-indicator.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { cn } from '@windrun-huaiin/lib/utils';
+import type { AIStatusIndicatorProps } from './types';
+
+function getLabel(status?: string) {
+  switch (status) {
+    case 'streaming':
+      return 'Streaming';
+    case 'completed':
+      return 'Completed';
+    case 'stopped':
+      return 'Stopped';
+    case 'timeout':
+      return 'Timeout';
+    case 'request_aborted':
+      return 'Aborted';
+    case 'failed':
+      return 'Failed';
+    default:
+      return null;
+  }
+}
+
+function getStatusClassName(status?: string) {
+  switch (status) {
+    case 'completed':
+      return 'border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-300';
+    case 'streaming':
+      return 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-300';
+    case 'stopped':
+      return 'border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-900/60 dark:bg-rose-950/40 dark:text-rose-300';
+    case 'timeout':
+      return 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-300';
+    case 'request_aborted':
+      return 'border-orange-200 bg-orange-50 text-orange-700 dark:border-orange-900/60 dark:bg-orange-950/40 dark:text-orange-300';
+    case 'failed':
+      return 'border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-300';
+    default:
+      return 'border-border bg-background text-muted-foreground';
+  }
+}
+
+export function AIStatusIndicator({ message, className }: AIStatusIndicatorProps) {
+  const label = getLabel(message.status);
+  if (!label) {
+    return null;
+  }
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] uppercase tracking-[0.12em]',
+        getStatusClassName(message.status),
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}

package/src/ai/index.ts

@@ -0,0 +1,13 @@
+'use client';
+
+export { getMessageText, getTextParts, type ConversationMessage, type MessagePart } from '@windrun-huaiin/contracts/ai';
+export * from './types';
+export * from './use-ai-conversation';
+export * from './ai-chat-composer';
+export * from './ai-message-list';
+export * from './ai-message-bubble';
+export * from './ai-markdown';
+export * from './ai-message-content';
+export * from './ai-message-meta';
+export * from './ai-message-actions';
+export * from './ai-status-indicator';

package/src/ai/types.ts

@@ -0,0 +1,131 @@
+import type {
+  AIRuntimeRequest,
+  AIStreamEvent,
+  ConversationMessage,
+  MessagePart,
+} from '@windrun-huaiin/contracts/ai';
+import type { ComponentType, ReactNode, RefObject } from 'react';
+
+export type AIConversationTransport = (
+  input: AIRuntimeRequest,
+  signal: AbortSignal,
+) => Promise<Response>;
+
+export type AIConversationState = {
+  sessionId?: string;
+  messages: ConversationMessage[];
+  isStreaming: boolean;
+  error?: string;
+};
+
+export type AIConversationOptions = {
+  endpoint: string;
+  initialSessionId?: string;
+  initialMessages?: ConversationMessage[];
+  modelName?: string;
+  metadata?: Record<string, unknown>;
+  transport?: AIConversationTransport;
+  onEvent?: (event: AIStreamEvent) => void;
+  onError?: (error: Error) => void;
+};
+
+export type SendMessageInput = {
+  text: string;
+  metadata?: Record<string, unknown>;
+};
+
+export type AIChatComposerProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop?: () => void;
+  disabled?: boolean;
+  isStreaming?: boolean;
+  placeholder?: string;
+  className?: string;
+  leftSlot?: ReactNode;
+  attachments?: ReactNode;
+  helper?: ReactNode;
+  submitLabel?: string;
+  stopLabel?: string;
+  minHeight?: number;
+  maxHeight?: number;
+  submitOnEnter?: boolean;
+  shellClassName?: string;
+  textareaClassName?: string;
+  submitControl?: ReactNode;
+  stopControl?: ReactNode;
+  textareaRef?: RefObject<HTMLTextAreaElement | null>;
+  secondaryActions?: ReactNode;
+  actionLayout?: 'inline' | 'stacked';
+};
+
+export type AIMessageBubbleProps = {
+  message: ConversationMessage;
+  className?: string;
+  cardClassName?: string;
+  contentClassName?: string;
+  footerClassName?: string;
+  maxWidthClassName?: string;
+  showRoleLabel?: boolean;
+  markdownComponents?: AIMarkdownComponentMap;
+  showFooter?: boolean;
+  renderContent?: (message: ConversationMessage) => ReactNode;
+  renderMeta?: (message: ConversationMessage) => ReactNode;
+  renderActions?: (message: ConversationMessage) => ReactNode;
+};
+
+export type AIMessageListProps = {
+  messages: ConversationMessage[];
+  className?: string;
+  contentClassName?: string;
+  emptyText?: string;
+  emptyState?: ReactNode;
+  autoScroll?: boolean;
+  scrollBehavior?: ScrollBehavior;
+  renderMessage?: (message: ConversationMessage) => ReactNode;
+};
+
+export type AIStatusIndicatorProps = {
+  message: ConversationMessage;
+  className?: string;
+};
+
+export type AIMessageContentProps = {
+  message: ConversationMessage;
+  className?: string;
+  markdownComponents?: AIMarkdownComponentMap;
+};
+
+export type AIMessageMetaProps = {
+  message: ConversationMessage;
+  className?: string;
+  showTime?: boolean;
+  showStatus?: boolean;
+  showRuntime?: boolean;
+  showFailureReason?: boolean;
+};
+
+export type AIMessageActionsProps = {
+  className?: string;
+  children?: ReactNode;
+};
+
+export type AIMarkdownComponentMap = Record<string, ComponentType<any>>;
+
+export type AIMarkdownProps = {
+  content: string;
+  className?: string;
+  components?: AIMarkdownComponentMap;
+};
+
+export type TextMessagePart = Extract<MessagePart, { type: 'text' }>;
+
+export type AIMessageRuntimeMetadata = {
+  requestStartedAt?: number;
+  streamStartedAt?: number;
+  firstTokenAt?: number;
+  firstTokenMs?: number;
+  completedAt?: number;
+  totalMs?: number;
+};