@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.5

package/src/views/message-list.tsx

@@ -1,370 +0,0 @@
-'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

@@ -1,257 +0,0 @@
-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>
-  );
-};