@messenger-box/tailwind-ui-inbox 10.0.3-alpha.0

package/lib/components/AIAgent/AIAgent.js

@@ -0,0 +1,1135 @@
+import React__default,{useState,useRef,useEffect,useCallback,useMemo}from'react';import {useMachine}from'@xstate/react';import {aiAgentMachine}from'../../machines/aiAgentMachine.simple.js';import {InputComponent}from'./InputComponent.js';import {isToday,isYesterday,format}from'date-fns';import {useTranslation}from'react-i18next';import {ModernMessageGroupComponent}from'../InboxMessage/message-widgets/ModernMessageGroup.js';import {useUploadFiles}from'@messenger-box/platform-client';import {AiAgentMessageRole,PostTypeEnum,RoomType}from'common';import {useSelector,shallowEqual}from'react-redux';import {userSelector}from'@adminide-stack/user-auth0-client';import {objectId}from'@messenger-box/core';import {useApolloClient}from'@apollo/client/index.js';import {useSendMessagesMutation,useCreateChannelWorkflowJobMutation,useMessagesQuery,MessagesDocument,OnChatMessageAddedDocument}from'common/graphql';import {uniqBy,orderBy}from'lodash-es';import {useParams,useNavigate}from'@remix-run/react';import {SubscriptionHandler}from'../InboxMessage/SubscriptionHandler.js';import {usePersistentModelConfig}from'../../hooks/usePersistentModelConfig.js';/** Resolver may expose role/fragment on propsConfiguration or legacy props (Mongo shape). */
+const getPostRoleUpper = m => String(m?.propsConfiguration?.contents?.role ?? m?.propsConfiguration?.content?.role ?? m?.props?.role ?? '').toUpperCase();
+const getPostFragment = m => m?.propsConfiguration?.contents?.fragment ?? m?.propsConfiguration?.content?.fragment ?? m?.props?.fragment;
+const isAssistantPost = m => {
+  if (getPostRoleUpper(m) === 'ASSISTANT') return true;
+  const typ = String(m?.type ?? '').toUpperCase();
+  return typ === 'AIASSISTANT' || typ === 'ASSISTANT';
+};
+const isAssistantResponseComplete = fragment => {
+  if (!fragment) return false;
+  if (fragment.isCreatingSandbox === false) return true;
+  if (fragment.isCreatingSandbox === true) return false;
+  const url = fragment.sandboxUrl;
+  if (typeof url === 'string' && url.trim().length > 0) return true;
+  if (fragment.files && typeof fragment.files === 'object' && Object.keys(fragment.files).length > 0) return true;
+  if (typeof fragment.summary === 'string' && fragment.summary.trim().length > 0) return true;
+  if (fragment.isError === true || fragment.type === 'ERROR') return true;
+  if (String(fragment.type ?? '').toUpperCase() === 'RESULT') return true;
+  return false;
+};
+const AIAgent = ({
+  channelId,
+  projectId,
+  onSendMessage,
+  placeholder = 'Ask me anything...',
+  className = '',
+  currentUser,
+  isDesktopView = false,
+  isSmallScreen = false,
+  showDateSeparators = false,
+  setMessages,
+  setSelectedPost,
+  messages,
+  selectedPost,
+  setIsLoading,
+  isLoading,
+  sendMessageInput,
+  isShowOnlyInbox = false,
+  showModeSelector = false,
+  showStopButton = false,
+  onStop,
+  templates,
+  selectedTemplate,
+  suggestedTemplate,
+  onSelectTemplate,
+  templateSelectedLabel,
+  templateModalItems,
+  showTemplateModal,
+  onOpenTemplateModal,
+  onCloseTemplateModal,
+  onSelectTemplateById,
+  onClearTemplate,
+  onAcceptSuggestedTemplate,
+  isAnalyzingQuery,
+  onQueryChange,
+  leftItemsOverrides,
+  rightItemsOverrides,
+  inputToolBarProps
+}) => {
+  const [state, send] = useMachine(aiAgentMachine);
+  const apolloClient = useApolloClient();
+  const {
+    startUpload
+  } = useUploadFiles();
+  const [sendMsg] = useSendMessagesMutation();
+  const [createChannelWorkflowJob] = useCreateChannelWorkflowJobMutation();
+  const auth = useSelector(userSelector, shallowEqual);
+  const {
+    id: pathChannelId
+  } = useParams();
+  const navigate = useNavigate();
+  const {
+    modelConfig,
+    updateModelConfig,
+    getValidatedConfig,
+    hasApiKey
+  } = usePersistentModelConfig();
+  const [postId, setPostId] = useState(null);
+  /** Cleared when the first real assistant message replaces or supersedes the optimistic placeholder */
+  const optimisticAssistantMessageIdRef = useRef(null);
+  const scrollPendingRef = useRef(null);
+  const streamScrollRafRef = useRef(null);
+  const prevLastMessageIdRef = useRef(null);
+  // const [isLoading, setIsLoading] = useState(false);
+  const [errorData, setError] = useState(null);
+  // Get channelId from props or path params
+  const actualChannelId = channelId || pathChannelId;
+  // const { data: chatMessageAddedData } = useOnChatMessageAddedSubscription({
+  //     variables: { channelId: actualChannelId?.toString() || '' },
+  //     skip: !actualChannelId,
+  // });
+  // Subscribe to sandbox errors if projectId is provided
+  // Direct message query from InboxWithAiLoader.tsx
+  const messagesQuery = useMessagesQuery({
+    variables: {
+      channelId: actualChannelId?.toString(),
+      parentId: null,
+      limit: 50
+    },
+    skip: !actualChannelId,
+    fetchPolicy: 'cache-and-network',
+    errorPolicy: 'all',
+    notifyOnNetworkStatusChange: true,
+    returnPartialData: true,
+    pollInterval: 0,
+    context: {
+      cacheKey: 'messages-list'
+    }
+  });
+  // console.log('messagesQuery...', JSON.stringify(messagesQuery?.data?.messages?.data));
+  const {
+    messages: aiMessages,
+    error,
+    isTyping
+  } = state.context;
+  const {
+    t
+  } = useTranslation('translations');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedElement, setSelectedElement] = useState(null);
+  const [activeTab, setActiveTab] = useState('chat');
+  const bottomRef = useRef(null);
+  const [sandboxErrors, setSandboxErrors] = useState([]);
+  const [currentFiles, setCurrentFiles] = useState({});
+  const [canvasLayers, setCanvasLayers] = useState([]);
+  // New state variables for message display control
+  const [isSuccessThinking, setIsSuccessThinking] = useState(false);
+  const successThinkingTimeoutRef = useRef(null);
+  // When showing only inbox, force Chat tab and hide tab switcher UI
+  useEffect(() => {
+    if (isShowOnlyInbox && activeTab !== 'chat') {
+      setActiveTab('chat');
+    }
+  }, [isShowOnlyInbox, activeTab]);
+  // Get regular messages from direct query
+  const {
+    data: messagesData,
+    loading: messageLoading,
+    refetch: refetchMessages,
+    fetchMore: fetchMoreMessages,
+    subscribeToMore
+  } = messagesQuery;
+  useEffect(() => {
+    if (actualChannelId) {
+      refetchMessages({
+        channelId: actualChannelId?.toString(),
+        parentId: null,
+        limit: 50
+      });
+    }
+  }, [actualChannelId, refetchMessages]);
+  // useEffect(() => {
+  //     if (chatMessageAddedData?.chatMessageAdded) {
+  //         console.log(
+  //             'chatMessageAddedData?.chatMessageAdded',
+  //             JSON.stringify(chatMessageAddedData?.chatMessageAdded, null, 2),
+  //         );
+  //         // Stop the success thinking loader once a new message arrives
+  //         if (isSuccessThinking) {
+  //             setIsSuccessThinking(false);
+  //             if (successThinkingTimeoutRef.current) {
+  //                 clearTimeout(successThinkingTimeoutRef.current);
+  //                 successThinkingTimeoutRef.current = null;
+  //             }
+  //         }
+  //         if (isShowOnlyInbox) {
+  //             setIsLoading(false);
+  //         }
+  //     }
+  //     console.log('isShowOnlyInbox', isShowOnlyInbox, ' isLoading', isLoading);
+  // }, [chatMessageAddedData?.chatMessageAdded, isShowOnlyInbox, setIsLoading]);
+  useEffect(() => {
+    if (messagesData?.messages?.data?.length >= 1) {
+      setPostId(messagesData.messages.data[0]?.id);
+    }
+    // console.log('messagesData?.messages?.data',JSON.stringify(messagesData?.messages?.data,null,2))
+  }, [messagesData?.messages?.data]);
+  useEffect(() => {
+    if (sendMessageInput?.postData?.content && sendMessageInput?.postData?.content.trim() !== '') {
+      console.log('sendMessageInput...', JSON.stringify(sendMessageInput?.postData?.content, null, 2));
+      handleSend(sendMessageInput?.postData?.content || '', []);
+    }
+  }, [sendMessageInput?.postData?.content]);
+  // Handle sandbox error subscription updates
+  // Scroll to bottom — cancels any pending scroll so streaming updates do not queue many smooth scrolls
+  const scrollToBottom = useCallback((behavior = 'smooth', delay = 0) => {
+    if (scrollPendingRef.current) {
+      clearTimeout(scrollPendingRef.current);
+      scrollPendingRef.current = null;
+    }
+    scrollPendingRef.current = setTimeout(() => {
+      scrollPendingRef.current = null;
+      if (bottomRef.current) {
+        bottomRef.current.scrollIntoView({
+          behavior,
+          block: 'end',
+          inline: 'nearest'
+        });
+      }
+    }, delay);
+  }, []);
+  const regularMessages = useMemo(() => {
+    if (!messagesData?.messages?.data) return [];
+    const mainMessages = messagesData.messages.data || [];
+    const replyMessages = messagesData.messages.data[0]?.replies?.data || [];
+    const allMessages = [...mainMessages, ...replyMessages];
+    const getMsgId = m => String(m?.id ?? m?._id ?? '');
+    const getCreatedAt = m => {
+      const v = m?.createdAt;
+      if (!v) return 0;
+      const t = typeof v === 'number' ? v : new Date(v).getTime();
+      return Number.isNaN(t) ? 0 : t;
+    };
+    const uniq = uniqBy(allMessages, m => getMsgId(m));
+    const ids = new Set(uniq.map(m => getMsgId(m)));
+    const roots = uniq.filter(m => !m?.parentId || !ids.has(String(m.parentId)));
+    const replies = uniq.filter(m => m?.parentId && ids.has(String(m.parentId)));
+    const rootsSorted = orderBy(roots, [getCreatedAt], ['asc']);
+    const result = [];
+    for (const root of rootsSorted) {
+      result.push(root);
+      const children = orderBy(replies.filter(r => String(r.parentId) === getMsgId(root)), [getCreatedAt], ['asc']);
+      result.push(...children);
+    }
+    const orphanReplies = replies.filter(r => !result.some(x => getMsgId(x) === getMsgId(r)));
+    return [...result, ...orderBy(orphanReplies, [getCreatedAt], ['asc'])];
+  }, [messagesData?.messages?.data]);
+  console.log('regularMessages...........', JSON.stringify(regularMessages, null, 2));
+  // True while the latest assistant post is still building a sandbox (or fragment not yet complete)
+  const isCreatingSandbox = useMemo(() => {
+    if (isShowOnlyInbox) return false;
+    if (!regularMessages || regularMessages.length === 0) return false;
+    const mostRecentAssistant = regularMessages.slice().reverse().find(isAssistantPost);
+    if (!mostRecentAssistant) return false;
+    const fragment = getPostFragment(mostRecentAssistant);
+    if (fragment?.isCreatingSandbox === true) return true;
+    if (isAssistantResponseComplete(fragment)) return false;
+    // Assistant row exists but no completion signals yet — still in progress
+    if (fragment && Object.keys(fragment).length > 0) return true;
+    return false;
+  }, [regularMessages, isShowOnlyInbox]);
+  // handleSend sets these on submit; clear them when the latest assistant message is clearly done
+  useEffect(() => {
+    if (isShowOnlyInbox) return;
+    if (!regularMessages?.length) return;
+    const mostRecentAssistant = regularMessages.slice().reverse().find(isAssistantPost);
+    if (!mostRecentAssistant) return;
+    const fragment = getPostFragment(mostRecentAssistant);
+    if (!isAssistantResponseComplete(fragment)) return;
+    setIsSuccessThinking(false);
+    setIsLoading?.(false);
+  }, [regularMessages, isShowOnlyInbox, setIsLoading]);
+  // Send regular messages to AI agent machine for context
+  useEffect(() => {
+    if (regularMessages && regularMessages.length > 0) {
+      send({
+        type: 'UPDATE_REGULAR_MESSAGES',
+        messages: regularMessages
+      });
+      setMessages(regularMessages);
+      const currentMessage = regularMessages?.[regularMessages.length - 1];
+      setSelectedPost(regularMessages[regularMessages.length - 1]);
+      setCurrentFiles(currentMessage?.propsConfiguration?.contents?.fragment?.files ?? {});
+      let canvasLayers = currentMessage?.propsConfiguration?.contents?.fragment?.canvasLayers ?? [];
+      const summary = currentMessage?.propsConfiguration?.contents?.fragment?.summary ?? null;
+      // If not in direct field, try to extract from summary
+      if (!canvasLayers && summary) {
+        const canvasLayersMatch = summary?.match(/<canvas_layers>([\s\S]*?)<\/canvas_layers>/);
+        if (canvasLayersMatch) {
+          try {
+            canvasLayers = JSON.parse(canvasLayersMatch[1]);
+          } catch (error) {
+            console.error('Failed to parse canvas layers from summary:', error);
+          }
+        }
+      }
+      // Update canvas layers if available
+      if (canvasLayers && Array.isArray(canvasLayers)) {
+        setCanvasLayers(canvasLayers);
+      }
+      console.log('currenmessage', currentMessage);
+      if (currentMessage?.propsConfiguration?.contents?.role === 'ASSISTANT') ;
+      if (isShowOnlyInbox) {
+        setIsLoading(false);
+      }
+      // Scroll behavior (Perplexity-style): smooth when a new last message appears; coalesce updates on the same id
+      const last = regularMessages[regularMessages.length - 1];
+      const lastId = last?.id != null ? String(last.id) : null;
+      const isNewLastRow = lastId !== prevLastMessageIdRef.current;
+      prevLastMessageIdRef.current = lastId;
+      if (isNewLastRow) {
+        if (streamScrollRafRef.current != null) {
+          cancelAnimationFrame(streamScrollRafRef.current);
+          streamScrollRafRef.current = null;
+        }
+        scrollToBottom('smooth', 0);
+      } else if (streamScrollRafRef.current == null) {
+        streamScrollRafRef.current = requestAnimationFrame(() => {
+          streamScrollRafRef.current = null;
+          scrollToBottom('auto', 0);
+        });
+      }
+    }
+  }, [regularMessages, send, isShowOnlyInbox, setIsLoading, scrollToBottom]);
+  const onOpen = element => {
+    setSelectedElement(element);
+    setIsOpen(true);
+  };
+  const onClose = () => {
+    setIsOpen(false);
+    setSelectedElement(null);
+  };
+  const handleSend = useCallback(async (message, files = []) => {
+    // Allow sending if there's either a message or files
+    if ((!message || !message.trim()) && (!files || files.length === 0)) return;
+    const validated = getValidatedConfig();
+    if (!validated && !hasApiKey) {
+      // Warn but continue — the user's message should still be persisted
+      // even if the AI cannot respond without an API key.
+      console.warn('⚠️ No AI API key configured. Message will be saved but AI cannot respond. ' + 'Open Settings (gear icon) to add your API key.');
+    }
+    const {
+      extensionId: _omitExtensionId,
+      formId: _omitFormId,
+      functionId: _omitFunctionId,
+      stepName: _omitStepName,
+      metadata: _omitMetadata,
+      ...modelConfigWithoutExtensionId
+    } = modelConfig || {};
+    let createChannelInputData = sendMessageInput ? {
+      ...sendMessageInput,
+      channelId: sendMessageInput?.channelId || actualChannelId,
+      title: sendMessageInput?.title || 'AI Assistant',
+      description: sendMessageInput?.description || 'AI Assistant',
+      displayName: sendMessageInput?.displayName || 'AI Assistant',
+      topic: sendMessageInput?.topic || 'AI Assistant',
+      // projectId: projectId,
+      type: sendMessageInput?.type || RoomType.Aiassistant,
+      postData: {
+        ...sendMessageInput?.postData,
+        postId: sendMessageInput?.postData?.postId || postId || undefined,
+        type: sendMessageInput?.postData?.type || PostTypeEnum.Aiassistant,
+        content: sendMessageInput?.postData?.content || message,
+        props: {
+          ...sendMessageInput?.postData?.props,
+          template: sendMessageInput?.postData?.props?.template || modelConfig?.template || 'vite-react',
+          //projectId: projectId,
+          role: sendMessageInput?.postData?.props?.role || AiAgentMessageRole.User,
+          fragment: sendMessageInput?.postData?.props?.fragment || {}
+        }
+      },
+      additionalProperties: sendMessageInput?.additionalProperties || {
+        modelConfig: modelConfigWithoutExtensionId
+      }
+    } : null;
+    const createChannelInput = createChannelInputData || {
+      channelId: actualChannelId,
+      title: 'AI Assistant',
+      description: 'AI Assistant',
+      displayName: 'AI Assistant',
+      topic: 'AI Assistant',
+      // projectId: projectId,
+      type: RoomType.Aiassistant,
+      postData: {
+        postId: postId || undefined,
+        type: PostTypeEnum.Aiassistant,
+        content: message,
+        props: {
+          template: modelConfig?.template || 'vite-react',
+          //projectId: projectId,
+          role: AiAgentMessageRole.User,
+          fragment: {}
+        }
+      },
+      additionalProperties: {
+        modelConfig: modelConfigWithoutExtensionId
+      }
+    };
+    // Start the AI thinking loader immediately on send
+    if (successThinkingTimeoutRef.current) {
+      clearTimeout(successThinkingTimeoutRef.current);
+      successThinkingTimeoutRef.current = null;
+    }
+    setIsSuccessThinking(true);
+    setIsLoading(true);
+    // Optimistic update: Add assistant message with isCreatingSandbox: true
+    if (!isShowOnlyInbox && actualChannelId) {
+      try {
+        const previousOptimisticId = optimisticAssistantMessageIdRef.current;
+        const optimisticAssistantMessageId = objectId();
+        optimisticAssistantMessageIdRef.current = optimisticAssistantMessageId;
+        const optimisticAssistantMessage = {
+          __typename: 'Post',
+          id: optimisticAssistantMessageId,
+          content: '',
+          message: '',
+          createdAt: new Date().toISOString(),
+          updatedAt: new Date().toISOString(),
+          author: {
+            __typename: 'User',
+            id: 'ai-assistant',
+            username: 'ai-assistant',
+            givenName: 'AI',
+            familyName: 'Assistant',
+            fullName: 'AI Assistant',
+            email: 'ai@assistant.com',
+            picture: null,
+            alias: [],
+            tokens: []
+          },
+          propsConfiguration: {
+            __typename: 'PostPropsConfiguration',
+            contents: {
+              __typename: 'PostContents',
+              role: 'ASSISTANT',
+              fragment: {
+                isCreatingSandbox: true
+              }
+            }
+          },
+          props: {},
+          files: [],
+          replies: null,
+          channel: null,
+          isPinned: false,
+          isDelivered: false,
+          isRead: false,
+          parentId: null,
+          fromServer: null,
+          type: PostTypeEnum.Aiassistant
+        };
+        // Update cache optimistically
+        const messagesQuery = {
+          query: MessagesDocument,
+          variables: {
+            channelId: actualChannelId.toString(),
+            parentId: null,
+            limit: 50
+          }
+        };
+        try {
+          const existingData = apolloClient.readQuery(messagesQuery);
+          if (existingData?.messages) {
+            const oldRows = existingData.messages.data || [];
+            let nextRows = previousOptimisticId ? oldRows.filter(m => String(m?.id) !== String(previousOptimisticId)) : [...oldRows];
+            if (!nextRows.some(m => String(m?.id) === String(optimisticAssistantMessageId))) {
+              nextRows = [...nextRows, optimisticAssistantMessage];
+            }
+            const prevTotal = existingData.messages.totalCount ?? oldRows.length;
+            const newTotal = prevTotal + (nextRows.length - oldRows.length);
+            apolloClient.writeQuery({
+              ...messagesQuery,
+              data: {
+                messages: {
+                  ...existingData.messages,
+                  data: nextRows,
+                  totalCount: Math.max(0, newTotal)
+                }
+              }
+            });
+          }
+        } catch (error) {
+          // Cache might not exist yet, that's okay
+          console.debug('Optimistic update failed (cache might not exist):', error);
+        }
+      } catch (error) {
+        console.error('Failed to create optimistic update:', error);
+      }
+    }
+    // Safety auto-stop in case no event arrives
+    // successThinkingTimeoutRef.current = setTimeout(() => {
+    //     setIsSuccessThinking(false);
+    //     successThinkingTimeoutRef.current = null;
+    // }, 15000);
+    // If no channelId, mirror AiLandingInput: create channel+project, seed first post, then navigate
+    try {
+      // const postId = objectId();
+      // Do not include extensionId inside modelConfig when sending additionalProperties
+      await createChannelWorkflowJob({
+        variables: {
+          createChannelInput: createChannelInput,
+          extensionInput: {
+            // prefer saved extensionId from modelConfig; otherwise env default
+            extensionId: modelConfig?.extensionId,
+            stepName: modelConfig?.stepName || 'extractCodeFromExtension',
+            formId: modelConfig?.formId || 'form-builder-proxy',
+            functionId: modelConfig?.functionId || 'create-channel-function',
+            metadata: modelConfig?.metadata || {},
+            source: 'final-submission'
+          }
+        },
+        onCompleted: data => {
+          // if (!data?.createChannelWorkflowJob) {
+          //     setIsSuccessThinking(false);
+          //     setIsLoading(false);
+          //     return;
+          // }
+          // setIsSuccessThinking(false);
+          // setIsLoading(false);
+        },
+        onError: error => {
+          console.error('Error creating channel:', error);
+          setIsSuccessThinking(false);
+          setIsLoading(false);
+        }
+      });
+    } catch (err) {
+      console.error('Failed to create new AI project/channel from AIAgent:', err);
+      setIsSuccessThinking(false);
+      setIsLoading(false);
+    }
+  }, [actualChannelId, postId, auth, startUpload, sendMsg, scrollToBottom, getValidatedConfig, hasApiKey, modelConfig, navigate, createChannelWorkflowJob, sendMessageInput, apolloClient, isShowOnlyInbox]);
+  const fixError = useCallback(errorMessage => {
+    // Use sendMessage to fix the error, which will use createProject flow
+    return handleSend(errorMessage);
+  }, [handleSend]);
+  const handleStop = useCallback(() => {
+    // Stop the current operation
+    console.log('Stop button clicked - stopping current operation');
+    // Call the onStop prop if provided
+    onStop?.();
+  }, [setIsLoading, onStop]);
+  const handleRetry = useCallback(() => {
+    send({
+      type: 'RETRY'
+    });
+  }, [send]);
+  const handleClearError = useCallback(() => {
+    send({
+      type: 'CLEAR_ERROR'
+    });
+  }, [send]);
+  // Use only default/regular messages and ignore AI messages — preserve type (THINKING, TOOLUSE, CODEBLOCK, etc.) for ModernMessageGroup slots
+  const allMessages = useMemo(() => {
+    if (!regularMessages) return [];
+    const mapped = (regularMessages || []).map((m, idx) => ({
+      id: m.id || `regular-${idx}`,
+      message: m.message || m.content || '',
+      createdAt: new Date(m.createdAt || Date.now()),
+      type: m.type,
+      propsConfiguration: m.propsConfiguration,
+      props: m.props,
+      files: m.files,
+      sender: 'user',
+      author: m.author,
+      isUserMessage: true
+    }));
+    // Check if we have a completed AIASSISTANT (final response) — if so, hide THINKING
+    const hasCompletedResponse = mapped.some(m => {
+      const t = m.type;
+      const frag = m?.props?.fragment ?? m?.propsConfiguration?.contents?.fragment;
+      return (t === 'AIASSISTANT' || t === 'ASSISTANT') && frag && (frag.sandboxUrl || frag.files);
+    });
+    return mapped.filter(m => {
+      if (m.type !== 'THINKING') return true;
+      // Hide THINKING when: dismissed in payload, or when we have a completed response
+      const att = m?.props?.attachment ?? m?.propsConfiguration?.contents?.attachment;
+      if (att == null) return false;
+      if (att.dismissed === true) return false;
+      if (att.isThinking === false && !String(att.thought || '').trim()) return false;
+      if (hasCompletedResponse) return false; // Final response exists — hide lingering THINKING
+      return true;
+    });
+  }, [regularMessages, currentUser]);
+  // Derive sandbox-style errors from message fragments so we can show the Fix Error UI
+  // Returns unique errors globally (deduplicated by error message/content)
+  // Map errors to their respective messages (messageId -> errors[])
+  const errorsByMessageId = useMemo(() => {
+    if (!regularMessages || regularMessages.length === 0) return new Map();
+    const errorsMap = new Map();
+    // Collect errors from all messages and map them to message IDs
+    (regularMessages || []).forEach(m => {
+      const fragment = m?.propsConfiguration?.contents?.fragment;
+      if (!fragment) return;
+      const isErrorFragment = fragment?.isError === true || fragment?.type === 'ERROR';
+      if (!isErrorFragment) return;
+      const errorId = fragment.id || m.id || objectId();
+      const messageId = m.id || 'unknown';
+      const errorMessage = fragment.errorMessage || fragment.summary || m.message || m.content || 'An error occurred in the AI sandbox.';
+      const error = {
+        id: errorId,
+        messageId: messageId,
+        errorType: fragment.errorType || 'RUNTIME_ERROR',
+        timestamp: fragment.timestamp || m.createdAt || new Date().toISOString(),
+        sandboxId: fragment.sandboxId || fragment.projectId || actualChannelId || 'unknown-sandbox',
+        message: errorMessage,
+        stack: fragment.stack || '',
+        url: fragment.sandboxUrl || fragment.url,
+        fixable: fragment.fixable !== false
+      };
+      // Add error to the message's error list
+      if (!errorsMap.has(messageId)) {
+        errorsMap.set(messageId, []);
+      }
+      errorsMap.get(messageId).push(error);
+    });
+    return errorsMap;
+  }, [regularMessages, actualChannelId]);
+  // Build list with date separators similar to MessagesBuilderUi
+  const messageListWithDates = useMemo(() => {
+    let currentDate = '';
+    const res = [];
+    if (showDateSeparators) {
+      allMessages?.forEach(msg => {
+        const date = new Date(msg.createdAt);
+        let msgDate;
+        if (isToday(date)) msgDate = t('tailwind_ui_inbox.today');else if (isYesterday(date)) msgDate = t('tailwind_ui_inbox.yesterday');else msgDate = format(date, 'eee, do MMMM');
+        if (msgDate !== currentDate) {
+          res.push({
+            type: 'date',
+            content: msgDate
+          });
+          currentDate = msgDate;
+        }
+        res.push(msg);
+      });
+      if (allMessages && allMessages.length > 0) {
+        const todayLabel = t('tailwind_ui_inbox.today');
+        if (currentDate !== todayLabel) {
+          res.push({
+            type: 'date',
+            content: todayLabel
+          });
+        }
+      }
+    } else {
+      // No date separaters, keep messages as-is
+      allMessages?.forEach(msg => res.push(msg));
+    }
+    return res;
+  }, [allMessages, t, showDateSeparators]);
+  // Group messages by date sections for Slack-like rendering
+  const messagesByDate = useMemo(() => {
+    const sections = [];
+    let currentSection = {
+      date: null,
+      messages: []
+    };
+    messageListWithDates.forEach(item => {
+      if (item?.type === 'date') {
+        if (currentSection.messages.length > 0) {
+          sections.push(currentSection);
+        }
+        currentSection = {
+          date: item.content,
+          messages: []
+        };
+      } else {
+        currentSection.messages.push(item);
+      }
+    });
+    if (currentSection.messages.length > 0) {
+      sections.push(currentSection);
+    }
+    return sections;
+  }, [messageListWithDates]);
+  // Show all messages without limiting
+  const limitedMessagesByDate = useMemo(() => {
+    if (!messagesByDate || messagesByDate.length === 0) return [];
+    return messagesByDate;
+  }, [messagesByDate]);
+  // Ensure we show complete conversation pairs (user message + AI response)
+  const completeConversationMessages = useMemo(() => {
+    if (!limitedMessagesByDate || limitedMessagesByDate.length === 0) return [];
+    const completeSections = [];
+    limitedMessagesByDate.forEach(section => {
+      const completeMessages = [];
+      const sectionMessages = [...section.messages];
+      console.log('🔄 Processing section for complete conversations:', {
+        sectionDate: section.date,
+        totalMessages: sectionMessages.length,
+        messages: sectionMessages.map(m => ({
+          sender: m.sender,
+          isUserMessage: m.isUserMessage,
+          message: m.message?.substring(0, 30) + '...'
+        }))
+      });
+      // Group messages into conversation pairs
+      for (let i = 0; i < sectionMessages.length; i++) {
+        const currentMsg = sectionMessages[i];
+        // If this is a user message, look for its AI response
+        if (currentMsg.sender === 'user' || currentMsg.isUserMessage) {
+          completeMessages.push(currentMsg);
+          // Look for the corresponding AI response (next message should be AI)
+          if (i + 1 < sectionMessages.length) {
+            const nextMsg = sectionMessages[i + 1];
+            if (nextMsg.sender === 'ai' || !nextMsg.isUserMessage) {
+              completeMessages.push(nextMsg);
+              i++; // Skip the next message since we've already added it
+            }
+          }
+        } else if (currentMsg.sender === 'ai' || !currentMsg.isUserMessage) {
+          // If this is an AI message without a preceding user message, still show it
+          completeMessages.push(currentMsg);
+        }
+      }
+      console.log('🔄 Complete messages for section:', {
+        sectionDate: section.date,
+        completeMessages: completeMessages.map(m => ({
+          sender: m.sender,
+          isUserMessage: m.isUserMessage,
+          message: m.message?.substring(0, 30) + '...'
+        }))
+      });
+      if (completeMessages.length > 0) {
+        completeSections.push({
+          ...section,
+          messages: completeMessages
+        });
+      }
+    });
+    return completeSections;
+  }, [limitedMessagesByDate]);
+  // Auto scroll to bottom when messages, typing status, or AI responses change
+  useEffect(() => {
+    //  scrollToBottom('smooth', 100);
+  }, [completeConversationMessages?.length, isTyping, aiMessages.length, scrollToBottom]);
+  // Cleanup any pending timeout / scroll on unmount
+  useEffect(() => {
+    return () => {
+      if (successThinkingTimeoutRef.current) {
+        clearTimeout(successThinkingTimeoutRef.current);
+      }
+      if (scrollPendingRef.current) {
+        clearTimeout(scrollPendingRef.current);
+        scrollPendingRef.current = null;
+      }
+      if (streamScrollRafRef.current != null) {
+        cancelAnimationFrame(streamScrollRafRef.current);
+        streamScrollRafRef.current = null;
+      }
+    };
+  }, []);
+  const extractCleanContent = useCallback(summary => {
+    // console.log('summary...........', summary);
+    if (!summary) return 'Project generated successfully!';
+    const summeryData = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+    if (summeryData && summeryData.trim() !== '' && summeryData.trim()?.length > 0) {
+      return summeryData || 'Project generated successfully!';
+    }
+    // Extract content from <task_summary> tags
+    const taskSummaryMatch = summary.match(/<task_summary>([\s\S]*?)<\/task_summary>/);
+    if (taskSummaryMatch) {
+      // const removedCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').replace(/<task_summary>([\s\S]*?)<\/task_summary>/g, '');
+      return taskSummaryMatch?.[1]?.trim() ?? 'Project generated successfully!';
+    }
+    // If no task_summary tags, remove canvas_layers and return the rest
+    const withoutCanvasLayers = summary.replace(/<canvas_layers>[\s\S]*?<\/canvas_layers>/g, '').trim();
+    return withoutCanvasLayers || 'Project generated successfully!';
+  }, []);
+  return React__default.createElement("div", {
+    className: `flex flex-col h-full ${className}`
+  }, !isShowOnlyInbox && React__default.createElement("div", {
+    className: "border-b border-gray-200 bg-white"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between px-4 py-3"
+  }, React__default.createElement("div", {
+    className: "flex space-x-6"
+  }, React__default.createElement("button", {
+    onClick: () => setActiveTab('chat'),
+    className: `relative ${activeTab === 'chat' ? 'text-blue-600 font-medium' : 'text-gray-500 hover:text-gray-700'} text-sm transition-colors`
+  }, React__default.createElement("span", null, "Chat"), activeTab === 'chat' && React__default.createElement("div", {
+    className: "absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"
+  })), React__default.createElement("button", {
+    onClick: () => setActiveTab('history'),
+    className: `relative ${activeTab === 'history' ? 'text-blue-600 font-medium' : 'text-gray-500 hover:text-gray-700'} text-sm transition-colors`
+  }, React__default.createElement("span", null, "History"), activeTab === 'history' && React__default.createElement("div", {
+    className: "absolute bottom-0 left-0 w-full h-0.5 bg-blue-600"
+  }))))), activeTab === 'history' ? (/* History Tab Content */
+  React__default.createElement("div", {
+    className: "flex-1 overflow-y-auto bg-white"
+  }, React__default.createElement("div", {
+    className: "px-4 py-3 border-b border-gray-200"
+  }, React__default.createElement("div", {
+    className: "relative"
+  }, React__default.createElement("div", {
+    className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
+  }, React__default.createElement("svg", {
+    className: "h-5 w-5 text-gray-400",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+  }))), React__default.createElement("input", {
+    type: "text",
+    placeholder: "Search messages...",
+    className: "block w-full pl-10 pr-12 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+  }), React__default.createElement("div", {
+    className: "absolute inset-y-0 right-0 pr-3 flex items-center"
+  }, React__default.createElement("button", {
+    className: "text-gray-400 hover:text-gray-600"
+  }, React__default.createElement("svg", {
+    className: "h-5 w-5",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"
+  })))))), React__default.createElement("div", {
+    className: "px-4 py-2"
+  }, regularMessages && regularMessages.length > 0 ? regularMessages.filter(msg => msg?.propsConfiguration?.contents?.role === 'USER').map((msg, index) => {
+    new Date(msg.createdAt);
+    return React__default.createElement("div", {
+      key: msg.id || index,
+      className: "mb-4"
+    }, React__default.createElement("div", {
+      className: "flex items-center justify-end mb-2"
+    }), React__default.createElement(ModernMessageGroupComponent, {
+      messages: [{
+        id: msg.id,
+        message: msg?.propsConfiguration?.contents?.role === 'ASSISTANT' ? msg.propsConfiguration?.contents?.fragment?.summary ? extractCleanContent(msg.propsConfiguration?.contents?.fragment?.summary) : msg.message : msg.message,
+        author: msg.author || {
+          id: 'user',
+          givenName: 'User',
+          familyName: '',
+          fullName: 'User',
+          username: 'user',
+          email: '',
+          picture: null,
+          alias: [],
+          tokens: []
+        },
+        createdAt: msg.createdAt,
+        type: msg?.type || PostTypeEnum.Aiassistant,
+        isDelivered: false,
+        isRead: false,
+        parentId: null,
+        fromServer: null,
+        updatedAt: msg.createdAt,
+        propsConfiguration: {
+          ...msg?.propsConfiguration,
+          contents: {
+            ...msg?.propsConfiguration?.contents,
+            attachment: msg?.props?.attachment ?? msg?.propsConfiguration?.contents?.attachment
+          }
+        },
+        props: msg?.props,
+        files: msg.files,
+        replies: null,
+        channel: null,
+        isPinned: false
+      }],
+      currentUser: currentUser,
+      onOpen: onOpen,
+      onMessageClick: msg => setSelectedPost(msg),
+      isDesktopView: isDesktopView,
+      isSmallScreen: isSmallScreen,
+      showAuthorName: true,
+      showAvatar: true
+    }));
+  }) :
+  // Fallback entries when no messages
+  React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "mb-4"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-end mb-2"
+  }, React__default.createElement("button", {
+    className: "text-blue-600 text-sm underline hover:text-blue-800 flex items-center"
+  }, React__default.createElement("svg", {
+    className: "w-4 h-4 mr-1",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    stroke: "currentColor"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M15 19l-7-7 7-7"
+  })), "Restore to this point")), React__default.createElement("div", {
+    className: "bg-gray-100 rounded-lg p-3"
+  }, React__default.createElement("p", {
+    className: "text-sm text-gray-900"
+  }, "Sample message for demonstration"))))))) : (/* Chat Tab Content */
+  React__default.createElement("div", {
+    className: "flex-1 overflow-y-auto bg-white"
+  }, React__default.createElement("div", {
+    className: `w-full pb-4 pt-2 ${isDesktopView ? 'space-y-3 max-w-full mx-auto' : isSmallScreen ? 'space-y-2' : 'space-y-2'}`
+  }, (!completeConversationMessages || completeConversationMessages.length === 0) && React__default.createElement("div", {
+    className: "px-4 py-8 text-center"
+  }, React__default.createElement("div", {
+    className: "text-gray-500 text-lg font-medium mb-2"
+  }, "Describe your idea and I'll help you create it step by step"), React__default.createElement("div", {
+    className: "text-gray-400 text-sm"
+  }, "Start a new conversation by typing your message below")), completeConversationMessages?.map((section, sectionIndex) => React__default.createElement("div", {
+    key: `section-${sectionIndex}`,
+    className: "w-full px-4"
+  }, showDateSeparators && section.date && React__default.createElement("div", {
+    className: "flex items-center justify-center my-3"
+  }, React__default.createElement("div", {
+    className: "flex-grow border-t border-gray-200"
+  }), React__default.createElement("div", {
+    className: "mx-4 px-3 py-1 bg-white border border-gray-200 rounded-full text-xs font-medium text-gray-600"
+  }, section.date), React__default.createElement("div", {
+    className: "flex-grow border-t border-gray-200"
+  })), React__default.createElement("div", {
+    className: `${isDesktopView ? 'mb-2' : 'mb-1'}`
+  }, section.messages.map((msg, msgIndex) => {
+    // Get errors for this specific message
+    const messageErrors = errorsByMessageId.get(msg.id) || [];
+    return React__default.createElement("div", {
+      key: msg.id || msgIndex,
+      className: "mb-3"
+    }, msg.isAIMessage && React__default.createElement("div", {
+      className: "flex items-center mb-2"
+    }, React__default.createElement("div", {
+      className: "w-2 h-2 bg-blue-500 rounded-full mr-2"
+    }), React__default.createElement("span", {
+      className: "text-xs text-blue-600 font-medium"
+    }, "AI Assistant")), msg.isLoading ?
+    // Show loader for loading messages
+    React__default.createElement("div", {
+      className: "flex items-center space-x-2 bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg"
+    }, React__default.createElement("div", {
+      className: "w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"
+    }), React__default.createElement("span", {
+      className: "text-sm text-gray-600"
+    }, msg.isProcessing ? 'Thinking...' : 'Thinking...')) :
+    // Show normal message for non-loading messages
+    React__default.createElement(ModernMessageGroupComponent, {
+      messages: [{
+        id: msg.id,
+        message: msg?.propsConfiguration?.contents?.role === 'ASSISTANT' ? msg.propsConfiguration?.contents?.fragment?.summary ? extractCleanContent(msg.propsConfiguration?.contents?.fragment?.summary) : msg.message : msg.message,
+        author: msg.sender === 'user' ? msg.author : {
+          id: 'ai-assistant',
+          givenName: 'AI',
+          familyName: 'Assistant',
+          fullName: 'AI Assistant',
+          username: 'ai-assistant',
+          email: 'ai@assistant.com',
+          picture: null,
+          alias: [],
+          tokens: []
+        },
+        createdAt: msg.createdAt,
+        type: msg?.type || PostTypeEnum.Aiassistant,
+        isDelivered: false,
+        isRead: false,
+        parentId: null,
+        fromServer: null,
+        updatedAt: msg.createdAt,
+        propsConfiguration: {
+          ...msg?.propsConfiguration,
+          contents: {
+            ...msg?.propsConfiguration?.contents,
+            attachment: msg?.props?.attachment ?? msg?.propsConfiguration?.contents?.attachment
+          }
+        },
+        props: msg?.props,
+        files: msg.files,
+        replies: null,
+        channel: null,
+        isPinned: false
+      }],
+      currentUser: currentUser,
+      onOpen: onOpen,
+      onMessageClick: msg => setSelectedPost(msg),
+      isDesktopView: isDesktopView,
+      isSmallScreen: isSmallScreen,
+      showTimestamp: false,
+      sandboxErrors: messageErrors,
+      currentFiles: currentFiles,
+      onFixError: fixError
+    }));
+  })))), (isTyping || isSuccessThinking || isLoading || isCreatingSandbox) && React__default.createElement("div", {
+    className: "px-4"
+  }, React__default.createElement("div", {
+    className: "flex justify-start"
+  }, React__default.createElement("div", {
+    className: "bg-gray-50 border border-gray-200 px-4 py-3 rounded-lg"
+  }, React__default.createElement("div", {
+    className: "flex items-center space-x-2"
+  }, React__default.createElement("div", {
+    className: "w-4 h-4 border-2 border-gray-300 border-t-gray-500 rounded-full animate-spin"
+  }), React__default.createElement("span", {
+    className: "text-sm text-gray-600"
+  }, "Thinking..."))))), React__default.createElement("div", {
+    ref: bottomRef
+  })), React__default.createElement(SubscriptionHandler, {
+    subscribeToMore: subscribeToMore,
+    document: OnChatMessageAddedDocument,
+    variables: {
+      channelId: actualChannelId?.toString()
+    },
+    enabled: !!actualChannelId && !!subscribeToMore,
+    updateQuery: (prev, {
+      subscriptionData
+    }) => {
+      if (!subscriptionData.data) return prev;
+      const newMessage = subscriptionData.data.chatMessageAdded;
+      console.log('newMessage...........', newMessage);
+      if (!newMessage?.id) return prev;
+      const existing = prev?.messages?.data || [];
+      const attachment = newMessage?.props?.attachment ?? newMessage?.propsConfiguration?.contents?.attachment;
+      // Treat as dismiss: explicit dismissed flag, or THINKING with empty/inactive attachment, or THINKING with attachment: null
+      const isDismissed = attachment?.dismissed === true || newMessage?.type === 'THINKING' && (attachment == null || attachment?.isThinking === false && !String(attachment?.thought || '').trim());
+      let newData;
+      let newTotalCount;
+      if (isDismissed) {
+        // Remove THINKING when dismissed
+        newData = existing.filter(m => m.id !== newMessage.id);
+        newTotalCount = Math.max(0, (prev?.messages?.totalCount || 0) - (existing.length - newData.length));
+      } else {
+        const idx = existing.findIndex(m => m.id === newMessage.id);
+        if (idx >= 0) {
+          // Replace existing message (same id)
+          newData = [...existing.slice(0, idx), newMessage, ...existing.slice(idx + 1)];
+          newTotalCount = prev?.messages?.totalCount || 0;
+        } else {
+          newData = [...existing, newMessage];
+          newTotalCount = (prev?.messages?.totalCount || 0) + 1;
+        }
+      }
+      // Preserve server order (posts are persisted in sequence). Dedupe by id only.
+      if (!isDismissed) {
+        const optId = optimisticAssistantMessageIdRef.current;
+        if (optId && newMessage?.id) {
+          if (String(newMessage.id) === String(optId)) {
+            optimisticAssistantMessageIdRef.current = null;
+          } else {
+            const typ = String(newMessage.type || '').toUpperCase();
+            const role = newMessage?.propsConfiguration?.contents?.role;
+            const realAssistantChunk = ['THINKING', 'TOOLUSE', 'CODEBLOCK', 'SERVICE', 'AIASSISTANT', 'ASSISTANT'].includes(typ) || role === 'ASSISTANT';
+            if (realAssistantChunk) {
+              newData = newData.filter(m => String(m?.id) !== String(optId));
+              optimisticAssistantMessageIdRef.current = null;
+            }
+          }
+        }
+        newData = uniqBy(newData, 'id');
+      }
+      return {
+        ...prev,
+        messages: {
+          ...prev?.messages,
+          data: newData,
+          totalCount: newTotalCount
+        }
+      };
+    },
+    onError: error => {
+      console.error('Subscription error:', error);
+    }
+  }))), error && React__default.createElement("div", {
+    className: "mx-4 mb-4 p-3 bg-red-50 border border-red-200 rounded-lg"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between"
+  }, React__default.createElement("div", {
+    className: "text-red-800 text-sm"
+  }, error), React__default.createElement("div", {
+    className: "flex space-x-2"
+  }, React__default.createElement("button", {
+    onClick: handleRetry,
+    className: "px-2 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200 transition-colors"
+  }, "Retry"), React__default.createElement("button", {
+    onClick: handleClearError,
+    className: "px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors"
+  }, "Dismiss")))), activeTab === 'chat' && (() => {
+    // Compute final showStopButton value: use prop if provided, otherwise compute from conditions
+    // const finalShowStopButton =
+    //     showStopButton !== undefined
+    //         ? showStopButton
+    //         : !isShowOnlyInbox && (isCreatingSandbox || isLoading || isSuccessThinking);
+    const isShowStopButton = showStopButton && (isCreatingSandbox || isSuccessThinking) ? true : false;
+    return React__default.createElement("div", {
+      className: "border-t border-gray-200 bg-white"
+    }, React__default.createElement(InputComponent, {
+      channelId: actualChannelId,
+      handleSend: handleSend,
+      placeholder: placeholder,
+      modelConfig: modelConfig,
+      onModelConfigChange: updateModelConfig,
+      textareaStyles: isShowOnlyInbox ? {
+        height: '80px',
+        minHeight: '80px',
+        maxHeight: '80px'
+      } : {},
+      showModeSelector: showModeSelector,
+      showStopButton: isShowStopButton,
+      onStop: isShowStopButton ? handleStop : undefined,
+      templates: templates,
+      selectedTemplate: selectedTemplate,
+      suggestedTemplate: suggestedTemplate,
+      onSelectTemplate: onSelectTemplate,
+      templateSelectedLabel: templateSelectedLabel,
+      templateModalItems: templateModalItems,
+      showTemplateModal: showTemplateModal,
+      onOpenTemplateModal: onOpenTemplateModal,
+      onCloseTemplateModal: onCloseTemplateModal,
+      onSelectTemplateById: onSelectTemplateById,
+      onClearTemplate: onClearTemplate,
+      onAcceptSuggestedTemplate: onAcceptSuggestedTemplate,
+      isAnalyzingQuery: isAnalyzingQuery,
+      onQueryChange: onQueryChange,
+      leftItemsOverrides: leftItemsOverrides,
+      rightItemsOverrides: rightItemsOverrides,
+      inputToolBarProps: inputToolBarProps
+    }));
+  })(), isOpen ? React__default.createElement("div", null, React__default.createElement("div", {
+    className: "fixed inset-0 bg-black bg-opacity-50 z-40",
+    onClick: onClose
+  }), React__default.createElement("div", {
+    className: "fixed z-50 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
+  }, React__default.createElement("div", {
+    className: "bg-white w-[1036px] h-[700px] rounded-lg shadow-xl",
+    style: {
+      boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
+    }
+  }, React__default.createElement("div", {
+    className: "flex justify-between border-b border-gray-300 pb-4 pt-4"
+  }, React__default.createElement("button", {
+    onClick: onClose,
+    className: "w-8 ml-3 text-black hover:text-black focus:outline-none"
+  }, React__default.createElement("svg", {
+    className: "w-6 h-6",
+    fill: "none",
+    stroke: "currentColor",
+    viewBox: "0 0 24 24"
+  }, React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 2,
+    d: "M6 18L18 6M6 6l12 12"
+  })))), React__default.createElement("div", {
+    className: "p-4"
+  }, React__default.createElement("div", {
+    className: "text-sm text-gray-700"
+  }, selectedElement?.author?.username))))) : null);
+};export{AIAgent};//# sourceMappingURL=AIAgent.js.map