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

package/src/views/assistant-view.tsx

@@ -1,1137 +0,0 @@
-'use client';
-
-import {
-  useCallback, useEffect, useRef, useState, type ChangeEvent, type FC, type FormEvent, type ReactNode, type Ref
-} from 'react';
-
-import { createPortal } from 'react-dom';
-
-import { Avatar, AvatarFallback, AvatarImage } from '@docyrus/ui-pro-shared/components/avatar';
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from '@docyrus/ui-pro-shared/components/dropdown-menu';
-import { Input } from '@docyrus/ui-pro-shared/components/input';
-import { ScrollArea } from '@docyrus/ui-pro-shared/components/scroll-area';
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-import {
-  ArrowLeft,
-  Brain,
-  ChevronDown,
-  Code2,
-  Edit,
-  Eye,
-  Loader2,
-  Maximize2,
-  Minimize2,
-  PanelLeft,
-  Search,
-  Sparkles,
-  X
-} from 'lucide-react';
-
-import { type ApiResponse, useApiClient } from '../lib/api-client';
-import { type ToolActionEvent, type Work, WorkTypes } from '../types';
-
-import { type CanvasViewOptions, ChatPanel } from './chat-panel';
-
-import { ShellCanvas } from '../components/shell-canvas';
-import { CanvasAppView } from './canvas-app';
-import { CanvasCodeView } from './canvas-code';
-import { CanvasSpreadsheetView } from './canvas-spreadsheet';
-import { CanvasDeepResearchView } from './canvas-deep-research';
-import { CanvasImageView } from './canvas-image';
-import { CanvasRecordView } from './canvas-record-view';
-import { CanvasTextView } from './canvas-text';
-
-/*
- * ---------------------------------------------------------------------------
- * Shared props (both modes)
- * ---------------------------------------------------------------------------
- */
-
-interface AssistantViewCommonProps {
-  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;
-  threadId?: string;
-}
-
-/*
- * ---------------------------------------------------------------------------
- * Inline mode props
- * ---------------------------------------------------------------------------
- */
-
-export interface InlineModeProps extends AssistantViewCommonProps {
-  mode: 'inline';
-
-  // Visibility
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-
-  // Display
-  className?: string;
-
-  // Sidebar
-  enableSidebar?: boolean;
-  isSidebarOpen?: boolean;
-  onToggleSidebar?: () => void;
-  renderSidebar?: () => ReactNode;
-
-  // Tabs
-  activeTab?: number;
-  onTabChange?: (tab: number) => void;
-
-  // Navigation
-  onExpand?: () => void;
-  onNewChat?: () => void;
-  enableNavDropdown?: boolean;
-  isFullscreen?: boolean;
-
-  // Content renderers
-  renderSessionsView?: () => ReactNode;
-  renderProjectsView?: () => ReactNode;
-  renderWorksView?: () => ReactNode;
-  renderMemoriesView?: () => ReactNode;
-  renderThreadHeader?: () => ReactNode;
-
-  // Agent selector
-  agentSelectorUrl?: string;
-  baseAgentSelectorUrl?: string;
-  onAgentChange?: (agentId: string, agentType: 'base' | 'deployment') => void;
-
-  // i18n
-  t: (key: string) => string;
-}
-
-/*
- * ---------------------------------------------------------------------------
- * Conversation mode props
- * ---------------------------------------------------------------------------
- */
-
-export interface ConversationModeProps extends AssistantViewCommonProps {
-  mode: 'conversation';
-  onWorkSelect: (work: Work) => void;
-  onOpenRightSidebar: () => void;
-}
-
-/*
- * ---------------------------------------------------------------------------
- * Union type
- * ---------------------------------------------------------------------------
- */
-
-export type AssistantViewProps = InlineModeProps | ConversationModeProps;
-
-/*
- * ---------------------------------------------------------------------------
- * Unified component
- * ---------------------------------------------------------------------------
- */
-
-export const AssistantView = ({ ref, ...props }: AssistantViewProps & { ref?: Ref<HTMLDivElement | null> }) => {
-  // Canvas state — always declared (rules of hooks), only used in inline mode
-  const [canvasWork, setCanvasWork] = useState<Work | null>(null);
-  const [canvasVersions, setCanvasVersions] = useState<{ id: string; name: string }[]>([]);
-  const [canvasVersionsLoading, setCanvasVersionsLoading] = useState(false);
-  const [canvasSelectedVersionId, setCanvasSelectedVersionId] = useState<string | null>(null);
-  const [canvasVersionImages, setCanvasVersionImages] = useState<any[] | null>(null);
-  const [canvasVersionContent, setCanvasVersionContent] = useState<string | null>(null);
-  const [canvasVersionLanguage, setCanvasVersionLanguage] = useState<string | undefined>(undefined);
-  const [activeCanvasTab, setActiveCanvasTab] = useState<0 | 1>(0);
-  const [canvasSpreadsheetCommands, setCanvasSpreadsheetCommands] = useState<any[]>([]);
-  const apiClient = useApiClient();
-
-  // Agent selector state
-  const [agentSelectorOpen, setAgentSelectorOpen] = useState(false);
-  const [agents, setAgents] = useState<any[]>([]);
-  const [baseAgents, setBaseAgents] = useState<any[]>([]);
-  const [agentsLoading, setAgentsLoading] = useState(false);
-  const [agentSearch, setAgentSearch] = useState('');
-  const [selectedAgent, setSelectedAgent] = useState<any | null>(null);
-  const agentSearchRef = useRef<HTMLInputElement>(null);
-
-  // Canvas open handler for inline mode
-  const handleOpenCanvasViewInline = (options: CanvasViewOptions) => {
-    if (options.type === 'xlsx' && canvasWork?.id === options.id && canvasWork?.type === WorkTypes.Xlsx) {
-      setCanvasSpreadsheetCommands(options.commands ?? []);
-
-      return;
-    }
-
-    setCanvasVersions([]);
-    setCanvasVersionsLoading(false);
-    setCanvasSelectedVersionId(null);
-    setCanvasVersionImages(null);
-    setCanvasVersionContent(null);
-    setCanvasVersionLanguage(undefined);
-    setActiveCanvasTab(0);
-    setCanvasSpreadsheetCommands([]);
-
-    if (options.type === 'record') {
-      setCanvasWork({
-        id: options.id,
-        title: options.title || 'Record Form',
-        type: WorkTypes.Record,
-        content_json: {
-          dataSourceId: options.dataSourceId,
-          data: options.data,
-          mode: options.mode || 'add',
-          recordId: options.recordId
-        },
-        created_on: new Date(),
-        last_modified_on: new Date()
-      });
-    } else if (options.type === 'image') {
-      setCanvasWork({
-        id: options.id,
-        title: options.title || 'Image',
-        type: WorkTypes.Image,
-        content_json: options.images,
-        created_on: new Date(),
-        last_modified_on: new Date()
-      });
-    } else if (options.type === 'text' || options.type === 'code') {
-      setCanvasWork({
-        id: options.id,
-        title: options.title || (options.type === 'text' ? 'Text' : 'Code'),
-        type: options.type === 'text' ? WorkTypes.Text : WorkTypes.Code,
-        created_on: new Date(),
-        last_modified_on: new Date()
-      });
-    } else if (options.type === 'data') {
-      setCanvasWork({
-        id: options.id,
-        title: options.title || 'Deep Research',
-        type: WorkTypes.Data,
-        content_json: options.contentJson ?? null,
-        created_on: new Date(),
-        last_modified_on: new Date()
-      });
-    } else if (options.type === 'app') {
-      setCanvasWork({
-        id: options.id,
-        title: options.title || options.contentJson?.layout?.title || 'App Preview',
-        type: WorkTypes.App,
-        content_json: options.contentJson ?? null,
-        created_on: new Date(),
-        last_modified_on: new Date()
-      });
-    } else if (options.type === 'xlsx') {
-      if (canvasWork?.id === options.id && canvasWork?.type === WorkTypes.Xlsx) {
-        setCanvasSpreadsheetCommands(options.commands ?? []);
-      } else {
-        setCanvasWork({
-          id: options.id,
-          title: options.title || 'Spreadsheet',
-          type: WorkTypes.Xlsx,
-          content_json: options.contentJson ?? null,
-          created_on: new Date(),
-          last_modified_on: new Date()
-        });
-        setCanvasSpreadsheetCommands(options.commands ?? []);
-      }
-    }
-  };
-
-  const handleCanvasVersionSelect = useCallback(async (versionId: string) => {
-    if (!canvasWork?.id) return;
-
-    setCanvasSelectedVersionId(versionId);
-    setCanvasVersionImages(null);
-
-    try {
-      const response = await apiClient.get(`/ai/works/${canvasWork.id}/versions/${versionId}`) as ApiResponse & { data: any };
-
-      if (response.success && response.data) {
-        setCanvasVersionImages(response.data.content_json);
-        setCanvasVersionContent(response.data.content_text ?? null);
-        setCanvasVersionLanguage(response.data.content_json?.language ?? response.data.content_json?.subType ?? undefined);
-
-        if (response.data.type) {
-          setCanvasWork(prev => prev ? { ...prev, type: response.data.type as WorkTypes } : prev);
-        }
-      }
-    } catch {
-      // silently ignore
-    }
-  }, [apiClient, canvasWork?.id]);
-
-  useEffect(() => {
-    const fetchVersions = async () => {
-      if (!canvasWork?.id || canvasWork.id.startsWith('record-') || canvasWork.type === WorkTypes.Data || canvasWork.type === WorkTypes.App) {
-        setCanvasVersions([]);
-        setCanvasVersionsLoading(false);
-        setCanvasSelectedVersionId(null);
-        setCanvasVersionImages(null);
-
-        return;
-      }
-
-      setCanvasVersionsLoading(true);
-
-      try {
-        const response = await apiClient.get(`/ai/works/${canvasWork.id}`) as ApiResponse & { data: any };
-
-        if (response.success && response.data?.versions?.length > 0) {
-          const sorted = [...response.data.versions].sort(
-            (a: any, b: any) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()
-          );
-          const mapped = sorted.map((v: any, i: number) => ({ id: v.id, name: `v${i + 1}` })).reverse();
-
-          setCanvasVersions(mapped);
-          setCanvasSelectedVersionId(mapped[0].id);
-          await handleCanvasVersionSelect(mapped[0].id);
-        }
-      } catch {
-        // silently ignore
-      } finally {
-        setCanvasVersionsLoading(false);
-      }
-    };
-
-    fetchVersions();
-  }, [
-    apiClient,
-    canvasWork?.id,
-    canvasWork?.type,
-    handleCanvasVersionSelect
-  ]);
-
-  // Fetch agents when selector opens
-  const tenantAiAgentId = props.mode !== 'conversation' ? props.tenantAiAgentId : undefined;
-  const inlineProps = props.mode !== 'conversation' ? props as InlineModeProps : null;
-  const agentUrl = inlineProps?.agentSelectorUrl;
-  const baseAgentUrl = inlineProps?.baseAgentSelectorUrl;
-  const hasFetchedRef = useRef(false);
-
-  useEffect(() => {
-    if (!agentSelectorOpen) return;
-    if (hasFetchedRef.current) return;
-    if (!agentUrl && !baseAgentUrl) return;
-
-    hasFetchedRef.current = true;
-
-    const fetchAgents = async () => {
-      setAgentsLoading(true);
-
-      try {
-        const deployedRes = agentUrl ? await apiClient.get(agentUrl) : { success: true, data: [] };
-        const baseRes = baseAgentUrl ? await apiClient.get(baseAgentUrl) : { success: true, data: [] };
-
-        if (deployedRes.success) {
-          const raw = Array.isArray(deployedRes.data) ? deployedRes.data : [];
-
-          setAgents(raw.map((d: any) => ({
-            id: d.deploymentId ?? d.id,
-            name: d.agentName ?? d.name,
-            avatar: d.agentAvatar?.signed_url ?? d.avatar
-          })));
-        }
-
-        if (baseRes.success) {
-          const rawBase = Array.isArray(baseRes.data) ? baseRes.data : [];
-
-          setBaseAgents(rawBase.map((d: any) => ({
-            id: d.agentId ?? d.id,
-            name: d.agentName ?? d.name,
-            avatar: d.agentAvatar?.signed_url ?? d.agentAvatar ?? d.avatar
-          })));
-        }
-      } catch {
-        // silently ignore
-      } finally {
-        setAgentsLoading(false);
-      }
-    };
-
-    fetchAgents();
-  }, [
-    agentSelectorOpen,
-    agentUrl,
-    baseAgentUrl,
-    apiClient
-  ]);
-
-  const allAgents = [...agents, ...baseAgents];
-
-  let activeAgent: any;
-
-  if (selectedAgent != null) {
-    activeAgent = selectedAgent;
-  } else if (props.deploymentId) {
-    activeAgent = agents.find(a => a.id === props.deploymentId) ?? null;
-  } else {
-    activeAgent = tenantAiAgentId ? (allAgents.find(a => a.id === tenantAiAgentId) ?? null) : null;
-  }
-  const filteredDeployedAgents = agents.filter(
-    a => !agentSearch || a.name?.toLowerCase().includes(agentSearch.toLowerCase())
-  );
-  const filteredBaseAgents = baseAgents.filter(
-    a => !agentSearch || a.name?.toLowerCase().includes(agentSearch.toLowerCase())
-  );
-  const hasAnyAgents = filteredDeployedAgents.length > 0 || filteredBaseAgents.length > 0;
-
-  /*
-   * -----------------------------------------------------------------------
-   * Conversation mode
-   * -----------------------------------------------------------------------
-   */
-
-  if (props.mode === 'conversation') {
-    const { onWorkSelect, onOpenRightSidebar, ...commonProps } = props;
-
-    const handleOpenCanvasView = (options: CanvasViewOptions) => {
-      let tempWork: Work | null = null;
-
-      if (options.type === 'image') {
-        tempWork = {
-          id: options.id || `image-${Date.now()}`,
-          title: options.title || 'Generated Image',
-          type: WorkTypes.Image,
-          content_json: options.images,
-          created_on: new Date(),
-          last_modified_on: new Date()
-        };
-      } else if (options.type === 'code') {
-        tempWork = {
-          id: options.id || `preview-${Date.now()}`,
-          title: options.title || 'Code Preview',
-          content_text: '',
-          type: WorkTypes.Code,
-          created_on: new Date(),
-          last_modified_on: new Date()
-        };
-      } else if (options.type === 'record') {
-        tempWork = {
-          id: options.id || `record-${Date.now()}`,
-          title: options.title || 'Record Form',
-          type: WorkTypes.Record,
-          content_json: {
-            dataSourceId: options.dataSourceId,
-            data: options.data,
-            mode: options.mode || 'add',
-            recordId: options.recordId
-          },
-          created_on: new Date(),
-          last_modified_on: new Date()
-        };
-      }
-
-      if (tempWork) {
-        onWorkSelect(tempWork);
-        onOpenRightSidebar();
-      }
-    };
-
-    return (
-      <ChatPanel
-        messages={commonProps.messages}
-        isLoading={commonProps.isLoading}
-        input={commonProps.input}
-        onInputChange={commonProps.onInputChange}
-        onSendMessage={commonProps.onSendMessage}
-        onStop={commonProps.onStop}
-        logo={commonProps.logo}
-        userPhoto={commonProps.userPhoto}
-        userDisplayName={commonProps.userDisplayName}
-        description={commonProps.description}
-        title={commonProps.title}
-        welcomeMessage={commonProps.welcomeMessage}
-        isLoadingAgent={commonProps.isLoadingAgent}
-        placeholder={commonProps.placeholder}
-        footerText={commonProps.footerText}
-        supportFiles={commonProps.supportFiles}
-        supportWebSearch={commonProps.supportWebSearch}
-        supportDocumentSearch={commonProps.supportDocumentSearch}
-        supportDeepResearch={commonProps.supportDeepResearch}
-        supportThinking={commonProps.supportThinking}
-        supportWorkCanvas={commonProps.supportWorkCanvas}
-        supportMultiModels={commonProps.supportMultiModels}
-        deploymentId={commonProps.deploymentId}
-        tenantAiAgentId={commonProps.tenantAiAgentId}
-        enableMicrophone={commonProps.enableMicrophone}
-        enableVoice={commonProps.enableVoice}
-        isRecording={commonProps.isRecording}
-        recognition={commonProps.recognition}
-        onMicrophoneClick={commonProps.onMicrophoneClick}
-        onToolAction={commonProps.onToolAction}
-        openCanvasView={handleOpenCanvasView}
-        threadId={commonProps.threadId}
-        messagesClassName="p-4" />
-    );
-  }
-
-  /*
-   * -----------------------------------------------------------------------
-   * Inline mode
-   * -----------------------------------------------------------------------
-   */
-
-  const {
-    open,
-    onOpenChange,
-    className,
-    enableSidebar,
-    isSidebarOpen,
-    onToggleSidebar,
-    renderSidebar,
-    activeTab = 0,
-    onTabChange,
-    onExpand,
-    onNewChat,
-    enableNavDropdown = false,
-    isFullscreen = false,
-    renderSessionsView,
-    renderProjectsView,
-    renderWorksView,
-    renderMemoriesView,
-    renderThreadHeader,
-    agentSelectorUrl,
-    baseAgentSelectorUrl,
-    onAgentChange,
-    t,
-    ...commonProps
-  } = props;
-
-  if (!open) return null;
-
-  const content = (
-    <div
-      className={cn(
-        'relative flex flex-col bg-background text-foreground border shadow-sm @container',
-        isFullscreen ? 'fixed inset-0 z-[9999] rounded-none h-screen' : 'h-full rounded-xl',
-        className
-      )}
-      data-render-mode="inline"
-      ref={ref}>
-      {/* Header */}
-      <div className="flex items-center justify-between h-12 px-3 border-b shrink-0">
-        <div className="flex items-center gap-1">
-          {enableNavDropdown && (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-8 w-8 rounded-md hover:bg-accent relative overflow-hidden group">
-                  <span
-                    className="pointer-events-none absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-violet-200/60 to-transparent group-hover:translate-x-full transition-transform duration-700 ease-in-out"
-                    aria-hidden="true" />
-                  <Sparkles className="w-4 h-4 text-brown-500 relative z-10" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className={cn('w-40', isFullscreen && 'z-[10000]')}>
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  onClick={() => onTabChange?.(activeTab === 1 ? 0 : 1)}>
-                  {t('tabs.sessions')}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  onClick={() => onTabChange?.(activeTab === 2 ? 0 : 2)}>
-                  {t('sections.projects')}
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  className="cursor-pointer"
-                  onClick={() => onTabChange?.(activeTab === 3 ? 0 : 3)}>
-                  {t('tabs.works')}
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-
-          {(agentSelectorUrl || baseAgentSelectorUrl) ? (
-            <DropdownMenu
-              open={agentSelectorOpen}
-              onOpenChange={(o) => {
-                setAgentSelectorOpen(o);
-                if (!o) setAgentSearch('');
-              }}>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="ghost"
-                  className="h-8 px-2 gap-1 text-sm font-medium text-foreground hover:bg-accent rounded-md max-w-[260px]">
-                  <span className="truncate">{activeAgent?.name ?? commonProps.title ?? 'Assistant'}</span>
-                  <ChevronDown className="w-3 h-3 shrink-0 text-muted-foreground" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="start"
-                className={cn('w-64 p-0', isFullscreen && 'z-[10000]')}
-                onCloseAutoFocus={e => e.preventDefault()}>
-                <div className="p-2 border-b">
-                  <div className="relative">
-                    <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-muted-foreground pointer-events-none" />
-                    <Input
-                      ref={agentSearchRef}
-                      value={agentSearch}
-                      onChange={e => setAgentSearch(e.target.value)}
-                      onKeyDown={e => e.stopPropagation()}
-                      placeholder="Search agents..."
-                      className="h-7 pl-7 text-sm"
-                      autoFocus />
-                  </div>
-                </div>
-                <ScrollArea className="max-h-56">
-                  {agentsLoading ? (
-                    <div className="flex items-center justify-center py-4">
-                      <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
-                    </div>
-                  ) : !hasAnyAgents ? (
-                    <div className="py-4 text-center text-xs text-muted-foreground">No agents found</div>
-                  ) : (
-                    <>
-                      {filteredBaseAgents.length > 0 && (
-                        <>
-                          <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">Base Agents</div>
-                          {filteredBaseAgents.map(agent => (
-                            <DropdownMenuItem
-                              key={agent.id}
-                              className="cursor-pointer gap-2 px-3 py-2"
-                              onClick={() => {
-                                setSelectedAgent(agent);
-                                setAgentSelectorOpen(false);
-                                setAgentSearch('');
-                                onAgentChange?.(agent.id, 'base');
-                              }}>
-                              {agent.avatar ? (
-                                <img src={typeof agent.avatar === 'string' ? agent.avatar : agent.avatar?.signed_url} alt="" className="w-5 h-5 rounded-full shrink-0 object-cover" />
-                              ) : (
-                                <div className="w-5 h-5 rounded-full shrink-0 bg-muted flex items-center justify-center">
-                                  <Brain className="w-3 h-3 text-muted-foreground" />
-                                </div>
-                              )}
-                              <span className="truncate text-sm">{agent.name}</span>
-                            </DropdownMenuItem>
-                          ))}
-                        </>
-                      )}
-                      {filteredDeployedAgents.length > 0 && (
-                        <>
-                          {filteredBaseAgents.length > 0 && <DropdownMenuSeparator />}
-                          <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground">Deployed Agents</div>
-                          {filteredDeployedAgents.map(agent => (
-                            <DropdownMenuItem
-                              key={agent.id}
-                              className="cursor-pointer gap-2 px-3 py-2"
-                              onClick={() => {
-                                setSelectedAgent(agent);
-                                setAgentSelectorOpen(false);
-                                setAgentSearch('');
-                                onAgentChange?.(agent.id, 'deployment');
-                              }}>
-                              {agent.avatar ? (
-                                <img src={typeof agent.avatar === 'string' ? agent.avatar : agent.avatar?.signed_url} alt="" className="w-5 h-5 rounded-full shrink-0 object-cover" />
-                              ) : (
-                                <div className="w-5 h-5 rounded-full shrink-0 bg-muted flex items-center justify-center">
-                                  <Brain className="w-3 h-3 text-muted-foreground" />
-                                </div>
-                              )}
-                              <span className="truncate text-sm">{agent.name}</span>
-                            </DropdownMenuItem>
-                          ))}
-                        </>
-                      )}
-                    </>
-                  )}
-                </ScrollArea>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : (
-            <span className="text-sm font-medium text-foreground">{commonProps.title || 'Assistant'}</span>
-          )}
-        </div>
-        <div className="flex items-center gap-1">
-          {enableNavDropdown && onNewChat && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md"
-              onClick={onNewChat}
-              title={t('buttons.start_new_thread')}>
-              <Edit className="w-4 h-4" />
-            </Button>
-          )}
-          {onExpand && (
-            <Button
-              variant="ghost"
-              size="icon"
-              className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md"
-              onClick={onExpand}
-              title={isFullscreen ? t('actions.minimize') : t('actions.expand_fullscreen')}>
-              {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
-            </Button>
-          )}
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md"
-            onClick={() => onOpenChange(false)}
-            title={t('common.close')}>
-            <X className="w-4 h-4" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Main Content Area + Canvas Panel (side-by-side) */}
-      <div className="flex-1 flex flex-row min-h-0 overflow-hidden relative">
-
-        {/* Floating Buttons — visible only when sidebar is closed */}
-        {!isSidebarOpen && (
-          <div className="absolute top-2 left-2 z-40 flex flex-col gap-1">
-            {enableSidebar && onToggleSidebar && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={onToggleSidebar}
-                className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md shadow-sm"
-                title={t('tabs.sessions')}>
-                <PanelLeft className="w-4 h-4" />
-              </Button>
-            )}
-            {onTabChange && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => onTabChange(activeTab === 4 ? 0 : 4)}
-                className={cn(
-                  'h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md shadow-sm',
-                  activeTab === 4 && 'bg-background text-foreground shadow'
-                )}
-                title={t('tabs.memories')}>
-                <Brain className="w-4 h-4" />
-              </Button>
-            )}
-            {isFullscreen && onNewChat && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={onNewChat}
-                className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md shadow-sm"
-                title={t('buttons.start_new_thread')}>
-                <Edit className="w-4 h-4" />
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Floating Sidebar — narrow screens only */}
-        {enableSidebar && isSidebarOpen && renderSidebar && (
-          <>
-            {/* Background Mask */}
-            <div
-              className="absolute inset-0 bg-black/20 z-[99] @3xl:hidden"
-              onClick={onToggleSidebar} />
-
-            {/* Sidebar Panel */}
-            <div className="absolute left-0 top-0 h-full w-72 bg-background z-[100] shadow-xl border-r @3xl:hidden">
-              <div className="w-full h-full flex flex-col">
-                {/* Sidebar Header */}
-                <div className="flex items-center justify-between h-12 px-3 border-b shrink-0">
-                  {commonProps.logo || commonProps.title ? (
-                    <div className="flex items-center gap-2 min-w-0">
-                      <Avatar className="h-7 w-7 shrink-0 after:hidden">
-                        <AvatarImage src={commonProps.logo} alt={commonProps.title} />
-                        <AvatarFallback className="text-xs">
-                          {(commonProps.title || 'AI').substring(0, 2).toUpperCase()}
-                        </AvatarFallback>
-                      </Avatar>
-                      <span className="text-sm font-medium truncate">{commonProps.title}</span>
-                    </div>
-                  ) : <div />}
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={onToggleSidebar}
-                    className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground">
-                    <X className="w-4 h-4" />
-                  </Button>
-                </div>
-                {/* Sidebar Content */}
-                <div className="flex-1 p-4 flex flex-col min-h-0 overflow-hidden">
-                  {renderSidebar()}
-                </div>
-              </div>
-            </div>
-          </>
-        )}
-
-        {/* Inline Sidebar — wide screens only */}
-        {enableSidebar && renderSidebar && (
-          <div
-            className={cn(
-              'hidden @3xl:flex flex-col flex-none bg-background border-r transition-all duration-300 overflow-hidden',
-              isSidebarOpen ? 'w-72' : 'w-0'
-            )}>
-            <div className="w-72 h-full flex flex-col relative">
-              {/* Top-right controls inside sidebar when open */}
-              {isSidebarOpen && (
-                <div className="absolute top-2 right-2 z-10 flex flex-col gap-1">
-                  {onToggleSidebar && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={onToggleSidebar}
-                      className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md">
-                      <PanelLeft className="w-4 h-4" />
-                    </Button>
-                  )}
-                  {onTabChange && (
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      onClick={() => onTabChange(activeTab === 4 ? 0 : 4)}
-                      className={cn(
-                        'h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md',
-                        activeTab === 4 && 'bg-accent text-accent-foreground'
-                      )}
-                      title={t('tabs.memories')}>
-                      <Brain className="w-4 h-4" />
-                    </Button>
-                  )}
-                </div>
-              )}
-              <div className="flex-1 p-4 flex flex-col min-h-0 overflow-hidden">
-                {renderSidebar()}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Chat */}
-        <div className={cn(
-          'flex flex-col min-h-0 overflow-hidden transition-all duration-200',
-          canvasWork ? 'w-2/5' : 'flex-1',
-          !isSidebarOpen && enableSidebar && 'pl-10'
-        )}>
-          {activeTab === 1 ? (
-          // Sessions View
-            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
-              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                  onClick={() => onTabChange?.(0)}>
-                  <ArrowLeft className="w-4 h-4" />
-                </Button>
-              </div>
-              {renderSessionsView ? (
-                renderSessionsView()
-              ) : (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground">
-                  Sessions view not available
-                </div>
-              )}
-            </div>
-          ) : activeTab === 2 ? (
-          // Projects View
-            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
-              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                  onClick={() => onTabChange?.(0)}>
-                  <ArrowLeft className="w-4 h-4" />
-                </Button>
-              </div>
-              {renderProjectsView ? (
-                renderProjectsView()
-              ) : (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground">
-                  Projects view not available
-                </div>
-              )}
-            </div>
-          ) : activeTab === 4 ? (
-          // Memories View
-            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
-              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                  onClick={() => onTabChange?.(0)}>
-                  <ArrowLeft className="w-4 h-4" />
-                </Button>
-              </div>
-              {renderMemoriesView ? (
-                renderMemoriesView()
-              ) : (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground">
-                  Memories view not available
-                </div>
-              )}
-            </div>
-          ) : activeTab === 3 ? (
-          // Works View
-            <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
-              <div className="flex items-center gap-1 px-3 h-10 shrink-0">
-                <Button
-                  variant="ghost"
-                  size="icon"
-                  className="h-7 w-7 text-muted-foreground hover:text-foreground"
-                  onClick={() => onTabChange?.(0)}>
-                  <ArrowLeft className="w-4 h-4" />
-                </Button>
-              </div>
-              {renderWorksView ? (
-                renderWorksView()
-              ) : (
-                <div className="flex-1 flex items-center justify-center text-muted-foreground">
-                  Works view not available
-                </div>
-              )}
-            </div>
-          ) : (
-          // Default: Chat View
-            <ChatPanel
-              messages={commonProps.messages}
-              isLoading={commonProps.isLoading}
-              input={commonProps.input}
-              onInputChange={commonProps.onInputChange}
-              onSendMessage={commonProps.onSendMessage}
-              onStop={commonProps.onStop}
-              logo={commonProps.logo}
-              userPhoto={commonProps.userPhoto}
-              userDisplayName={commonProps.userDisplayName}
-              description={commonProps.description}
-              title={commonProps.title}
-              welcomeMessage={commonProps.welcomeMessage}
-              isLoadingAgent={commonProps.isLoadingAgent}
-              placeholder={commonProps.placeholder}
-              footerText={commonProps.footerText}
-              supportFiles={commonProps.supportFiles}
-              supportWebSearch={commonProps.supportWebSearch}
-              supportDocumentSearch={commonProps.supportDocumentSearch}
-              supportDeepResearch={commonProps.supportDeepResearch}
-              supportThinking={commonProps.supportThinking}
-              supportWorkCanvas={commonProps.supportWorkCanvas}
-              supportMultiModels={commonProps.supportMultiModels}
-              deploymentId={commonProps.deploymentId}
-              tenantAiAgentId={commonProps.tenantAiAgentId}
-              enableMicrophone={commonProps.enableMicrophone}
-              enableVoice={commonProps.enableVoice}
-              isRecording={commonProps.isRecording}
-              recognition={commonProps.recognition}
-              onMicrophoneClick={commonProps.onMicrophoneClick}
-              onToolAction={commonProps.onToolAction}
-              openCanvasView={handleOpenCanvasViewInline}
-              renderThreadHeader={renderThreadHeader}
-              threadId={commonProps.threadId}
-              compactToolbar={!isFullscreen} />
-          )}
-        </div>
-
-        {/* Canvas Panel */}
-        {canvasWork && (
-          <div className="w-3/5 border-l bg-background flex flex-col shrink-0">
-            <div className="flex items-center gap-2 h-12 px-3 border-b shrink-0">
-              <span className="text-sm font-medium truncate flex-1">{canvasWork.title}</span>
-              {canvasWork.type === WorkTypes.Code && (
-                <div className="flex items-center gap-0.5 bg-muted rounded-md p-0.5 shrink-0">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className={cn(
-                      'h-6 px-2 text-xs rounded-sm',
-                      activeCanvasTab === 0 ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'
-                    )}
-                    onClick={() => setActiveCanvasTab(0)}>
-                    <Eye className="w-3 h-3 mr-1" />
-                    Preview
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className={cn(
-                      'h-6 px-2 text-xs rounded-sm',
-                      activeCanvasTab === 1 ? 'bg-background shadow-sm text-foreground' : 'text-muted-foreground hover:text-foreground'
-                    )}
-                    onClick={() => setActiveCanvasTab(1)}>
-                    <Code2 className="w-3 h-3 mr-1" />
-                    Code
-                  </Button>
-                </div>
-              )}
-              {canvasWork.type !== WorkTypes.Record && canvasWork.type !== WorkTypes.Data && canvasWork.type !== WorkTypes.App && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="outline" size="sm" className="h-7 text-xs px-2 shrink-0" disabled={canvasVersionsLoading}>
-                      {canvasVersionsLoading ? '...' : (canvasVersions.find(v => v.id === canvasSelectedVersionId)?.name ?? t('labels.select_version'))}
-                      <ChevronDown className="ml-1 h-3 w-3" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="max-h-60 overflow-y-auto">
-                    {canvasVersions.length === 0 ? (
-                      <DropdownMenuItem disabled className="text-xs text-muted-foreground">
-                        {t('messages.no_versions_found')}
-                      </DropdownMenuItem>
-                    ) : (
-                      canvasVersions.map(v => (
-                        <DropdownMenuItem
-                          key={v.id}
-                          className={`cursor-pointer text-xs ${canvasSelectedVersionId === v.id ? 'bg-accent text-accent-foreground' : ''}`}
-                          onClick={() => handleCanvasVersionSelect(v.id)}>
-                          {v.name}
-                        </DropdownMenuItem>
-                      ))
-                    )}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setCanvasWork(null)}
-                className="h-8 w-8 shrink-0 text-muted-foreground hover:text-foreground">
-                <X className="w-4 h-4" />
-              </Button>
-            </div>
-            <div className="flex-1 overflow-y-auto">
-              {canvasVersionsLoading && (
-                <div className="flex h-full items-center justify-center">
-                  <Loader2 className="size-5 animate-spin text-muted-foreground" />
-                </div>
-              )}
-              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Record && (
-                <CanvasRecordView
-                  dataSourceId={canvasWork.content_json?.dataSourceId ?? ''}
-                  mode={canvasWork.content_json?.mode ?? 'add'}
-                  defaultValues={canvasWork.content_json?.data}
-                  recordId={canvasWork.content_json?.recordId}
-                  onClose={() => setCanvasWork(null)}
-                  onSave={(id, data) => {
-                    console.info('[CanvasRecordView] saved:', id, data);
-                  }} />
-              )}
-              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Image && (
-                <CanvasImageView
-                  title={canvasWork.title}
-                  images={canvasVersionImages ?? canvasWork.content_json} />
-              )}
-              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Text && (
-                <CanvasTextView
-                  contentText={canvasVersionContent ?? ''}
-                  language={(canvasVersionLanguage as any) ?? 'markdown'}
-                  title={canvasWork.title} />
-              )}
-              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Data && (
-                <CanvasDeepResearchView
-                  title={canvasWork.title}
-                  output_schema={canvasWork.content_json?.output_schema}
-                  content={canvasWork.content_json?.content}
-                  basis={canvasWork.content_json?.basis} />
-              )}
-              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Xlsx && (
-                canvasSelectedVersionId && !canvasVersionImages ? (
-                  <div className="flex h-full items-center justify-center">
-                    <Loader2 className="size-5 animate-spin text-muted-foreground" />
-                  </div>
-                ) : (
-                  <CanvasSpreadsheetView
-                    key={canvasSelectedVersionId ?? canvasWork.id}
-                    title={canvasWork.title}
-                    content={canvasVersionImages ?? canvasWork.content_json}
-                    workId={canvasWork.id}
-                    versionId={canvasSelectedVersionId ?? undefined}
-                    commands={canvasSpreadsheetCommands}
-                    onData={async (data) => {
-                      const workId = canvasWork.id;
-
-                      if (!workId || workId === 'streaming') return;
-
-                      try {
-                        await apiClient.post(`/ai/works/${workId}/modify`, {
-                          content_json: {
-                            ...(canvasWork.content_json ?? {}),
-                            workbook: data.workbook
-                          }
-                        });
-                      } catch {
-                        console.warn("Version didn't save succesfully.");
-                      }
-                    }} />
-                )
-              )}
-              {!canvasVersionsLoading && canvasWork.type === WorkTypes.App && (
-                <CanvasAppView app={canvasWork.content_json} />
-              )}
-              {!canvasVersionsLoading && canvasWork.type === WorkTypes.Code && canvasWork.id && (
-                activeCanvasTab === 0 ? (
-                  <ShellCanvas
-                    workId={canvasWork.id}
-                    versionId={canvasSelectedVersionId}
-                    title={canvasWork.title} />
-                ) : (
-                  <CanvasCodeView
-                    contentText={canvasVersionContent ?? ''}
-                    language={canvasVersionLanguage as any}
-                    title={canvasWork.title} />
-                )
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  if (isFullscreen && typeof document !== 'undefined') {
-    return createPortal(content, document.body);
-  }
-
-  return content;
-};
-
-AssistantView.displayName = 'AssistantView';
-
-export type InlineViewProps = Omit<InlineModeProps, 'mode'>;
-export type ConversationViewProps = Omit<ConversationModeProps, 'mode'>;
-
-export const InlineView = ({ ref, ...props }: InlineViewProps & { ref?: Ref<HTMLDivElement | null> }) => <AssistantView mode="inline" {...props} ref={ref} />;
-
-InlineView.displayName = 'InlineView';
-
-export const ConversationView: FC<ConversationViewProps> = props => (
-  <AssistantView mode="conversation" {...props} />
-);
-
-ConversationView.displayName = 'ConversationView';