@docyrus/ui-pro-ai-assistant 0.0.1 → 0.0.3

package/src/views/canvas.tsx

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

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