@docyrus/ui-pro-ai-assistant 0.0.1

package/src/docy-assistant.tsx

@@ -0,0 +1,1962 @@
+'use client';
+
+import {
+  useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type FormEvent, type KeyboardEvent, type Ref, type RefObject
+} from 'react';
+
+import { useChat } from '@ai-sdk/react';
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import { toast } from 'sonner';
+import {
+  Dialog, DialogContent, DialogTitle
+} from '@docyrus/ui-pro-shared/components/dialog';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger
+} from '@docyrus/ui-pro-shared/components/dropdown-menu';
+import { Textarea } from '@docyrus/ui-pro-shared/components/textarea';
+import { Input } from '@docyrus/ui-pro-shared/components/input';
+import {
+  Tabs, TabsContent, TabsList, TabsTrigger
+} from '@docyrus/ui-pro-shared/components/tabs';
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+import {
+  DefaultChatTransport,
+  type FinishReason,
+  lastAssistantMessageIsCompleteWithToolCalls,
+  type UIMessage
+} from 'ai';
+import {
+  Archive,
+  ArrowLeft,
+  ArrowRight,
+  Edit,
+  FolderInput,
+  Maximize2,
+  Minimize2,
+  MoreHorizontal,
+  PanelLeft,
+  Plus,
+  Search,
+  Trash,
+  X
+} from 'lucide-react';
+
+import { AssistantDialogs } from './components/assistant-dialogs';
+import { WorkCard } from './components/work-card';
+import {
+  useAssistantApi, useProjectState, useSessionState, useSpeechRecognition, useUIState, useWorksState
+} from './hooks';
+import { AssistantCanvasView } from './views/canvas';
+import { ConversationView, InlineView } from './views/assistant-view';
+import { MemoriesPanel } from './views/memories-panel';
+import { AssistantProjectDetailView } from './views/project-detail';
+import { AssistantProjectsPanel } from './views/projects-panel';
+import { SessionsListView } from './views/sessions-list';
+import { SidebarContent } from './views/sidebar-content';
+import { AssistantWorkDetailView } from './views/work-detail';
+import { useAssistantTranslation } from './i18n';
+import { useApiClient } from './lib/api-client';
+import {
+  createThread,
+  deleteProject as deleteProjectApi,
+  deleteSession as deleteSessionApi,
+  fetchAgentThreads,
+  fetchProjectThreads as fetchProjectThreadsApi,
+  fetchProjects as fetchProjectsApi,
+  fetchProjectWorks as fetchProjectWorksApi,
+  fetchWorks as fetchWorksApi,
+  loadThreadMessages as loadThreadMessagesApi,
+  updateProject as updateProjectApi,
+  updateProjectInstructions as updateProjectInstructionsApi,
+  updateSession as updateSessionApi,
+  uploadThreadFile
+} from './lib/assistant-api-actions';
+import { useAssistantConfig } from './lib/assistant-config';
+import { getContainerClassName, getDialogClassName } from './lib/class-utils';
+
+import {
+  type AssistantSession,
+  type DocyAssistantProps,
+  type Project,
+  type Work
+} from './types';
+
+interface ThreadHeaderInlineProps {
+  session: AssistantSession;
+  projects: Project[];
+  projectContext: { id: string; name: string } | null;
+  onSaveTitle: (newTitle: string) => Promise<void>;
+  onDelete: () => void;
+  onArchive: () => Promise<void>;
+  onMoveToProject: (projectId: string) => Promise<void>;
+  onProjectContextClick?: () => void;
+  isFullscreen?: boolean;
+  t: (key: string) => string;
+}
+
+function ThreadHeaderInline({
+  session,
+  projects,
+  projectContext,
+  onSaveTitle,
+  onDelete,
+  onArchive,
+  onMoveToProject,
+  onProjectContextClick,
+  isFullscreen = false,
+  t
+}: ThreadHeaderInlineProps) {
+  const dropdownZClass = isFullscreen ? 'z-[10000]' : '';
+  const [editValue, setEditValue] = useState<string | null>(null);
+
+  const handleBlur = async () => {
+    if (editValue === null) return;
+    const trimmed = editValue.trim();
+
+    if (trimmed && trimmed !== session.title) {
+      await onSaveTitle(trimmed);
+    }
+
+    setEditValue(null);
+  };
+
+  const handleKeyDown = async (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.currentTarget.blur();
+    } else if (e.key === 'Escape') {
+      setEditValue(null);
+    }
+  };
+
+  return (
+    <div className="flex-none h-10 flex bg-background items-center justify-between border-b border-x border-border px-3 mx-3 rounded-b-md  shrink-0">
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        {projectContext?.id && onProjectContextClick && (
+          <Button
+            variant="ghost"
+            onClick={onProjectContextClick}
+            className="inline-flex items-center gap-1 px-2 py-0.5 h-auto rounded-full bg-sky-100 text-sky-700 dark:bg-sky-900/40 dark:text-sky-300 text-xs font-medium flex-none hover:bg-sky-200 transition-colors">
+            {projectContext.name}
+          </Button>
+        )}
+        {editValue !== null ? (
+          <input
+            autoFocus
+            value={editValue}
+            onChange={e => setEditValue(e.target.value)}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            className="text-sm font-medium text-foreground bg-transparent border-b border-border focus:outline-none min-w-0 flex-1" />
+        ) : (
+          <div className="group/title flex items-center gap-1 min-w-0">
+            <span className="text-sm font-medium text-foreground truncate min-w-0">
+              {session.title || t('common.untitled')}
+            </span>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setEditValue(session.title || '')}
+              className="opacity-0 group-hover/title:opacity-100 transition-opacity shrink-0 h-5 w-5 text-muted-foreground hover:text-foreground">
+              <Edit className="w-3.5 h-3.5" />
+            </Button>
+          </div>
+        )}
+      </div>
+      <div className="flex items-center flex-none">
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-foreground">
+              <MoreHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className={cn('w-48', dropdownZClass)}>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger className="cursor-pointer">
+                <FolderInput className="w-4 h-4 mr-2" />
+                {t('actions.move_to_project')}
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent className={cn('w-48', dropdownZClass)}>
+                {projects.length === 0 ? (
+                  <DropdownMenuItem disabled className="text-muted-foreground text-xs">
+                    {t('messages.no_projects_yet')}
+                  </DropdownMenuItem>
+                ) : (
+                  projects.map(project => (
+                    <DropdownMenuItem
+                      key={project.id}
+                      className="cursor-pointer"
+                      onClick={() => onMoveToProject(project.id)}>
+                      {project.name}
+                    </DropdownMenuItem>
+                  ))
+                )}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={onArchive}>
+              <Archive className="w-4 h-4 mr-2" />
+              {t('actions.archive')}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-destructive focus:text-destructive cursor-pointer"
+              onClick={onDelete}>
+              <Trash className="w-4 h-4 mr-2" />
+              {t('common.delete')}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
+}
+
+function dataUrlToFile(dataUrl: string, filename: string): File {
+  const arr = dataUrl.split(',');
+  const mime = arr[0].match(/:(.*?);/)?.[1] || 'application/octet-stream';
+  const bstr = atob(arr[1]);
+  let n = bstr.length;
+  const u8arr = new Uint8Array(n);
+
+  while (n--) {
+    u8arr[n] = bstr.charCodeAt(n);
+  }
+
+  return new File([u8arr], filename, { type: mime });
+}
+
+export const DocyAssistant = (
+  {
+    ref, open, onOpenChange, supportWebSearch = false, supportThinking = false, supportFiles = false, supportDocumentSearch = false, supportDeepResearch = false, supportMultiModels = false, supportWorkCanvas = false, apiEndpoint = '/ai/agents/:agentId/chat', title: titleProp, description: descriptionProp, placeholder: placeholderProp, logo, footerText: footerTextProp, variant = 'default', renderMode = 'modal', enableSidebar = true, enableNavDropdown = false, enableVoice = false, enableMicrophone = true, tenantAiAgentId, deploymentId, onMessageSend, onVoiceStart, onVoiceEnd, className, defaultFullscreen = false, hideExpand = false, agentSelectorUrl, baseAgentSelectorUrl, onAgentChange, ...props
+  }: DocyAssistantProps & { ref?: RefObject<HTMLDivElement | null> }
+) => {
+  const config = useAssistantConfig();
+  const { apiBaseUrl: baseUrl, getAuthToken, user: configUser } = config;
+  const apiClient = useApiClient();
+  const { t } = useAssistantTranslation();
+
+  // Localized default values
+  const title = titleProp || 'DocyAssistant';
+  const description = descriptionProp || t('descriptions.default');
+  const placeholder = placeholderProp || t('placeholders.type_message');
+  const footerText = footerTextProp || t('descriptions.footer_default');
+
+  // Custom hooks for grouped state management
+  const { state: uiState, actions: uiActions } = useUIState(variant, renderMode);
+  const { state: sessionState, actions: sessionActions } = useSessionState();
+  const { state: projectState, actions: projectActions } = useProjectState();
+  const { state: worksState, actions: worksActions } = useWorksState();
+
+  // Remaining local state
+  const [input, setInput] = useState('');
+  const currentUserId = configUser?.id || null;
+  const [projectSearchQuery, setProjectSearchQuery] = useState('');
+  const [isInlineFullscreen, setIsInlineFullscreen] = useState(defaultFullscreen);
+
+  // Speech recognition hook
+  const { isRecording, recognition, handleMicrophoneClick } = useSpeechRecognition({
+    enabled: enableMicrophone,
+    onTranscript: transcript => setInput(prev => prev + (prev ? ' ' : '') + transcript),
+    onStart: onVoiceStart,
+    onEnd: onVoiceEnd
+  });
+
+  // Refs
+  const selectedSessionIdRef = useRef<string | null>(null);
+  const sidebarCloseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const rightSidebarCloseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const authTokenRef = useRef<string>('');
+  const messageOptionsRef = useRef<any>(null);
+
+  // Keep refs in sync with state
+  useEffect(() => {
+    selectedSessionIdRef.current = sessionState.selectedSessionId;
+  }, [sessionState.selectedSessionId]);
+
+  // Get and maintain auth token in ref
+  useEffect(() => {
+    getAuthToken().then((token: string) => {
+      if (token) {
+        authTokenRef.current = token;
+      }
+    });
+  }, [getAuthToken]);
+
+  // Create transport with headers and body using functions for dynamic values
+  const transport = useMemo(() => {
+    // Build URL from apiEndpoint template, replacing :agentId and optionally adding deployment
+    const endpointPath = apiEndpoint.replace(':agentId', tenantAiAgentId);
+    const apiUrl = deploymentId ? `${baseUrl}${endpointPath.replace('/chat', `/deployments/${deploymentId}/chat`)}` : `${baseUrl}${endpointPath}`;
+
+    return new DefaultChatTransport({
+      api: apiUrl,
+      prepareSendMessagesRequest: ({ messages, body }: { messages: any[]; body: any }) => {
+        const options = messageOptionsRef.current;
+
+        return {
+          body: {
+            ...body,
+            agentId: tenantAiAgentId,
+            threadId: selectedSessionIdRef.current, // Use ref for immediate access
+            messages: messages.slice(-10), // Only send last 10 messages
+            modelId: options?.modelId,
+            supportMultipleModels: options?.supportMultipleModels,
+            supportFiles: options?.supportFiles,
+            supportWebSearch: options?.supportWebSearch,
+            supportDeepResearch: options?.supportDeepResearch,
+            supportDocumentSearch: options?.supportDocumentSearch,
+            supportThinking: options?.supportThinking,
+            supportWorkCanvas: options?.supportWorkCanvas,
+            ...(options?.filePaths?.length ? { files: options.filePaths } : {})
+          }
+        };
+      },
+      headers: () => {
+        const token = authTokenRef.current;
+
+        return {
+          'Content-Type': 'application/json',
+          ...(token && { Authorization: `Bearer ${token}` })
+        };
+      },
+      body: () => ({
+        agentId: tenantAiAgentId,
+        threadId: selectedSessionIdRef.current
+      })
+    });
+  }, [
+    baseUrl,
+    apiEndpoint,
+    tenantAiAgentId,
+    deploymentId
+  ]);
+
+  // Use the AI SDK's useChat hook with agent-specific endpoint
+  const {
+    messages = [],
+    status,
+    sendMessage,
+    setMessages,
+    stop,
+    addToolOutput
+  } = useChat({
+    id: `docy-assistant:${tenantAiAgentId}`,
+    transport,
+    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithToolCalls,
+    onFinish: (
+      message: UIMessage,
+      options?: {
+        usage?: {
+          inputTokens?: number;
+          outputTokens?: number;
+          totalTokens?: number;
+          cacheReadTokens?: number;
+          cacheWriteTokens?: number;
+        };
+        finishReason?: FinishReason;
+      }
+    ) => {
+      const { usage, finishReason } = options || {};
+
+      if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development') {
+        console.info('[AI] Message finished:', {
+          messageId: message.id,
+          role: message.role,
+          finishReason,
+          inputTokens: usage?.inputTokens,
+          outputTokens: usage?.outputTokens,
+          totalTokens: usage?.totalTokens,
+          cacheReadTokens: usage?.cacheReadTokens,
+          cacheWriteTokens: usage?.cacheWriteTokens
+        });
+      }
+    },
+    onError: (error: Error) => {
+      console.error('[AI] Chat error:', error);
+    }
+  } as any);
+
+  // AI SDK v6 status handling
+  const isStreaming = status === 'streaming';
+  const isSubmitting = status === 'submitted';
+  const isLoading = isStreaming || isSubmitting;
+
+  const handleToolAction = useCallback((event: {
+    tool: string;
+    toolCallId: string;
+    decision: string;
+    input: any;
+  }) => {
+    switch (event.decision) {
+      case 'approve':
+
+      case 'continue':
+        addToolOutput({
+          tool: event.tool as any,
+          toolCallId: event.toolCallId,
+          output: { action: event.decision }
+        });
+        break;
+
+      case 'submit':
+        addToolOutput({
+          tool: event.tool as any,
+          toolCallId: event.toolCallId,
+          output: event.input
+        });
+        break;
+
+      default:
+        addToolOutput({
+          tool: event.tool as any,
+          toolCallId: event.toolCallId,
+          output: { decision: event.decision }
+        });
+    }
+  }, [addToolOutput]);
+
+  // Compute user display info from config
+  const userDisplayName = configUser ? `${configUser.firstname || ''} ${configUser.lastname || ''}`.trim() || configUser.email?.split('@')[0] || 'User' : 'User';
+  const userPhoto = configUser?.photo || '';
+
+  // Computed values from state
+  const isInlineMode = uiState.currentRenderMode === 'inline';
+
+  // Auto-open create view when no projects
+  useEffect(() => {
+    if (
+      uiState.activeTab === 2
+      && projectState.projectsLoaded
+      && projectState.projects.length === 0
+      && projectState.view === 'list'
+    ) {
+      projectActions.setView('create');
+    }
+  }, [
+    uiState.activeTab,
+    projectState.projectsLoaded,
+    projectState.projects.length,
+    projectState.view,
+    projectActions
+  ]);
+
+  /*
+   * Fetch agent details with request deduplication
+   * Uses module-level cache to prevent multiple requests across component instances
+   */
+  const apiClientRef = useRef(apiClient);
+
+  apiClientRef.current = apiClient;
+
+  // Use the assistant API hook for agent details
+  const { agentDetails, isLoadingAgentDetails } = useAssistantApi({
+    tenantAiAgentId,
+    deploymentId,
+    logo,
+    title,
+    t
+  });
+
+  const fetchThreads = useCallback(async () => {
+    await fetchAgentThreads(apiClient, tenantAiAgentId, sessionActions.setSessions, currentUserId, deploymentId);
+  }, [
+    apiClient,
+    tenantAiAgentId,
+    sessionActions,
+    currentUserId,
+    deploymentId
+  ]);
+
+  const fetchProjectThreads = useCallback(async (projectId: string) => {
+    await fetchProjectThreadsApi(apiClient, projectId, projectActions.setProjectThreads);
+  }, [apiClient, projectActions]);
+
+  const fetchProjectWorks = useCallback(async (projectId: string) => {
+    await fetchProjectWorksApi(apiClient, projectId, projectActions.setProjectWorks, tenantAiAgentId, currentUserId);
+  }, [
+    apiClient,
+    projectActions,
+    tenantAiAgentId,
+    currentUserId
+  ]);
+
+  const fetchProjects = useCallback(async () => {
+    await fetchProjectsApi(
+      apiClient,
+      configUser?.id || null,
+      projectActions.setProjects,
+      (project) => {
+        fetchProjectThreads(project.id);
+        fetchProjectWorks(project.id);
+      },
+      () => projectActions.setProjectsLoaded(true),
+      tenantAiAgentId
+    );
+  }, [
+    apiClient,
+    configUser?.id,
+    projectActions,
+    fetchProjectThreads,
+    fetchProjectWorks,
+    tenantAiAgentId
+  ]);
+
+  const fetchWorks = useCallback(async () => {
+    await fetchWorksApi(apiClient, worksActions.setWorks, tenantAiAgentId, currentUserId);
+  }, [
+    apiClient,
+    worksActions,
+    tenantAiAgentId,
+    currentUserId
+  ]);
+
+  // Fetch threads from API
+  useEffect(() => {
+    if (open && (enableSidebar || enableNavDropdown)) {
+      fetchThreads();
+    }
+  }, [
+    open,
+    enableSidebar,
+    enableNavDropdown,
+    fetchThreads
+  ]);
+
+  // Fetch projects when projects tab is active
+  useEffect(() => {
+    if (open && (enableSidebar || enableNavDropdown) && uiState.activeTab === 3) {
+      fetchWorks();
+    } else if (open && (enableSidebar || enableNavDropdown)) {
+      projectActions.setProjectsLoaded(false);
+      fetchProjects();
+    }
+  }, [
+    open,
+    enableSidebar,
+    enableNavDropdown,
+    uiState.activeTab,
+    projectActions,
+    fetchProjects,
+    fetchWorks
+  ]);
+
+  // Fetch works when right sidebar opens
+  useEffect(() => {
+    if (open && uiState.isRightSidebarOpen) {
+      fetchWorks();
+    }
+  }, [open, uiState.isRightSidebarOpen, fetchWorks]);
+
+  const updateProject = async () => {
+    await updateProjectApi(apiClient, projectState, projectActions, fetchProjects, t);
+  };
+
+  const deleteProject = async () => {
+    await deleteProjectApi(apiClient, projectState, projectActions, fetchProjects, t);
+  };
+
+  const loadThreadMessages = async (threadId: string) => {
+    await loadThreadMessagesApi(apiClient, threadId, setMessages);
+  };
+
+  const handleSessionClick = async (session: AssistantSession) => {
+    sessionActions.selectSessionId(session.id);
+    sessionActions.selectSession(session);
+    uiActions.setActiveTab(0); // Switch to Home tab when a session is clicked
+    await loadThreadMessages(session.id);
+  };
+
+  const createNewThread = () => {
+    sessionActions.selectSessionId(null);
+    sessionActions.selectSession(null);
+    uiActions.setActiveTab(0); // Switch to Home tab when creating a new thread
+    setMessages([]); // Clear messages for new thread
+  };
+
+  const handleSendMessage = async (e?: FormEvent, options?: any) => {
+    e?.preventDefault();
+    if (!input.trim()) return;
+
+    // Store options in ref for access in prepareSendMessagesRequest
+    messageOptionsRef.current = options;
+
+    const messageText = input.trim();
+    let currentThreadId = selectedSessionIdRef.current;
+
+    // If no thread ID exists, create a new one
+    if (!currentThreadId) {
+      const subject = messageText.substring(0, 100);
+
+      const newThread = await createThread(apiClient, {
+        subject,
+        body_text: messageText,
+        sender_name: userDisplayName,
+        deploymentId,
+        tenantAiAgentId,
+        projectId: projectState.projectContext?.id
+      });
+
+      if (newThread) {
+        currentThreadId = newThread.id;
+
+        // Update the selected session ID
+        sessionActions.selectSessionId(currentThreadId);
+        selectedSessionIdRef.current = currentThreadId;
+
+        // Add the new session to the list
+        const session: AssistantSession = {
+          id: newThread.id,
+          title: newThread.subject || subject,
+          messages: [],
+          createdAt: new Date(newThread.created_on || new Date()),
+          updatedAt: new Date(newThread.last_modified_on || new Date())
+        };
+
+        sessionActions.addSession(session);
+
+        fetchThreads();
+
+        if (projectState.projectContext?.id) {
+          fetchProjectThreads(projectState.projectContext.id);
+        }
+      } else {
+        return;
+      }
+    }
+
+    onMessageSend?.(messageText);
+    setInput('');
+
+    // Upload files to thread storage via REST API
+    const rawFiles: { url: string; mediaType: string; filename: string }[] = options?.files || [];
+    const filePaths: string[] = [];
+
+    if (rawFiles.length > 0 && currentThreadId) {
+      for (const rawFile of rawFiles) {
+        try {
+          const file = dataUrlToFile(rawFile.url, rawFile.filename);
+          const path = await uploadThreadFile(apiClient, currentThreadId, file);
+
+          if (path) {
+            filePaths.push(path);
+          }
+        } catch (error) {
+          console.error('[FILE_UPLOAD] Error:', error);
+        }
+      }
+    }
+
+    // Store file paths in ref for prepareSendMessagesRequest
+    messageOptionsRef.current = {
+      ...options,
+      filePaths: filePaths.length > 0 ? filePaths : undefined
+    };
+
+    await sendMessage({
+      text: messageText,
+      metadata: {
+        modelId: options?.modelId,
+        supportMultipleModels: options?.supportMultipleModels,
+        supportFiles: options?.supportFiles,
+        supportWebSearch: options?.supportWebSearch,
+        supportDeepResearch: options?.supportDeepResearch,
+        supportDocumentSearch: options?.supportDocumentSearch,
+        supportThinking: options?.supportThinking,
+        supportWorkCanvas: options?.supportWorkCanvas
+      }
+    });
+  };
+
+  const handleInputChange = useCallback((e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setInput(e.target.value);
+  }, []);
+
+  const handleProjectMessage = async (e?: FormEvent) => {
+    e?.preventDefault();
+    if (!input.trim() || !projectState.selectedProject) return;
+
+    // Clear everything and switch to home tab
+    sessionActions.selectSessionId(null);
+    selectedSessionIdRef.current = null;
+    setMessages([]);
+    uiActions.setActiveTab(0);
+
+    const originalMessage = input.trim();
+
+    // Store project context for breadcrumb
+    projectActions.setContext({
+      name: projectState.selectedProject.name,
+      id: projectState.selectedProject.id,
+      message: originalMessage
+    });
+
+    // Set input and use existing handleSendMessage logic
+    setInput(originalMessage);
+
+    // Small delay to ensure state updates, then send message
+    setTimeout(async () => {
+      // Double-check that session is cleared before sending
+      sessionActions.selectSessionId(null);
+      selectedSessionIdRef.current = null;
+      await handleSendMessage();
+    }, 200);
+  };
+
+  const handleDockLeft = () => {
+    // If in inline mode, switch to modal mode when docking
+    if (isInlineMode) {
+      uiActions.setRenderMode('modal');
+      uiActions.setDocked(true);
+      uiActions.setExpanded(false);
+
+      return;
+    }
+    // If currently docked and original renderMode was inline, return to inline
+    if (uiState.isDocked && renderMode === 'inline') {
+      uiActions.setRenderMode('inline');
+      uiActions.setDocked(false);
+      uiActions.setExpanded(false);
+
+      return;
+    }
+    uiActions.setDocked(!uiState.isDocked);
+    uiActions.setExpanded(false);
+  };
+
+  const handleExpand = () => {
+    // In inline mode, always toggle fullscreen overlay (InlineView handles it via portal)
+    if (isInlineMode) {
+      setIsInlineFullscreen(prev => !prev);
+
+      return;
+    }
+    // If currently expanded and original renderMode was inline, return to inline
+    if (uiState.isExpanded && renderMode === 'inline') {
+      uiActions.setRenderMode('inline');
+      uiActions.setExpanded(false);
+      uiActions.setDocked(false);
+
+      return;
+    }
+    uiActions.setExpanded(!uiState.isExpanded);
+    uiActions.setDocked(false);
+  };
+
+  const handleCreateProject = async (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!projectState.form.name.trim()) return;
+
+    projectActions.setCreating(true);
+
+    try {
+      const response: any = await apiClient.post('/ai/projects', {
+        name: projectState.form.name,
+        tenant_ai_agent_id: tenantAiAgentId,
+        description: projectState.form.description || undefined
+      });
+
+      if (response.success && response.data) {
+        const newProject = response.data;
+
+        // Set the selected project
+        projectActions.selectProject(newProject);
+
+        // Reset form
+        projectActions.setForm({ name: '', description: '' });
+
+        // Navigate to conversation view
+        projectActions.setView('conversation');
+
+        // Refresh projects list
+        fetchProjects();
+      }
+    } catch (error) {
+      console.error('Failed to create project:', error);
+      // Could add error handling/toast here
+    } finally {
+      projectActions.setCreating(false);
+    }
+  };
+
+  const updateSession = async () => {
+    await updateSessionApi(
+      apiClient,
+      sessionState,
+      sessionActions,
+      fetchThreads,
+      fetchProjectThreads,
+      projectState.projectContext?.id || null,
+      projectState.selectedProject?.id || null,
+      t
+    );
+  };
+
+  const deleteSession = async () => {
+    await deleteSessionApi(
+      apiClient,
+      sessionState,
+      sessionActions,
+      fetchThreads,
+      fetchProjectThreads,
+      projectState.projectContext?.id || null,
+      projectState.selectedProject?.id || null,
+      t
+    );
+  };
+
+  const updateProjectInstructions = async () => {
+    await updateProjectInstructionsApi(apiClient, projectState, projectActions, fetchProjects, t);
+  };
+
+  // Filter sessions based on search query
+  const filteredSessions = sessionState.sessions.filter((session) => {
+    if (!sessionState.searchQuery.trim()) return true;
+
+    const query = sessionState.searchQuery.toLowerCase();
+
+    return session.title.toLowerCase().includes(query);
+  });
+
+  // Sidebar content render helper
+  const renderSidebarContent = () => (
+    <SidebarContent
+      sessions={sessionState.sessions}
+      works={worksState.works}
+      projects={projectState.projects}
+      selectedSessionId={sessionState.selectedSessionId}
+      selectedWorkId={worksState.selectedWork?.id}
+      activeTab={uiState.activeTab}
+      onNewChat={() => {
+        createNewThread();
+        projectActions.setContext(null);
+      }}
+      onTabChange={uiActions.setActiveTab}
+      onSessionClick={handleSessionClick}
+      onDeleteSession={(session) => {
+        sessionActions.selectSession(session);
+        sessionActions.setDeleteDialogOpen(true);
+      }}
+      onWorkClick={async (work) => {
+        if (work.base_thread_id) {
+          sessionActions.selectSessionId(work.base_thread_id);
+          uiActions.setActiveTab(0);
+          await loadThreadMessages(work.base_thread_id);
+        }
+      }}
+      onProjectClick={(project) => {
+        projectActions.selectProject(project);
+        projectActions.setView('conversation');
+        uiActions.setActiveTab(2);
+      }}
+      onShowMoreProjects={() => {
+        uiActions.setActiveTab(2);
+        projectActions.setView('list');
+      }}
+      onNewProject={() => {
+        uiActions.setActiveTab(2);
+        projectActions.setView('create');
+      }}
+      onToggleSidebar={uiState.isExpanded ? undefined : () => uiActions.setSidebarOpen(false)}
+      t={t} />
+  );
+
+  const handleWorkNavigation = (work: Work | null) => {
+    worksActions.selectWork(work);
+    uiActions.setRightSidebarView(work ? 'detail' : 'list');
+  };
+
+  // Inline mode: render directly without Dialog wrapper
+  if (isInlineMode) {
+    return (
+      <>
+        <InlineView
+          ref={ref as Ref<HTMLDivElement>}
+          open={open}
+          onOpenChange={onOpenChange}
+          messages={messages}
+          isLoading={isLoading}
+          input={input}
+          onInputChange={handleInputChange}
+          onSendMessage={handleSendMessage}
+          onStop={stop}
+          title={agentDetails?.name ?? title}
+          description={description}
+          welcomeMessage={agentDetails?.welcomeMessage}
+          isLoadingAgent={isLoadingAgentDetails}
+          logo={agentDetails?.logo ?? logo}
+          placeholder={placeholder}
+          footerText={footerText}
+          className={className}
+          userPhoto={userPhoto}
+          userDisplayName={userDisplayName}
+          enableSidebar={isInlineFullscreen ? true : enableSidebar}
+          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={handleMicrophoneClick}
+          isSidebarOpen={uiState.isSidebarOpen}
+          onToggleSidebar={() => uiActions.setSidebarOpen(!uiState.isSidebarOpen)}
+          renderSidebar={renderSidebarContent}
+          activeTab={uiState.activeTab}
+          onTabChange={uiActions.setActiveTab}
+          onNewChat={() => {
+            createNewThread();
+            projectActions.setContext(null);
+          }}
+          enableNavDropdown={isInlineFullscreen ? false : enableNavDropdown}
+          isFullscreen={isInlineFullscreen}
+          onExpand={hideExpand ? undefined : handleExpand}
+          renderThreadHeader={sessionState.selectedSession && sessionState.selectedSession.id === sessionState.selectedSessionId ? () => (
+            <ThreadHeaderInline
+              session={sessionState.selectedSession!}
+              projects={projectState.projects}
+              projectContext={projectState.projectContext}
+              isFullscreen={isInlineFullscreen}
+              onSaveTitle={async (newTitle) => {
+                await updateSessionApi(
+                  apiClient,
+                  { ...sessionState, name: newTitle },
+                  sessionActions,
+                  fetchThreads,
+                  fetchProjectThreads,
+                  projectState.projectContext?.id || null,
+                  projectState.selectedProject?.id || null,
+                  t
+                );
+                sessionActions.updateSession({ ...sessionState.selectedSession!, title: newTitle });
+              }}
+              onDelete={() => sessionActions.setDeleteDialogOpen(true)}
+              onArchive={async () => {
+                try {
+                  await apiClient.patch(
+                    `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
+                    { archived: true }
+                  );
+                  sessionActions.removeSession(sessionState.selectedSession!.id);
+                  sessionActions.selectSession(null);
+                  sessionActions.selectSessionId(null);
+                  toast.success(t('toast.session_archived_success'));
+                } catch {
+                  toast.error(t('toast.failed_archive_session'));
+                }
+              }}
+              onMoveToProject={async (projectId) => {
+                try {
+                  await apiClient.patch(
+                    `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
+                    { tenant_ai_project_id: projectId }
+                  );
+                  sessionActions.removeSession(sessionState.selectedSession!.id);
+                  sessionActions.selectSession(null);
+                  sessionActions.selectSessionId(null);
+                  toast.success(t('toast.session_moved_success'));
+                } catch {
+                  toast.error(t('toast.failed_move_session'));
+                }
+              }}
+              onProjectContextClick={() => {
+                const project = projectState.projects.find(p => p.id === projectState.projectContext!.id);
+
+                if (project) {
+                  projectActions.selectProject(project);
+                  projectActions.setView('conversation');
+                  uiActions.setActiveTab(2);
+                  projectActions.setContext(null);
+                }
+              }}
+              t={t} />
+          ) : undefined}
+          renderSessionsView={() => (
+            <SessionsListView
+              sessions={sessionState.sessions}
+              filteredSessions={filteredSessions}
+              searchQuery={sessionState.searchQuery}
+              onSearchChange={sessionActions.setSearchQuery}
+              onNewSession={createNewThread}
+              onSessionClick={handleSessionClick}
+              onEditSession={(session) => {
+                sessionActions.selectSession(session);
+                sessionActions.setName(session.title || '');
+                sessionActions.startEditing();
+              }}
+              onDeleteSession={(session) => {
+                sessionActions.selectSession(session);
+                sessionActions.setDeleteDialogOpen(true);
+              }}
+              t={t} />
+          )}
+          renderProjectsView={() => (
+            projectState.view === 'create' ? (
+              <div className="flex-1 flex flex-col p-6">
+                <div className="flex items-center gap-4 mb-6">
+                  {projectState.projects && projectState.projects.length > 0 && (
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => projectActions.setView('list')}
+                      className="text-muted-foreground cursor-pointer hover:text-foreground">
+                      <ArrowLeft className="w-5 h-5" />
+                    </Button>
+                  )}
+                </div>
+                <div className="max-w-lg mx-auto w-full">
+                  <h1 className="text-2xl font-semibold mb-4 ps-2">{t('dialogs.create_project')}</h1>
+                  <form onSubmit={handleCreateProject} className="grid grid-cols-1 gap-4">
+                    <div>
+                      <label className="text-sm ps-2 mb-1 block font-base">
+                        {t('placeholders.what_are_you_working')}
+                      </label>
+                      <Input
+                        value={projectState.form.name}
+                        onChange={(e: ChangeEvent<HTMLInputElement>) => projectActions.setForm({ ...projectState.form, name: e.target.value })}
+                        className="border border-border-300 hover:border-border-200 transition-colors font-large h-11 px-3 rounded-[0.6rem] w-full"
+                        placeholder={t('placeholders.name_your_project')}
+                        required />
+                    </div>
+                    <div>
+                      <label className="text-sm ps-2 mb-1 block font-base">
+                        {t('placeholders.what_are_you_trying')}
+                      </label>
+                      <Textarea
+                        value={projectState.form.description}
+                        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => projectActions.setForm({ ...projectState.form, description: e.target.value })}
+                        className="border border-border-300 min-h-25 resize-none p-2 hover:border-border-200 transition-colors font-large px-3 rounded-[0.6rem] w-full"
+                        placeholder={t('placeholders.describe_project')} />
+                    </div>
+                    <div className="mt-2 flex justify-end gap-2">
+                      <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => projectActions.setView('list')}>
+                        {t('buttons.cancel')}
+                      </Button>
+                      <Button
+                        type="submit"
+                        disabled={projectState.isCreating || !projectState.form.name.trim()}>
+                        {projectState.isCreating ? t('buttons.creating') : t('buttons.create_project')}
+                      </Button>
+                    </div>
+                  </form>
+                </div>
+              </div>
+            ) : projectState.view === 'conversation' && projectState.selectedProject ? (
+              <AssistantProjectDetailView
+                project={projectState.selectedProject}
+                projectThreads={projectState.projectThreads}
+                projectWorks={projectState.projectWorks}
+                onBack={() => projectActions.setView('list')}
+                onEditInstructions={(instructions) => {
+                  projectActions.setInstructions(instructions);
+                  projectActions.startEditingInstructions();
+                }}
+                onProjectMessage={handleProjectMessage}
+                onThreadClick={(thread) => {
+                  sessionActions.selectSessionId(thread.id);
+                  sessionActions.selectSession(thread);
+                  projectActions.setContext({
+                    name: projectState.selectedProject!.name,
+                    id: projectState.selectedProject!.id,
+                    message: thread.title || 'Untitled'
+                  });
+                  loadThreadMessages(thread.id);
+                  uiActions.setActiveTab(0);
+                }}
+                onEditSession={(thread) => {
+                  sessionActions.selectSession(thread);
+                  sessionActions.setName(thread.title || '');
+                  sessionActions.startEditing();
+                }}
+                onDeleteSession={(thread) => {
+                  sessionActions.selectSession(thread);
+                  sessionActions.setDeleteDialogOpen(true);
+                }}
+                input={input}
+                onChange={handleInputChange}
+                isLoading={isLoading}
+                supportFiles={supportFiles}
+                supportWebSearch={supportWebSearch}
+                supportDocumentSearch={supportDocumentSearch}
+                supportDeepResearch={supportDeepResearch}
+                supportThinking={supportThinking}
+                supportWorkCanvas={supportWorkCanvas}
+                supportMultiModels={supportMultiModels}
+                deploymentId={deploymentId}
+                enableMicrophone={enableMicrophone}
+                enableVoice={enableVoice}
+                isRecording={isRecording}
+                recognition={recognition}
+                onMicrophoneClick={handleMicrophoneClick} />
+            ) : (
+              <AssistantProjectsPanel
+                projects={projectState.projects}
+                searchQuery={projectSearchQuery}
+                onSearchChange={setProjectSearchQuery}
+                onNewProject={() => projectActions.setView('create')}
+                onProjectClick={(project) => {
+                  projectActions.selectProject(project);
+                  projectActions.setView('conversation');
+                }}
+                onEditProject={(project) => {
+                  projectActions.selectProject(project);
+                  projectActions.setName(project.name || '');
+                  projectActions.setDescription(project.description || '');
+                  projectActions.startEditing();
+                }}
+                onDeleteProject={(project) => {
+                  projectActions.selectProject(project);
+                  projectActions.setDeleteDialogOpen(true);
+                }}
+                compact={enableNavDropdown}
+                t={t} />
+            )
+          )}
+          renderMemoriesView={() => <MemoriesPanel t={t} />}
+          renderWorksView={() => (
+            worksState.detailViewWork ? (
+              <div className="flex-1 flex flex-col overflow-y-auto">
+                <AssistantWorkDetailView
+                  work={worksState.detailViewWork}
+                  onClose={() => worksActions.setDetailViewWork(null)}
+                  onBack={() => worksActions.setDetailViewWork(null)} />
+              </div>
+            ) : (
+              <div className="flex-1 flex flex-col overflow-y-auto p-6">
+                {/* Header */}
+                <div className="flex items-center justify-between mb-6">
+                  <div className="flex flex-col min-w-0">
+                    <h1 className="text-2xl font-semibold ps-2">{t('tabs.works')}</h1>
+                    <div className="text-sm text-muted-foreground ps-2">{t('descriptions.manage_works')}</div>
+                  </div>
+                  <Button size="sm" className="shrink-0">
+                    <Plus className="w-4 h-4" />
+                    {t('buttons.new_work')}
+                  </Button>
+                </div>
+
+                {/* Search */}
+                <div className="flex items-center gap-4 mb-6">
+                  <div className="relative flex-1">
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                    <Input
+                      type="text"
+                      placeholder={t('placeholders.search_works')}
+                      value={worksState.searchQuery}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => worksActions.setSearchQuery(e.target.value)}
+                      className="pl-10 pr-4 py-2 w-full border border-border rounded-lg focus:outline-none" />
+                  </div>
+                </div>
+
+                {/* Works Tabs */}
+                <Tabs value={worksState.tabValue} onValueChange={worksActions.setTabValue}>
+                  <TabsList className="mb-4 p-1">
+                    <TabsTrigger className="py-2" value="1">
+                      {t('tabs.my_works')}
+                    </TabsTrigger>
+                    <TabsTrigger className="py-2" value="2">
+                      {t('tabs.shared_to_me')}
+                    </TabsTrigger>
+                    <TabsTrigger className="py-2" value="3">
+                      {t('tabs.library')}
+                    </TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="1">
+                    {worksState.works.length === 0 ? (
+                      <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_start')}</div>
+                    ) : (
+                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                        {worksState.works
+                          .filter(
+                            work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                              || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                          )
+                          .map(work => (
+                            <WorkCard
+                              key={work.id}
+                              work={work}
+                              onClick={async () => {
+                                if (work.base_thread_id) {
+                                  sessionActions.selectSessionId(work.base_thread_id);
+                                  uiActions.setActiveTab(0);
+                                  await loadThreadMessages(work.base_thread_id);
+                                }
+                              }}
+                              t={t} />
+                          ))}
+                      </div>
+                    )}
+                  </TabsContent>
+                  <TabsContent value="2">
+                    {(() => {
+                      const sharedWorks = worksState.works.filter(
+                        work => work.shared_to
+                          && Array.isArray(work.shared_to)
+                          && currentUserId
+                          && work.shared_to.includes(currentUserId)
+                      );
+
+                      return sharedWorks.length === 0 ? (
+                        <div className="text-center py-8 text-muted-foreground">
+                          {t('messages.no_works_shared')}
+                        </div>
+                      ) : (
+                        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                          {worksState.works
+                            .filter((work) => {
+                              const isSharedToMe
+                                = work.shared_to
+                                  && Array.isArray(work.shared_to)
+                                  && currentUserId
+                                  && work.shared_to.includes(currentUserId);
+                              const matchesSearch
+                                = work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                                  || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase());
+
+                              return isSharedToMe && matchesSearch;
+                            })
+                            .map(work => (
+                              <WorkCard
+                                key={work.id}
+                                work={work}
+                                onClick={async () => {
+                                  if (work.base_thread_id) {
+                                    sessionActions.selectSessionId(work.base_thread_id);
+                                    uiActions.setActiveTab(0);
+                                    await loadThreadMessages(work.base_thread_id);
+                                  }
+                                }}
+                                t={t} />
+                            ))}
+                        </div>
+                      );
+                    })()}
+                  </TabsContent>
+                  <TabsContent value="3">
+                    {worksState.works.length === 0 ? (
+                      <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_found')}</div>
+                    ) : (
+                      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                        {worksState.works
+                          .filter(
+                            work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                              || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                          )
+                          .map(work => (
+                            <WorkCard
+                              key={work.id}
+                              work={work}
+                              onClick={() => worksActions.setDetailViewWork(work)}
+                              t={t} />
+                          ))}
+                      </div>
+                    )}
+                  </TabsContent>
+                </Tabs>
+              </div>
+            )
+          )}
+          onToolAction={handleToolAction}
+          threadId={sessionState.selectedSessionId ?? undefined}
+          agentSelectorUrl={agentSelectorUrl}
+          baseAgentSelectorUrl={baseAgentSelectorUrl}
+          onAgentChange={(agentId, agentType) => {
+            createNewThread();
+            onAgentChange?.(agentId, agentType);
+          }}
+          t={t} />
+        <AssistantDialogs
+          projectState={projectState}
+          projectActions={projectActions}
+          sessionState={sessionState}
+          sessionActions={sessionActions}
+          onUpdateProject={updateProject}
+          onDeleteProject={deleteProject}
+          onUpdateSession={updateSession}
+          onDeleteSession={deleteSession}
+          onUpdateProjectInstructions={updateProjectInstructions}
+          t={t} />
+      </>
+    );
+  }
+
+  // Modal mode: render with Dialog wrapper (original implementation)
+  return (
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogTitle className="sr-only">DocyAssistant</DialogTitle>
+        <DialogContent
+          className={cn(getDialogClassName({ isExpanded: uiState.isExpanded, isDocked: uiState.isDocked }), className, '@container')}
+          data-docked={uiState.isDocked}
+          data-expanded={uiState.isExpanded}
+          data-container-query="true"
+          showCloseButton={!uiState.isRightSidebarOpen}
+          style={{
+            position: 'fixed',
+            ...(uiState.isExpanded && {
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: '100vw',
+              height: '100vh',
+              transform: 'none',
+              maxWidth: 'none',
+              maxHeight: 'none'
+            }),
+            ...(uiState.isDocked && {
+              top: 0,
+              left: 0,
+              width: '700px',
+              height: '100vh',
+              transform: 'none',
+              maxWidth: 'none',
+              maxHeight: 'none'
+            })
+          }}
+          {...props}
+          ref={ref}>
+          {/* Floating Sidebar with Overlay - shown only when container < 3xl */}
+          {enableSidebar && uiState.isSidebarOpen && (
+            <>
+              {/* Background Mask */}
+              <div
+                className={cn(
+                  'absolute inset-0 bg-black/30 z-99',
+                  // Show only when container is smaller than 3xl
+                  '@3xl:hidden'
+                )}
+                onClick={() => uiActions.setSidebarOpen(false)} />
+
+              {/* Floating Sidebar */}
+              <div
+                className={cn(
+                  'absolute left-0 top-0 h-full w-72 rounded-lg z-100 shadow-xl',
+                  // Show floating sidebar when container is smaller than 3xl
+                  '@3xl:hidden'
+                )}
+                onMouseLeave={() => {
+                  // Auto-close when mouse leaves sidebar (not in fullscreen/expanded mode)
+                  if (uiState.isExpanded) return;
+                  if (sidebarCloseTimeoutRef.current) {
+                    clearTimeout(sidebarCloseTimeoutRef.current);
+                  }
+                  sidebarCloseTimeoutRef.current = setTimeout(() => {
+                    uiActions.setSidebarOpen(false);
+                  }, 300);
+                }}
+                onMouseEnter={() => {
+                  // Clear any pending close timeout when mouse enters
+                  if (sidebarCloseTimeoutRef.current) {
+                    clearTimeout(sidebarCloseTimeoutRef.current);
+                    sidebarCloseTimeoutRef.current = null;
+                  }
+                }}>
+                <div className="w-full h-full flex flex-col">
+                  {/* Header with Close Button */}
+                  <div className="flex items-center justify-end h-10 px-2 border-b">
+                    {/* Close Button */}
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => uiActions.setSidebarOpen(false)}
+                      className="h-8 w-8 text-muted-foreground hover:text-foreground">
+                      <X className="w-4 h-4" />
+                    </Button>
+                  </div>
+
+                  <div className="flex-1 p-4 flex flex-col min-h-0">
+                    {renderSidebarContent()}
+                  </div>
+                </div>
+              </div>
+            </>
+          )}
+
+          <div className={getContainerClassName({ isExpanded: uiState.isExpanded, isDocked: uiState.isDocked })}>
+            {/* Top Left Controls - Sidebar Toggle & New Thread */}
+            {enableSidebar && (
+              <div className="absolute z-10 top-2.5 left-3 flex items-center gap-2">
+                {/* Sidebar Toggle */}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => uiActions.setSidebarOpen(!uiState.isSidebarOpen)}
+                  data-sidebar-open={uiState.isSidebarOpen}
+                  className={cn(
+                    'h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-all duration-300',
+                    // Hide button when sidebar is open
+                    uiState.isSidebarOpen && 'opacity-0 pointer-events-none'
+                  )}>
+                  <PanelLeft
+                    className={cn(
+                      'w-5 h-5 transition-transform duration-300',
+                      uiState.isSidebarOpen && 'scale-x-[-1]'
+                    )} />
+                </Button>
+
+                {/* New Thread Button */}
+                {!uiState.isSidebarOpen && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={createNewThread}
+                    className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-all duration-300"
+                    title={t('buttons.start_new_thread')}>
+                    <Edit className="w-5 h-5" />
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {/* Top Right Controls - Dock & Expand */}
+            {!uiState.isRightSidebarOpen && (
+              <div className="absolute top-2 right-12 flex items-center gap-2 z-50">
+                {!uiState.isExpanded && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
+                    onClick={handleDockLeft}
+                    title={uiState.isDocked ? t('actions.undock') : t('actions.dock_left')}>
+                    {uiState.isDocked ? <ArrowRight className="w-5 h-5" /> : <ArrowLeft className="w-5 h-5" />}
+                  </Button>
+                )}
+
+                {!uiState.isDocked && (
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground hover:bg-accent hover:text-accent-foreground rounded-md transition-colors"
+                    onClick={handleExpand}
+                    title={uiState.isExpanded ? t('actions.minimize') : t('actions.expand')}>
+                    {uiState.isExpanded ? <Minimize2 className="w-5 h-5" /> : <Maximize2 className="w-5 h-5" />}
+                  </Button>
+                )}
+              </div>
+            )}
+
+            {/* Inline Sidebar - shown only when container >= 3xl */}
+            {enableSidebar && (
+              <div
+                className={cn(
+                  'relative flex-none transition-all duration-300',
+                  // Show inline sidebar when container is 3xl or larger (48rem/768px)
+                  'hidden @3xl:block',
+                  uiState.isSidebarOpen ? 'w-72' : 'w-0 overflow-hidden'
+                )}>
+                <div className="w-72 h-full flex flex-col">
+                  <div className="flex-1 p-4 flex flex-col min-h-0">
+                    {renderSidebarContent()}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Main Content Area */}
+            <div className={cn('flex-1 flex flex-col bg-background', uiState.isDocked ? 'min-w-0' : 'min-w-96')}>
+              {/* Conditionally render content based on activeTab */}
+              {uiState.activeTab === 1 ? (
+                <SessionsListView
+                  sessions={sessionState.sessions}
+                  filteredSessions={filteredSessions}
+                  searchQuery={sessionState.searchQuery}
+                  onSearchChange={sessionActions.setSearchQuery}
+                  onNewSession={createNewThread}
+                  onSessionClick={handleSessionClick}
+                  onEditSession={(session) => {
+                    sessionActions.selectSession(session);
+                    sessionActions.setName(session.title || '');
+                    sessionActions.startEditing();
+                  }}
+                  onDeleteSession={(session) => {
+                    sessionActions.selectSession(session);
+                    sessionActions.setDeleteDialogOpen(true);
+                  }}
+                  t={t} />
+              ) : uiState.activeTab === 2 ? (
+              /* Projects View */
+                projectState.view === 'list' ? (
+                  <AssistantProjectsPanel
+                    projects={projectState.projects}
+                    searchQuery={projectSearchQuery}
+                    onSearchChange={setProjectSearchQuery}
+                    onNewProject={() => projectActions.setView('create')}
+                    onProjectClick={(project) => {
+                      projectActions.selectProject(project);
+                      projectActions.setView('conversation');
+                    }}
+                    onEditProject={(project) => {
+                      projectActions.selectProject(project);
+                      projectActions.setName(project.name || '');
+                      projectActions.setDescription(project.description || '');
+                      projectActions.startEditing();
+                    }}
+                    onDeleteProject={(project) => {
+                      projectActions.selectProject(project);
+                      projectActions.setDeleteDialogOpen(true);
+                    }}
+                    compact={enableNavDropdown}
+                    t={t} />
+                ) : projectState.view === 'create' ? (
+                /* Create Project Form */
+                  <div className="flex-1 flex flex-col p-6">
+                    {/* Header with Back Button */}
+                    <div className="flex items-center gap-4 mb-6">
+                      {projectState.projects && projectState.projects.length > 0 && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => projectActions.setView('list')}
+                          className="text-muted-foreground cursor-pointer hover:text-foreground">
+                          <ArrowLeft className="w-5 h-5" />
+                        </Button>
+                      )}
+                    </div>
+
+                    <div className="max-w-lg mx-auto w-full">
+                      <h1 className="text-2xl font-semibold mb-4 ps-2">{t('dialogs.create_project')}</h1>
+                      <form onSubmit={handleCreateProject} className="grid grid-cols-1 gap-4">
+                        <div>
+                          <label className="text-sm ps-2 mb-1 block font-base">
+                            {t('placeholders.what_are_you_working')}
+                          </label>
+                          <Input
+                            value={projectState.form.name}
+                            onChange={(e: ChangeEvent<HTMLInputElement>) => projectActions.setForm({ ...projectState.form, name: e.target.value })}
+                            className="border border-border-300 hover:border-border-200 transition-colors font-large h-11 px-3 rounded-[0.6rem] w-full"
+                            placeholder={t('placeholders.name_your_project')}
+                            required />
+                        </div>
+
+                        <div>
+                          <label className="text-sm ps-2 mb-1 block font-base">
+                            {t('placeholders.what_are_you_trying')}
+                          </label>
+                          <Textarea
+                            value={projectState.form.description}
+                            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => projectActions.setForm({ ...projectState.form, description: e.target.value })}
+                            className="border border-border-300 min-h-25 resize-none p-2 hover:border-border-200 transition-colors font-large px-3 rounded-[0.6rem] w-full"
+                            placeholder={t('placeholders.describe_project')} />
+                        </div>
+
+                        <div className="mt-2 flex justify-end gap-2">
+                          <Button
+                            type="button"
+                            variant="outline"
+                            onClick={() => projectActions.setView('list')}>
+                            {t('buttons.cancel')}
+                          </Button>
+                          <Button
+                            type="submit"
+                            disabled={projectState.isCreating || !projectState.form.name.trim()}>
+                            {projectState.isCreating ? t('buttons.creating') : t('buttons.create_project')}
+                          </Button>
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                ) : (
+                /* Project Conversation View */
+                  projectState.selectedProject && (
+                    <AssistantProjectDetailView
+                      project={projectState.selectedProject}
+                      projectThreads={projectState.projectThreads}
+                      projectWorks={projectState.projectWorks}
+                      onBack={() => projectActions.setView('list')}
+                      onEditInstructions={(instructions) => {
+                        projectActions.setInstructions(instructions);
+                        projectActions.startEditingInstructions();
+                      }}
+                      onProjectMessage={handleProjectMessage}
+                      onThreadClick={(thread) => {
+                        sessionActions.selectSessionId(thread.id);
+                        sessionActions.selectSession(thread);
+                        projectActions.setContext({
+                          name: projectState.selectedProject!.name,
+                          id: projectState.selectedProject!.id,
+                          message: thread.title || 'Untitled'
+                        });
+                        loadThreadMessages(thread.id);
+                        uiActions.setActiveTab(0); // Switch to Home tab
+                      }}
+                      onEditSession={(thread) => {
+                        sessionActions.selectSession(thread);
+                        sessionActions.setName(thread.title || '');
+                        sessionActions.startEditing();
+                      }}
+                      onDeleteSession={(thread) => {
+                        sessionActions.selectSession(thread);
+                        sessionActions.setDeleteDialogOpen(true);
+                      }}
+                      input={input}
+                      onChange={handleInputChange}
+                      isLoading={isLoading}
+                      supportFiles={supportFiles}
+                      supportWebSearch={supportWebSearch}
+                      supportDocumentSearch={supportDocumentSearch}
+                      supportDeepResearch={supportDeepResearch}
+                      supportThinking={supportThinking}
+                      supportWorkCanvas={supportWorkCanvas}
+                      supportMultiModels={supportMultiModels}
+                      deploymentId={deploymentId}
+                      enableMicrophone={enableMicrophone}
+                      enableVoice={enableVoice}
+                      isRecording={isRecording}
+                      recognition={recognition}
+                      onMicrophoneClick={handleMicrophoneClick} />
+                  )
+                )
+              ) : uiState.activeTab === 3 ? (
+              /* Works View */
+                worksState.detailViewWork ? (
+                /* Work Detail View */
+                  <div className="flex-1 flex flex-col overflow-y-auto">
+                    <AssistantWorkDetailView
+                      work={worksState.detailViewWork}
+                      onClose={() => worksActions.setDetailViewWork(null)}
+                      onBack={() => worksActions.setDetailViewWork(null)} />
+                  </div>
+                ) : (
+                  <div className="flex-1 flex flex-col overflow-y-auto p-6">
+                    {/* Header */}
+                    <div className="flex items-center justify-between mb-6">
+                      <div className="flex flex-col min-w-0">
+                        <h1 className="text-2xl font-semibold ps-2">{t('tabs.works')}</h1>
+                        <div className="text-sm text-muted-foreground ps-2">{t('descriptions.manage_works')}</div>
+                      </div>
+                      <Button size="sm" className="shrink-0">
+                        <Plus className="w-4 h-4" />
+                        {t('buttons.new_work')}
+                      </Button>
+                    </div>
+
+                    {/* Search */}
+                    <div className="flex items-center gap-4 mb-6">
+                      <div className="relative flex-1">
+                        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                        <Input
+                          type="text"
+                          placeholder={t('placeholders.search_works')}
+                          value={worksState.searchQuery}
+                          onChange={(e: ChangeEvent<HTMLInputElement>) => worksActions.setSearchQuery(e.target.value)}
+                          className="pl-10 pr-4 py-2 w-full border border-border rounded-lg focus:outline-none" />
+                      </div>
+                    </div>
+
+                    {/* Works Tabs */}
+                    <Tabs value={worksState.tabValue} onValueChange={worksActions.setTabValue}>
+                      <TabsList className="mb-4 p-1">
+                        <TabsTrigger className="py-2" value="1">
+                          {t('tabs.my_works')}
+                        </TabsTrigger>
+                        <TabsTrigger className="py-2" value="2">
+                          {t('tabs.shared_to_me')}
+                        </TabsTrigger>
+                        <TabsTrigger className="py-2" value="3">
+                          {t('tabs.library')}
+                        </TabsTrigger>
+                      </TabsList>
+                      <TabsContent value="1">
+                        {worksState.works.length === 0 ? (
+                          <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_start')}</div>
+                        ) : (
+                          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                            {worksState.works
+                              .filter(
+                                work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                                  || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                              )
+                              .map(work => (
+                                <WorkCard
+                                  key={work.id}
+                                  work={work}
+                                  onClick={async () => {
+                                    if (work.base_thread_id) {
+                                      sessionActions.selectSessionId(work.base_thread_id);
+                                      uiActions.setActiveTab(0);
+                                      await loadThreadMessages(work.base_thread_id);
+                                    }
+                                  }}
+                                  t={t} />
+                              ))}
+                          </div>
+                        )}
+                      </TabsContent>
+                      <TabsContent value="2">
+                        {(() => {
+                          const sharedWorks = worksState.works.filter(
+                            work => work.shared_to
+                              && Array.isArray(work.shared_to)
+                              && currentUserId
+                              && work.shared_to.includes(currentUserId)
+                          );
+
+                          return sharedWorks.length === 0 ? (
+                            <div className="text-center py-8 text-muted-foreground">
+                              {t('messages.no_works_shared')}
+                            </div>
+                          ) : (
+                            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                              {worksState.works
+                                .filter((work) => {
+                                  // Filter by shared_to field containing current user ID
+                                  const isSharedToMe
+                                    = work.shared_to
+                                      && Array.isArray(work.shared_to)
+                                      && currentUserId
+                                      && work.shared_to.includes(currentUserId);
+                                    // Also filter by search query
+                                  const matchesSearch
+                                    = work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                                      || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase());
+
+                                  return isSharedToMe && matchesSearch;
+                                })
+                                .map(work => (
+                                  <WorkCard
+                                    key={work.id}
+                                    work={work}
+                                    onClick={async () => {
+                                      if (work.base_thread_id) {
+                                        sessionActions.selectSessionId(work.base_thread_id);
+                                        uiActions.setActiveTab(0);
+                                        await loadThreadMessages(work.base_thread_id);
+                                      }
+                                    }}
+                                    t={t} />
+                                ))}
+                            </div>
+                          );
+                        })()}
+                      </TabsContent>
+                      <TabsContent value="3">
+                        {worksState.works.length === 0 ? (
+                          <div className="text-center py-8 text-muted-foreground">{t('messages.no_works_found')}</div>
+                        ) : (
+                          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                            {worksState.works
+                              .filter(
+                                work => work.title.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                                  || work.content_text?.toLowerCase().includes(worksState.searchQuery.toLowerCase())
+                              )
+                              .map(work => (
+                                <WorkCard
+                                  key={work.id}
+                                  work={work}
+                                  onClick={() => worksActions.setDetailViewWork(work)}
+                                  t={t} />
+                              ))}
+                          </div>
+                        )}
+                      </TabsContent>
+                    </Tabs>
+                  </div>
+                )
+              ) : uiState.activeTab === 4 ? (
+              /* Memories View */
+                <MemoriesPanel t={t} />
+              ) : (
+                <>
+                  {sessionState.selectedSession && sessionState.selectedSession.id === sessionState.selectedSessionId && (
+                    <ThreadHeaderInline
+                      session={sessionState.selectedSession}
+                      projects={projectState.projects}
+                      projectContext={projectState.projectContext}
+                      onSaveTitle={async (newTitle) => {
+                        await updateSessionApi(
+                          apiClient,
+                          { ...sessionState, name: newTitle },
+                          sessionActions,
+                          fetchThreads,
+                          fetchProjectThreads,
+                          projectState.projectContext?.id || null,
+                          projectState.selectedProject?.id || null,
+                          t
+                        );
+                        sessionActions.updateSession({ ...sessionState.selectedSession!, title: newTitle });
+                      }}
+                      onDelete={() => sessionActions.setDeleteDialogOpen(true)}
+                      onArchive={async () => {
+                        try {
+                          await apiClient.patch(
+                            `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
+                            { archived: true }
+                          );
+                          sessionActions.removeSession(sessionState.selectedSession!.id);
+                          sessionActions.selectSession(null);
+                          sessionActions.selectSessionId(null);
+                          toast.success(t('toast.session_archived_success'));
+                        } catch {
+                          toast.error(t('toast.failed_archive_session'));
+                        }
+                      }}
+                      onMoveToProject={async (projectId) => {
+                        try {
+                          await apiClient.patch(
+                            `/apps/base/data-sources/thread/items/${sessionState.selectedSession!.id}`,
+                            { tenant_ai_project_id: projectId }
+                          );
+                          sessionActions.removeSession(sessionState.selectedSession!.id);
+                          sessionActions.selectSession(null);
+                          sessionActions.selectSessionId(null);
+                          toast.success(t('toast.session_moved_success'));
+                        } catch {
+                          toast.error(t('toast.failed_move_session'));
+                        }
+                      }}
+                      onProjectContextClick={() => {
+                        const project = projectState.projects.find(p => p.id === projectState.projectContext!.id);
+
+                        if (project) {
+                          projectActions.selectProject(project);
+                          projectActions.setView('conversation');
+                          uiActions.setActiveTab(2);
+                          projectActions.setContext(null);
+                        }
+                      }}
+                      t={t} />
+                  )}
+                  <ConversationView
+                    messages={messages}
+                    isLoading={isLoading}
+                    input={input}
+                    onInputChange={handleInputChange}
+                    onSendMessage={handleSendMessage}
+                    onStop={stop}
+                    logo={logo}
+                    userPhoto={userPhoto}
+                    userDisplayName={userDisplayName}
+                    description={description}
+                    title={agentDetails?.name ?? title}
+                    welcomeMessage={agentDetails?.welcomeMessage}
+                    isLoadingAgent={isLoadingAgentDetails}
+                    placeholder={placeholder}
+                    footerText={footerText}
+                    onWorkSelect={(work) => {
+                      worksActions.updateWork(work);
+                      worksActions.selectWork(work);
+                    }}
+                    onOpenRightSidebar={() => {
+                      uiActions.setRightSidebarOpen(true);
+                      uiActions.setRightSidebarView('detail');
+                    }}
+                    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={handleMicrophoneClick}
+                    onToolAction={handleToolAction}
+                    threadId={sessionState.selectedSessionId ?? undefined} />
+                </>
+              )}
+            </div>
+
+            {/* Floating Right Sidebar with Overlay - shown only when container < 3xl */}
+            {uiState.isRightSidebarOpen && (
+              <>
+                {/* Background Mask */}
+                <div
+                  className={cn(
+                    'absolute inset-0 bg-black/30 z-99',
+                    // Show only when container is smaller than 3xl
+                    '@3xl:hidden'
+                  )}
+                  onClick={() => uiActions.setRightSidebarOpen(false)} />
+
+                {/* Floating Right Sidebar */}
+                <div
+                  className={cn(
+                    'absolute right-0 top-0 h-full w-80 rounded-lg bg-card z-100 shadow-xl',
+                    // Show floating sidebar when container is smaller than 3xl
+                    '@3xl:hidden'
+                  )}
+                  onMouseLeave={() => {
+                    // Auto-close when mouse leaves sidebar
+                    if (rightSidebarCloseTimeoutRef.current) {
+                      clearTimeout(rightSidebarCloseTimeoutRef.current);
+                    }
+                    rightSidebarCloseTimeoutRef.current = setTimeout(() => {
+                      uiActions.setRightSidebarOpen(false);
+                    }, 300);
+                  }}
+                  onMouseEnter={() => {
+                    // Clear any pending close timeout when mouse enters
+                    if (rightSidebarCloseTimeoutRef.current) {
+                      clearTimeout(rightSidebarCloseTimeoutRef.current);
+                      rightSidebarCloseTimeoutRef.current = null;
+                    }
+                  }}>
+                  <AssistantCanvasView
+                    works={worksState.works}
+                    selectedWork={worksState.selectedWork}
+                    rightSidebarView={uiState.rightSidebarView}
+                    onWorkSelect={handleWorkNavigation}
+                    onBackToList={() => handleWorkNavigation(null)}
+                    onClose={() => uiActions.setRightSidebarOpen(false)} />
+                </div>
+              </>
+            )}
+
+            {/* Inline Right Sidebar - shown only when container >= 3xl */}
+            <div
+              className={cn(
+                'relative bg-card flex-none transition-all duration-300 border-l',
+                // Show inline sidebar when container is 3xl or larger
+                'hidden @3xl:block',
+                uiState.isRightSidebarOpen ? 'w-80' : 'w-0 overflow-hidden'
+              )}>
+              <AssistantCanvasView
+                works={worksState.works}
+                selectedWork={worksState.selectedWork}
+                rightSidebarView={uiState.rightSidebarView}
+                onWorkSelect={handleWorkNavigation}
+                onBackToList={() => handleWorkNavigation(null)}
+                onClose={() => uiActions.setRightSidebarOpen(false)} />
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* CRUD Dialogs */}
+      <AssistantDialogs
+        projectState={projectState}
+        projectActions={projectActions}
+        sessionState={sessionState}
+        sessionActions={sessionActions}
+        onUpdateProject={updateProject}
+        onDeleteProject={deleteProject}
+        onUpdateSession={updateSession}
+        onDeleteSession={deleteSession}
+        onUpdateProjectInstructions={updateProjectInstructions}
+        t={t} />
+
+    </>
+  );
+};