@docyrus/ui-pro-ai-assistant 0.0.1

package/src/views/canvas.tsx

@@ -0,0 +1,274 @@
+import {
+  useCallback, useEffect, useState, type FC
+} from 'react';
+
+import {
+  Artifact,
+  ArtifactClose,
+  ArtifactContent,
+  ArtifactHeader,
+  ArtifactTitle
+} from '@docyrus/ui-pro-shared/ai';
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@docyrus/ui-pro-shared/components/dropdown-menu';
+import { ChevronDown } from 'lucide-react';
+
+import { useAssistantTranslation } from '../i18n';
+
+import { GenerativeUITool } from '../components/generative-tool';
+import { useApiClient } from '../lib/api-client';
+
+import {
+  type ApiResponse, type Version, type Work, WorkTypes
+} from '../types';
+
+import { CanvasCodeView } from './canvas-code';
+import { CanvasDeepResearchView } from './canvas-deep-research';
+import { CanvasImageView } from './canvas-image';
+import { CanvasRecordView } from './canvas-record-view';
+import { CanvasTextView } from './canvas-text';
+
+interface AssistantCanvasViewProps {
+  works: Work[];
+  selectedWork: Work | null;
+  rightSidebarView: 'list' | 'detail';
+  onWorkSelect: (work: Work) => void;
+  onBackToList: () => void;
+  onClose?: () => void;
+}
+
+export const AssistantCanvasView: FC<AssistantCanvasViewProps> = ({ selectedWork, onClose }) => {
+  const [versions, setVersions] = useState<Version[]>([]);
+  const [selectedVersion, setSelectedVersion] = useState<Version | null>(null);
+  const apiClient = useApiClient();
+
+  // Fetch version details with content
+  const fetchVersionDetails = useCallback(async (versionId: string) => {
+    if (!selectedWork?.id) return null;
+
+    try {
+      const response = (await apiClient.get(
+        `/ai/works/${selectedWork.id}/versions/${versionId}`
+      )) as ApiResponse<any>;
+
+      if (response.success && response.data) {
+        return response.data;
+      } else {
+        console.error('Failed to fetch version details:', response.error || response.message);
+
+        return null;
+      }
+    } catch (error) {
+      console.error('Failed to fetch version details:', error);
+
+      return null;
+    }
+  }, [apiClient, selectedWork?.id]);
+
+  // Handler for version selection
+  const handleVersionSelect = useCallback(async (version: Version) => {
+    const versionDetails = await fetchVersionDetails(version.id);
+
+    if (versionDetails) {
+      setSelectedVersion({
+        ...version,
+        content_text: versionDetails.content_text,
+        content_json: versionDetails.content_json,
+        type: versionDetails.type
+      });
+    }
+  }, [fetchVersionDetails]);
+
+  const fetchVersions = useCallback(async () => {
+    if (!selectedWork?.id) {
+      return;
+    }
+
+    try {
+      const response = (await apiClient.get(`/ai/works/${selectedWork.id}`)) as ApiResponse<{
+        versions: Array<any>;
+      }>;
+
+      if (response.success && response.data?.versions) {
+        const formattedVersions: Version[] = response.data.versions.map((item: any) => ({
+          id: item.id,
+          title: item.title,
+          created_by: item.created_by,
+          created_on: item.created_on,
+          content_text: item.content_text,
+          content_json: item.content_json,
+          type: item.type
+        }));
+
+        setVersions(formattedVersions);
+        // Fetch and select the first version by default if none selected
+        if (formattedVersions.length > 0) {
+          handleVersionSelect(formattedVersions[formattedVersions.length - 1]);
+        }
+      } else {
+        console.error('Failed to fetch versions:', response.error || response.message);
+      }
+    } catch (error) {
+      console.error('Failed to fetch versions:', error);
+    }
+  }, [apiClient, selectedWork?.id, handleVersionSelect]);
+
+  // Fetch versions when selectedWork changes
+  useEffect(() => {
+    if (selectedWork) {
+      setSelectedVersion(null);
+      fetchVersions();
+    }
+  }, [selectedWork, fetchVersions]);
+
+  const { t } = useAssistantTranslation();
+
+  // Render appropriate canvas view based on work type or version
+  const renderCanvasView = (work: Work, version?: Version | null) => {
+    const displayData = version || work;
+    const contentText = displayData.content_text || t('labels.no_content_available');
+    const workType = displayData.type || work.type;
+
+    switch (workType) {
+      case WorkTypes.Text:
+        return (
+          <div className="w-full h-full">
+            <CanvasTextView
+              contentText={contentText}
+              language={displayData.content_json?.lang ?? 'markdown'}
+              title={displayData.content_json?.title} />
+          </div>
+        );
+
+      case WorkTypes.Code:
+        return (
+          <div className="w-full h-full">
+            <CanvasCodeView
+              contentText={contentText}
+              language="typescript" // Default language, could be enhanced to detect from content
+            />
+          </div>
+        );
+
+      case WorkTypes.Record:
+        return (
+          <div className="w-full h-full">
+            <CanvasRecordView
+              dataSourceId={displayData.content_json?.dataSourceId ?? ''}
+              mode={displayData.content_json?.mode ?? 'add'}
+              defaultValues={displayData.content_json?.data}
+              recordId={displayData.content_json?.recordId}
+              onClose={onClose}
+              onSave={(id, data) => {
+                console.info('[CanvasRecordView] saved:', id, data);
+              }} />
+          </div>
+        );
+
+      case WorkTypes.Image:
+        return (
+          <div className="w-full h-full">
+            <CanvasImageView title={contentText} images={displayData.content_json} />
+          </div>
+        );
+
+      case WorkTypes.Data:
+        return (
+          <div className="w-full h-full">
+            <CanvasDeepResearchView
+              title={displayData.content_json?.title || work.title}
+              output_schema={displayData.content_json?.output_schema}
+              content={displayData.content_json?.content}
+              basis={displayData.content_json?.basis} />
+          </div>
+        );
+
+      case WorkTypes.Html:
+        return <CanvasCodeView contentText={contentText} language="html" />;
+
+      case WorkTypes.CustomQuerySql:
+        return <CanvasCodeView contentText={contentText} language="sql" />;
+
+      case WorkTypes.CustomQueryJson:
+        return <CanvasCodeView contentText={contentText} language="json" />;
+
+      // For other types, fall back to the existing GenerativeUITool
+      default:
+        return (
+          <GenerativeUITool
+            part={{
+              state: 'output-available',
+              output: contentText,
+              toolCallId: `work-${displayData.id || work.id}`
+            }}
+            toolName="workContent"
+            onToolAction={() => {}} />
+        );
+    }
+  };
+
+  return (
+    <Artifact className="w-80 h-full">
+      <ArtifactHeader>
+        <ArtifactTitle className="truncate flex-1 mr-2">
+          {selectedWork ? selectedWork.title : t('labels.artifact_details')}
+        </ArtifactTitle>
+        {onClose && <ArtifactClose onClick={onClose} />}
+      </ArtifactHeader>
+
+      {/* Version Dropdown */}
+      <div className="px-4 py-2 border-b">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="p-4">
+              <span>
+                {selectedVersion ? `v${versions.findIndex(v => v.id === selectedVersion.id) + 1}` : t('labels.select_version')}
+              </span>
+              <ChevronDown className="mr-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          {versions.length === 0 ? (
+            <div className="text-center py-8 text-muted-foreground">{t('messages.no_versions_found')}</div>
+          ) : (
+            <DropdownMenuContent className="flex flex-col gap-2 max-h-60 overflow-y-auto">
+              {versions.map((version, index) => (
+                <DropdownMenuItem
+                  key={version.id}
+                  onClick={() => handleVersionSelect(version)}
+                  className={`w-full font-medium ${selectedVersion?.id === version.id ? 'bg-accent text-accent-foreground cursor-pointer' : 'cursor-pointer'}`}>
+                  v{index + 1}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          )}
+        </DropdownMenu>
+      </div>
+
+      <ArtifactContent className="flex-1 overflow-y-auto">
+        {selectedWork ? (
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">{renderCanvasView(selectedWork, selectedVersion)}</div>
+
+            <div className="py-2 border-t sticky bottom-0 bg-background">
+              <div className="text-xs text-muted-foreground space-y-1">
+                <div>
+                  {t('labels.created')}: {selectedWork.created_on ? new Date(selectedWork.created_on).toLocaleDateString() : '-'}
+                </div>
+                <div>
+                  {t('labels.updated')}: {selectedWork.last_modified_on ? new Date(selectedWork.last_modified_on).toLocaleDateString() : '-'}
+                </div>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="text-sm text-muted-foreground text-center py-8">{t('messages.no_artifact_selected')}</div>
+        )}
+      </ArtifactContent>
+    </Artifact>
+  );
+};

package/src/views/chat-panel.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { type ChangeEvent, type FormEvent, type ReactNode } from 'react';
+
+import { AIInputArea } from '../components/input-area';
+import { type ToolActionEvent } from '../types';
+
+import { MessageList } from './message-list';
+
+export interface CanvasViewOptions {
+  type: string;
+  id: string;
+  title?: string;
+  description?: string;
+  images?: any[];
+  dataSourceId?: string;
+  data?: Record<string, any> | string;
+  mode?: 'add' | 'edit' | 'view';
+  recordId?: string;
+  versionId?: string;
+  contentJson?: Record<string, any> | null;
+  loaded?: boolean;
+  commands?: any[];
+}
+
+export interface ChatPanelProps {
+  messages: any[];
+  isLoading: boolean;
+  input: string;
+  onInputChange: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onSendMessage: (e?: FormEvent, options?: any) => void;
+  onStop: () => void;
+  logo?: string;
+  userPhoto?: string;
+  userDisplayName?: string;
+  description?: string;
+  title?: string;
+  welcomeMessage?: string;
+  isLoadingAgent?: boolean;
+  placeholder?: string;
+  footerText?: string;
+  supportFiles?: boolean;
+  supportWebSearch?: boolean;
+  supportDocumentSearch?: boolean;
+  supportDeepResearch?: boolean;
+  supportThinking?: boolean;
+  supportWorkCanvas?: boolean;
+  supportMultiModels?: boolean;
+  deploymentId?: string;
+  tenantAiAgentId?: string;
+  enableMicrophone?: boolean;
+  enableVoice?: boolean;
+  isRecording?: boolean;
+  recognition?: any;
+  onMicrophoneClick?: () => void;
+  onToolAction?: (event: ToolActionEvent) => void;
+  openCanvasView?: (options: CanvasViewOptions) => void;
+  onSendSpreadsheetCommands?: (commands: any[]) => void;
+  renderThreadHeader?: () => ReactNode;
+  messagesClassName?: string;
+  compactToolbar?: boolean;
+  threadId?: string;
+}
+
+export function ChatPanel({
+  messages,
+  isLoading,
+  input,
+  onInputChange,
+  onSendMessage,
+  onStop,
+  logo,
+  userPhoto,
+  userDisplayName,
+  description,
+  title,
+  welcomeMessage,
+  isLoadingAgent,
+  placeholder,
+  footerText,
+  supportFiles,
+  supportWebSearch,
+  supportDocumentSearch,
+  supportDeepResearch,
+  supportThinking,
+  supportWorkCanvas,
+  supportMultiModels,
+  deploymentId,
+  tenantAiAgentId,
+  enableMicrophone,
+  enableVoice,
+  isRecording,
+  recognition,
+  onMicrophoneClick,
+  onToolAction,
+  openCanvasView,
+  onSendSpreadsheetCommands: _onSendSpreadsheetCommands,
+  renderThreadHeader,
+  messagesClassName,
+  compactToolbar,
+  threadId
+}: ChatPanelProps) {
+  return (
+    <>
+      {renderThreadHeader?.()}
+      <MessageList
+        messages={messages}
+        isLoading={isLoading}
+        logo={logo}
+        userPhoto={userPhoto}
+        userDisplayName={userDisplayName}
+        description={description}
+        title={title}
+        welcomeMessage={welcomeMessage}
+        isLoadingAgent={isLoadingAgent}
+        onToolAction={onToolAction}
+        openCanvasView={openCanvasView}
+        className={messagesClassName} />
+      <div className="px-3 pb-3 pt-2">
+        <AIInputArea
+          onSubmit={onSendMessage}
+          onStop={onStop}
+          value={input}
+          onChange={onInputChange}
+          placeholder={placeholder}
+          isLoading={isLoading}
+          supportFiles={supportFiles}
+          supportWebSearch={supportWebSearch}
+          supportDocumentSearch={supportDocumentSearch}
+          supportDeepResearch={supportDeepResearch}
+          supportThinking={supportThinking}
+          supportWorkCanvas={supportWorkCanvas}
+          supportMultiModels={supportMultiModels}
+          deploymentId={deploymentId}
+          tenantAiAgentId={tenantAiAgentId}
+          enableMicrophone={enableMicrophone}
+          enableVoice={enableVoice}
+          isRecording={isRecording}
+          recognition={recognition}
+          onMicrophoneClick={onMicrophoneClick}
+          footerText={footerText}
+          showToolbar={!compactToolbar}
+          compactToolbar={compactToolbar}
+          threadId={threadId}
+          hasMessages={messages.length > 0} />
+      </div>
+    </>
+  );
+}

package/src/views/index.ts

@@ -0,0 +1,20 @@
+export { AssistantView, InlineView, ConversationView } from './assistant-view';
+export type {
+  AssistantViewProps,
+  InlineModeProps,
+  ConversationModeProps,
+  InlineViewProps,
+  ConversationViewProps
+} from './assistant-view';
+export { AssistantCanvasView } from './canvas';
+export { MemoriesPanel } from './memories-panel';
+export { CanvasCodeView } from './canvas-code';
+export { CanvasImageView } from './canvas-image';
+export { CanvasRecordView } from './canvas-record-view';
+export type { CanvasRecordViewProps, RecordMode } from './canvas-record-view';
+export { MessageList } from './message-list';
+export { AssistantProjectDetailView } from './project-detail';
+export { AssistantProjectsPanel } from './projects-panel';
+export { SessionsListView } from './sessions-list';
+export { SidebarContent } from './sidebar-content';
+export { AssistantWorkDetailView } from './work-detail';