@docyrus/ui-pro-ai-assistant 0.0.1

package/src/views/message-list.tsx

@@ -0,0 +1,370 @@
+'use client';
+
+import {
+  memo, useCallback, useMemo, useState
+} from 'react';
+
+import {
+  AIConversationContent as ChatContainerContent,
+  AIConversation as ChatContainerRoot,
+  AIConversationScrollButton as ChatContainerScrollAnchor,
+  Message,
+  AIMessageAvatar as MessageAvatar,
+  MessageAction,
+  MessageActions,
+  MessageContent,
+  MessageResponse,
+  Tool,
+  ToolContent,
+  ToolHeader,
+  ToolInput,
+  ToolOutput
+} from '@docyrus/ui-pro-shared/ai';
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger
+} from '@docyrus/ui-pro-shared/ai-elements/reasoning';
+import { Spinner } from '@docyrus/ui-pro-shared/components/spinner';
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+import { Check, Copy } from 'lucide-react';
+
+import { useAssistantTranslation } from '../i18n';
+import { type ToolActionEvent } from '../types';
+
+import { AssistantAnimations } from '../components/assistant-animations';
+import { GenerativeUITool } from '../components/generative-tool';
+import {
+  GenerativeUIObject,
+  GENERATIVE_UI_PART_TYPES
+} from '../components/generative-ui-object';
+import { type CanvasViewOptions } from './chat-panel';
+
+interface MessageListProps {
+  messages: any[];
+  isLoading: boolean;
+  logo?: string;
+  userPhoto?: string;
+  userDisplayName?: string;
+  description?: string;
+  title?: string;
+  welcomeMessage?: string;
+  isLoadingAgent?: boolean;
+  className?: string;
+  agents?: any[];
+  onToolAction?: (event: ToolActionEvent) => void;
+  openCanvasView?: (options: CanvasViewOptions) => void;
+  onForwardToAgent?: (options: { agentId: string; prompt?: string }) => void;
+  onUseWorkResult?: (data: {
+    workId?: string;
+    workVersionId?: string;
+    workType?: string;
+    workDataSourceId?: string;
+    data?: any;
+    state?: string;
+  }) => void;
+}
+
+const isToolPart = (part: any) => part.type?.startsWith('tool-') || part.type === 'dynamic-tool';
+
+// Kept outside to avoid recreation on every render
+const DISPLAY_ONLY_TOOLS = new Set([
+  'generateChart',
+  'showAdvancedDataTable',
+  'showCreateRecordForm',
+  'showUpdateRecordForm',
+  'showRecordDetailsForm',
+  'previewMermaidDiagram',
+  'generateImage',
+  'saveTextWork',
+  'showWorkCanvas',
+  'searchWeb',
+  'web_search',
+  'google_search',
+  'browser_search',
+  'str_replace_based_edit_tool',
+  'extractFromWeb',
+  'deepResearch',
+  'runSpreadsheetCommand',
+  'forwardToAgentById',
+  'showPeopleCards',
+  'showImage',
+  'searchDocuments',
+  'createNewWorkVersion',
+  'showGeneratedContentOptions',
+  'createAgentTask'
+]);
+
+const INTERACTIVE_GENERATIVE_TOOLS = new Set(['requestApproval', 'previewCode', 'requestUserInput']);
+
+function CopyButton({ text }: { text: string }) {
+  const { t } = useAssistantTranslation();
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [text]);
+
+  return (
+    <MessageAction
+      tooltip={copied ? t('common.copied') : t('common.copy')}
+      onClick={handleCopy}
+      className="h-7 w-7 text-muted-foreground hover:text-foreground">
+      {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
+    </MessageAction>
+  );
+}
+
+interface MessageItemProps {
+  message: any;
+  isStreaming: boolean;
+  logo?: string;
+  userPhoto?: string;
+  userDisplayName?: string;
+  agents?: any[];
+  onToolAction?: (event: ToolActionEvent) => void;
+  openCanvasView?: (options: CanvasViewOptions) => void;
+  onForwardToAgent?: (options: { agentId: string; prompt?: string }) => void;
+  onUseWorkResult?: MessageListProps['onUseWorkResult'];
+}
+
+const MessageItem = memo(({
+  message,
+  isStreaming,
+  logo,
+  userPhoto,
+  userDisplayName = 'User',
+  agents = [],
+  onToolAction,
+  openCanvasView,
+  onForwardToAgent,
+  onUseWorkResult
+}: MessageItemProps) => {
+  const isAssistantMessage = message.role === 'assistant';
+
+  const textContent = useMemo(() => {
+    return (message.parts || [])
+      .filter((p: any) => p.type === 'text')
+      .map((p: any) => p.text || '')
+      .join('\n')
+      .trim();
+  }, [message.parts]);
+
+  const renderToolPart = (part: any, messageId: string, idx: number) => {
+    const toolName
+      = part.type === 'dynamic-tool' ? part.toolName : part.type?.startsWith('tool-') ? part.type.replace(/^tool-/, '') : part.toolName || 'Unknown Tool';
+
+    const isSubagentTool = toolName.startsWith('call') && toolName.endsWith('Agent');
+    const isGenerativeTool
+      = DISPLAY_ONLY_TOOLS.has(toolName)
+        || (INTERACTIVE_GENERATIVE_TOOLS.has(toolName) && !!onToolAction)
+        || (isSubagentTool && (part.state === 'input-available' || part.state === 'input-streaming' || part.state === 'output-available'));
+
+    if (isGenerativeTool) {
+      return (
+        <GenerativeUITool
+          key={`${messageId}-gentool-${idx}`}
+          part={{
+            state: part.state || 'input-available',
+            input: part.args || part.input,
+            output: part.output,
+            errorText: part.errorText,
+            toolCallId: part.toolCallId || `${messageId}-${idx}`
+          }}
+          toolName={toolName}
+          onToolAction={onToolAction ?? (() => {})}
+          openCanvasView={openCanvasView}
+          onForwardToAgent={onForwardToAgent} />
+      );
+    }
+
+    const args = typeof part.args === 'string' ? JSON.parse(part.args) : part.args || {};
+    const output = part.output && typeof part.output === 'object' ? part.output : null;
+
+    return (
+      <Tool key={`${messageId}-tool-${idx}`} defaultOpen={false} className="my-2">
+        <ToolHeader
+          type={part.type === 'dynamic-tool' ? 'dynamic-tool' : (part.type || `tool-${toolName}`)}
+          state={part.state || 'output-available'}
+          title={output?.text || toolName}
+          iconName={output?.icon}
+          toolName={part.type === 'dynamic-tool' ? toolName : undefined} />
+        <ToolContent>
+          {Object.keys(args).length > 0 && <ToolInput input={args} />}
+          <ToolOutput output={part.output || null} errorText={part.errorText} />
+        </ToolContent>
+      </Tool>
+    );
+  };
+
+  const renderMessageContent = () => {
+    const parts = message.parts || [];
+    const hasParts = Array.isArray(parts) && parts.length > 0;
+
+    if (!hasParts) return message.content || '';
+
+    const hasStepStart = parts.some((p: any) => p.type === 'step-start');
+    const hasTextContent = parts.some((p: any) => p.type === 'text' && p.text?.trim());
+    const hasToolContent = parts.some((p: any) => isToolPart(p));
+    const isThinking = isStreaming && hasStepStart && !hasTextContent && !hasToolContent;
+
+    if (isThinking) {
+      return (
+        <Reasoning key={`${message.id}-thinking`} isStreaming defaultOpen className="mb-0 mt-3.5">
+          <ReasoningTrigger />
+        </Reasoning>
+      );
+    }
+
+    return parts.map((part: any, idx: number) => {
+      if (part.type === 'step-start') return null;
+
+      if (part.type === 'reasoning') {
+        const reasoningText = part.reasoning || part.text || '';
+
+        if (!reasoningText) return null;
+
+        return (
+          <Reasoning key={`${message.id}-reasoning-${idx}`} isStreaming={isStreaming} defaultOpen>
+            <ReasoningTrigger />
+            <ReasoningContent>{reasoningText}</ReasoningContent>
+          </Reasoning>
+        );
+      }
+
+      if (part.type === 'text') {
+        const content = part.text || part.content || '';
+
+        if (!content) return null;
+
+        return <MessageResponse key={`${message.id}-txt-${idx}`} mode={isStreaming ? 'streaming' : 'static'}>{content}</MessageResponse>;
+      }
+
+      if (isToolPart(part)) return renderToolPart(part, message.id, idx);
+
+      if (GENERATIVE_UI_PART_TYPES.has(part.type)) {
+        return (
+          <GenerativeUIObject
+            key={`${message.id}-genui-${idx}`}
+            part={part}
+            agents={agents}
+            isStreaming={isStreaming}
+            openCanvasView={openCanvasView as any}
+            onUseWorkResult={onUseWorkResult} />
+        );
+      }
+
+      return null;
+    });
+  };
+
+  return (
+    <Message key={message.id} from={message.role}>
+      <div className={cn(
+        'flex items-start gap-3',
+        message.role === 'user' && 'flex-row-reverse'
+      )}>
+        {isStreaming && isAssistantMessage ? (
+          <AssistantAnimations animationType="working" className="w-12 h-12 shrink-0" />
+        ) : (
+          <MessageAvatar
+            src={message.role === 'user' ? (userPhoto || '') : (logo || '')}
+            name={message.role === 'user' ? userDisplayName : 'Assistant'}
+            isStreaming={isStreaming}
+            className="w-12 h-12" />
+        )}
+        <div className="flex flex-col min-w-0 max-w-full">
+          <MessageContent className="group-[.is-user]:p-2 group-[.is-user]:mt-0.5">
+            {renderMessageContent()}
+          </MessageContent>
+          {isAssistantMessage && !isStreaming && textContent && (
+            <MessageActions className="mt-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <CopyButton text={textContent} />
+            </MessageActions>
+          )}
+        </div>
+      </div>
+    </Message>
+  );
+});
+
+export const MessageList = memo(({
+  messages,
+  isLoading,
+  logo,
+  userPhoto,
+  userDisplayName = 'User',
+  description,
+  title,
+  welcomeMessage,
+  isLoadingAgent = false,
+  className,
+  agents = [],
+  onToolAction,
+  openCanvasView,
+  onForwardToAgent,
+  onUseWorkResult
+}: MessageListProps) => {
+  const lastMsgIdx = messages.length - 1;
+
+  return (
+    <ChatContainerRoot className={cn('flex-1', className)}>
+      <ChatContainerContent className="p-4 h-full">
+        {messages.length === 0 ? (
+          <div className="h-full flex items-center justify-center">
+            {isLoadingAgent ? (
+              <div className="p-2 bg-muted rounded-md">
+                <Spinner className="size-10 text-muted-foreground" />
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-3 text-center px-4">
+                <AssistantAnimations animationType="opening" className="w-32 h-32" />
+                {title && <p className="font-semibold text-base text-lg">{title}</p>}
+                <div className="max-w-sm text-md text-muted-foreground">
+                  {welcomeMessage ? <MessageResponse>{welcomeMessage}</MessageResponse> : <p>{description || 'Your AI-powered assistant for all your document needs.'}</p>}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-6">
+            {messages.map((message: any, msgIdx: number) => {
+              const isLastMessage = msgIdx === lastMsgIdx;
+              const isStreaming = isLoading && isLastMessage && message.role === 'assistant';
+
+              return (
+                <MessageItem
+                  key={message.id}
+                  message={message}
+                  isStreaming={isStreaming}
+                  logo={logo}
+                  userPhoto={userPhoto}
+                  userDisplayName={userDisplayName}
+                  agents={agents}
+                  onToolAction={onToolAction}
+                  openCanvasView={openCanvasView}
+                  onForwardToAgent={onForwardToAgent}
+                  onUseWorkResult={onUseWorkResult} />
+              );
+            })}
+            {isLoading && messages.length > 0 && messages[lastMsgIdx]?.role !== 'assistant' && (
+              <Message from="assistant">
+                <div className="flex items-center gap-3">
+                  <AssistantAnimations animationType="thinking" className="w-12 h-12 shrink-0" />
+                  <MessageContent>
+                    <Reasoning isStreaming defaultOpen className="mb-0">
+                      <ReasoningTrigger />
+                    </Reasoning>
+                  </MessageContent>
+                </div>
+              </Message>
+            )}
+          </div>
+        )}
+        <ChatContainerScrollAnchor />
+      </ChatContainerContent>
+    </ChatContainerRoot>
+  );
+});

package/src/views/project-detail.tsx

@@ -0,0 +1,257 @@
+import {
+  useState, type ChangeEvent, type FC, type FormEvent
+} from 'react';
+
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@docyrus/ui-pro-shared/components/dropdown-menu';
+import {
+  Tabs, TabsContent, TabsList, TabsTrigger
+} from '@docyrus/ui-pro-shared/components/tabs';
+import {
+  ArrowLeft, Edit, MoreHorizontal, Trash
+} from 'lucide-react';
+
+import { AIInputArea } from '../components/input-area';
+import { useAssistantTranslation } from '../i18n';
+import {
+  type AssistantSession, type Project, type SpeechRecognitionInstance, type Work
+} from '../types';
+
+interface AssistantProjectDetailViewProps {
+  project: Project;
+  projectThreads: Record<string, AssistantSession[]>;
+  projectWorks: Record<string, Work[]>;
+  onBack: () => void;
+  onEditInstructions: (instructions: string) => void;
+  onProjectMessage: (e?: FormEvent) => void;
+  onThreadClick: (thread: AssistantSession) => void;
+  onEditSession: (thread: AssistantSession) => void;
+  onDeleteSession: (thread: AssistantSession) => void;
+  input: string;
+  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  isLoading: boolean;
+  supportFiles?: boolean;
+  supportWebSearch?: boolean;
+  supportDocumentSearch?: boolean;
+  supportDeepResearch?: boolean;
+  supportThinking?: boolean;
+  supportWorkCanvas?: boolean;
+  supportMultiModels?: boolean;
+  deploymentId?: string;
+  enableMicrophone?: boolean;
+  enableVoice?: boolean;
+  isRecording: boolean;
+  recognition: SpeechRecognitionInstance | null;
+  onMicrophoneClick: () => void;
+}
+
+export const AssistantProjectDetailView: FC<AssistantProjectDetailViewProps> = ({
+  project,
+  projectThreads,
+  projectWorks,
+  onBack,
+  onProjectMessage,
+  onThreadClick,
+  onEditSession,
+  onDeleteSession,
+  input,
+  onChange,
+  isLoading,
+  supportFiles,
+  supportWebSearch,
+  supportDocumentSearch,
+  supportDeepResearch,
+  supportThinking,
+  supportWorkCanvas,
+  supportMultiModels,
+  deploymentId,
+  enableMicrophone,
+  enableVoice,
+  isRecording,
+  recognition,
+  onMicrophoneClick
+}) => {
+  const { t } = useAssistantTranslation();
+  const [activeTab, setActiveTab] = useState('sessions');
+
+  return (
+    <div className="flex-1 flex flex-col px-6 mt-2 overflow-y-auto">
+      {/* Header with Back Button */}
+      <div className="flex items-center gap-2 mb-2">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onBack}
+          className="text-muted-foreground cursor-pointer hover:text-foreground">
+          <ArrowLeft className="w-5 h-5" />
+        </Button>
+        <div className="text-sm text-muted-foreground">{t('labels.all_projects')}</div>
+      </div>
+
+      <div className="ps-2 mb-4">
+        <h1 className="text-2xl">{project.name}</h1>
+        <p className="text-sm text-muted-foreground">{project.description}</p>
+      </div>
+
+      {/* Project Chat - Full Width */}
+      <div className="mt-2 mb-20">
+        <AIInputArea
+          className="h-10"
+          onSubmit={onProjectMessage}
+          value={input}
+          onChange={onChange}
+          placeholder={t('placeholders.ask_about_project')}
+          isLoading={isLoading}
+          supportFiles={supportFiles}
+          supportWebSearch={supportWebSearch}
+          supportDocumentSearch={supportDocumentSearch}
+          supportDeepResearch={supportDeepResearch}
+          supportThinking={supportThinking}
+          supportWorkCanvas={supportWorkCanvas}
+          supportMultiModels={supportMultiModels}
+          deploymentId={deploymentId}
+          footerText={t('descriptions.footer_project')}
+          enableMicrophone={enableMicrophone}
+          enableVoice={enableVoice}
+          isRecording={isRecording}
+          recognition={recognition}
+          onMicrophoneClick={onMicrophoneClick}
+          showToolbar={true} />
+      </div>
+
+      {/* Tabs for Sessions, Works and Documents */}
+      <div className="mt-4">
+        <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="sessions">{t('tabs.sessions')}</TabsTrigger>
+            <TabsTrigger value="works">{t('tabs.works')}</TabsTrigger>
+            <TabsTrigger value="documents">{t('tabs.documents')}</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="sessions" className="mt-4">
+            {projectThreads[project.id] && projectThreads[project.id].length > 0 ? (
+              <>
+                <div className="flex justify-end items-center mb-3">
+                  <span className="text-xs text-muted-foreground">
+                    {projectThreads[project.id].length} {t('labels.threads')}
+                  </span>
+                </div>
+                <div className="space-y-2 rounded-lg max-h-84 overflow-y-auto">
+                  {projectThreads[project.id].map(thread => (
+                    <div
+                      key={thread.id}
+                      className="group flex items-center gap-3 p-3 rounded-lg hover:bg-muted/50 transition-colors border border-border">
+                      <div
+                        onClick={() => onThreadClick(thread)}
+                        className="flex items-center gap-3 flex-1 cursor-pointer">
+                        <div className="w-2 h-2 rounded-full bg-muted-foreground/40 group-hover:bg-primary/60 transition-colors flex-shrink-0" />
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm font-medium text-foreground group-hover:text-primary transition-colors truncate">
+                            {thread.title || t('common.untitled')}
+                          </p>
+                          <p className="text-xs text-muted-foreground">
+                            {thread.updatedAt.toLocaleDateString()} at {thread.updatedAt.toLocaleTimeString()}
+                          </p>
+                        </div>
+                      </div>
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+                            onClick={e => e.stopPropagation()}>
+                            <MoreHorizontal className="w-4 h-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem
+                            className="cursor-pointer"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onEditSession(thread);
+                            }}>
+                            <Edit className="w-4 h-4 mr-2" />
+                            {t('common.rename')}
+                          </DropdownMenuItem>
+                          <DropdownMenuItem
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onDeleteSession(thread);
+                            }}
+                            className="text-destructive focus:text-destructive cursor-pointer">
+                            <Trash className="w-4 h-4 mr-2" />
+                            {t('common.delete')}
+                          </DropdownMenuItem>
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </div>
+                  ))}
+                </div>
+              </>
+            ) : (
+              <div className="text-center py-8">
+                <p className="text-sm text-muted-foreground">{t('messages.no_threads_yet')}</p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {t('messages.start_conversation')}
+                </p>
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="works" className="mt-4">
+            {projectWorks[project.id] && projectWorks[project.id].length > 0 ? (
+              <>
+                <div className="flex justify-end items-center mb-3">
+                  <span className="text-xs text-muted-foreground">{projectWorks[project.id].length} {t('labels.works')}</span>
+                </div>
+                <div className="space-y-2 rounded-lg max-h-84 overflow-y-auto">
+                  {projectWorks[project.id].map(work => (
+                    <div
+                      key={work.id}
+                      className="group flex flex-col gap-2 p-3 rounded-lg hover:bg-muted/50 transition-colors border border-border cursor-pointer">
+                      <div className="flex items-start justify-between">
+                        <div className="flex-1">
+                          <h4 className="text-sm font-medium">{work.title}</h4>
+                          {work.description && (
+                            <p className="text-xs text-muted-foreground mt-1">{work.description}</p>
+                          )}
+                        </div>
+                        {work.image_url && (
+                          <img
+                            src={work.image_url}
+                            alt={work.title}
+                            className="w-12 h-12 rounded object-cover ml-2" />
+                        )}
+                      </div>
+                      <div className="flex items-center justify-between text-xs text-muted-foreground">
+                        <span>{work.type || t('labels.document')}</span>
+                        <span>{work.created_on ? new Date(work.created_on).toLocaleDateString() : ''}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            ) : (
+              <div className="text-center py-8">
+                <p className="text-sm text-muted-foreground">{t('messages.no_works_yet')}</p>
+                <p className="text-xs text-muted-foreground mt-1">{t('messages.create_works_to_track')}</p>
+              </div>
+            )}
+          </TabsContent>
+
+          <TabsContent value="documents" className="mt-4">
+            <div className="text-center py-8">
+              <p className="text-sm text-muted-foreground">{t('messages.no_documents_yet')}</p>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  );
+};