fix image attachments preview and remove attachments from the bottom panel

Author: iamfaran

client/packages/lowcoder/src/comps/comps/chatComp/chatComp.tsx

@@ -182,7 +182,7 @@ export const chatChildrenMap = {
 };
 
 // ============================================================================
-// CLEAN CHATCOMP - USES NEW ARCHITECTURE
+//   CHATCOMP 
 // ============================================================================
 
 const ChatTmpComp = new UICompBuilder(
@@ -222,7 +222,7 @@ const ChatTmpComp = new UICompBuilder(
     ]);
 
     // Handle message updates for exposed variable
-    // Using Lowcoder pattern: props.currentMessage.onChange() instead of dispatch(changeChildAction(...))
+    // Using Lowcoder pattern: props.currentMessage.onChange()
     const handleMessageUpdate = (message: string) => {
       props.currentMessage.onChange(message);
       // Trigger messageSent event
@@ -259,7 +259,7 @@ const ChatTmpComp = new UICompBuilder(
       };
     }, []);
 
-    // Group all styles into single object for cleaner prop passing
+    // custom styles
     const styles = {
       style: props.style,
       sidebarStyle: props.sidebarStyle,
@@ -300,7 +300,7 @@ const ChatCompWithAutoHeight = class extends ChatTmpComp {
 };
 
 // ============================================================================
-// EXPORT WITH EXPOSED VARIABLES
+//  EXPOSED VARIABLES
 // ============================================================================
 
 export const ChatComp = withExposingConfigs(ChatCompWithAutoHeight, [

client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts

@@ -1,7 +1,7 @@
 // client/packages/lowcoder/src/comps/comps/chatComp/chatCompTypes.ts
 
 // ============================================================================
-// CLEAN CHATCOMP TYPES - SIMPLIFIED AND FOCUSED
+//   CHATCOMP TYPES 
 // ============================================================================
 
 export type ChatCompProps = {

client/packages/lowcoder/src/comps/comps/chatComp/chatPropertyView.tsx

@@ -7,7 +7,7 @@ import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { controlItem } from "lowcoder-design";
 
 // ============================================================================
-// CLEAN PROPERTY VIEW - FOCUSED ON ESSENTIAL CONFIGURATION
+//   PROPERTY VIEW 
 // ============================================================================
 
 export const ChatPropertyView = React.memo((props: any) => {

client/packages/lowcoder/src/comps/comps/chatComp/components/ChatContainer.tsx

@@ -24,7 +24,7 @@ import { universalAttachmentAdapter } from "../utils/attachmentAdapter";
 import { StyledChatContainer } from "./ChatContainerStyles";
 
 // ============================================================================
-// CHAT CONTAINER - USES CONTEXT FROM CHATPROVIDER
+//   CHAT CONTAINER 
 // ============================================================================
 
 const generateId = () => Math.random().toString(36).substr(2, 9);
@@ -33,8 +33,7 @@ function ChatContainerView(props: ChatCoreProps) {
   const { state, actions } = useChatContext();
   const [isRunning, setIsRunning] = useState(false);
 
-  // Store callback props in refs so useEffects don't re-fire
-  // when Lowcoder's builder creates new function references on each render
+  // callback props in refs so useEffects don't re-fire
   const onConversationUpdateRef = useRef(props.onConversationUpdate);
   onConversationUpdateRef.current = props.onConversationUpdate;
 
@@ -247,7 +246,7 @@ function ChatContainerView(props: ChatCoreProps) {
 }
 
 // ============================================================================
-// EXPORT - SIMPLIFIED (PROVIDERS MOVED UP ONE LEVEL)
+//   EXPORT 
 // ============================================================================
 
 export const ChatContainer = ChatContainerView;

client/packages/lowcoder/src/comps/comps/chatComp/components/ChatPanelContainer.tsx

@@ -7,7 +7,6 @@ import {
   AppendMessage,
   AssistantRuntimeProvider,
   ExternalStoreThreadListAdapter,
-  CompleteAttachment,
   TextContentPart,
   ThreadUserContentPart
 } from "@assistant-ui/react";
@@ -22,7 +21,6 @@ import {
 import { MessageHandler, ChatMessage } from "../types/chatTypes";
 import styled from "styled-components";
 import { trans } from "i18n";
-import { universalAttachmentAdapter } from "../utils/attachmentAdapter";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 
 import "@assistant-ui/styles/index.css";
@@ -89,20 +87,11 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
   const convertMessage = (message: ChatMessage): ThreadMessageLike => {
     const content: ThreadUserContentPart[] = [{ type: "text", text: message.text }];
 
-    if (message.attachments && message.attachments.length > 0) {
-      for (const attachment of message.attachments) {
-        if (attachment.content) {
-          content.push(...attachment.content);
-        }
-      }
-    }
-    
     return {
       role: message.role,
       content,
       id: message.id,
       createdAt: new Date(message.timestamp),
-      ...(message.attachments && message.attachments.length > 0 && { attachments: message.attachments }),
     };
   };
 
@@ -112,11 +101,8 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
     );
 
     const text = textPart?.text?.trim() ?? "";
-    const completeAttachments = (message.attachments ?? []).filter(
-      (att): att is CompleteAttachment => att.status.type === "complete"
-    );
 
-    if (!text && !completeAttachments.length) {
+    if (!text) {
       throw new Error("Cannot send an empty message");
     }
 
@@ -125,7 +111,6 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
       role: "user",
       text,
       timestamp: Date.now(),
-      attachments: completeAttachments,
     };
 
     await actions.addMessage(state.currentThreadId, userMessage);
@@ -159,11 +144,8 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
     );
 
     const text = textPart?.text?.trim() ?? "";
-    const completeAttachments = (message.attachments ?? []).filter(
-      (att): att is CompleteAttachment => att.status.type === "complete"
-    );
 
-    if (!text && !completeAttachments.length) {
+    if (!text) {
       throw new Error("Cannot send an empty message");
     }
 
@@ -175,7 +157,6 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
       role: "user",
       text,
       timestamp: Date.now(),
-      attachments: completeAttachments,
     });
 
     await actions.updateMessages(state.currentThreadId, newMessages);
@@ -241,7 +222,7 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
     onEdit,
     adapters: {
       threadList: threadListAdapter,
-      attachments: universalAttachmentAdapter,
+      // No attachments support for bottom panel chat
     },
   });
 
@@ -253,7 +234,7 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
     <AssistantRuntimeProvider runtime={runtime}>
       <StyledChatContainer>
         <ThreadList />
-        <Thread placeholder={placeholder} />
+        <Thread placeholder={placeholder} showAttachments={false} />
       </StyledChatContainer>
     </AssistantRuntimeProvider>
   );

client/packages/lowcoder/src/comps/comps/chatComp/components/assistant-ui/thread.tsx

@@ -5,7 +5,7 @@ import {
     MessagePrimitive,
     ThreadPrimitive,
   } from "@assistant-ui/react";
-  import type { FC } from "react";
+  import { useMemo, type FC } from "react";
   import { trans } from "i18n";
   import {
     ArrowDownIcon,
@@ -14,7 +14,6 @@ import {
     ChevronRightIcon,
     CopyIcon,
     PencilIcon,
-    RefreshCwIcon,
     SendHorizontalIcon,
   } from "lucide-react";
   import { cn } from "../../utils/cn";
@@ -54,9 +53,20 @@ import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } fr
 
   interface ThreadProps {
     placeholder?: string;
+    showAttachments?: boolean;
   }
 
-  export const Thread: FC<ThreadProps> = ({ placeholder = trans("chat.composerPlaceholder") }) => {
+  export const Thread: FC<ThreadProps> = ({ 
+    placeholder = trans("chat.composerPlaceholder"),
+    showAttachments = true 
+  }) => {
+    // Stable component reference so React doesn't unmount/remount on every render
+    const UserMessageComponent = useMemo<FC>(() => {
+      const Wrapper: FC = () => <UserMessage showAttachments={showAttachments} />;
+      Wrapper.displayName = "UserMessage";
+      return Wrapper;
+    }, [showAttachments]);
+
     return (
       <StyledThreadRoot
         className="aui-root aui-thread-root"
@@ -69,7 +79,7 @@ import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } fr
 
           <ThreadPrimitive.Messages
             components={{
-              UserMessage: UserMessage,
+              UserMessage: UserMessageComponent,
               EditComposer: EditComposer,
               AssistantMessage: AssistantMessage,
             }}
@@ -85,7 +95,7 @@ import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } fr
 
           <div className="aui-thread-viewport-footer">
             <ThreadScrollToBottom />
-            <Composer placeholder={placeholder} />
+            <Composer placeholder={placeholder} showAttachments={showAttachments} />
           </div>
         </ThreadPrimitive.Viewport>
       </StyledThreadRoot>
@@ -148,11 +158,18 @@ import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } fr
     );
   };
 
-  const Composer: FC<{ placeholder?: string }> = ({ placeholder = trans("chat.composerPlaceholder") }) => {
+  const Composer: FC<{ placeholder?: string; showAttachments?: boolean }> = ({ 
+    placeholder = trans("chat.composerPlaceholder"),
+    showAttachments = true 
+  }) => {
     return (
       <ComposerPrimitive.Root className="aui-composer-root">
-        <ComposerAttachments />
-        <ComposerAddAttachment />
+        {showAttachments && (
+          <>
+            <ComposerAttachments />
+            <ComposerAddAttachment />
+          </>
+        )}
         <ComposerPrimitive.Input
           rows={1}
           autoFocus
@@ -193,11 +210,11 @@ import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } fr
     );
   };
 
-  const UserMessage: FC = () => {
+  const UserMessage: FC<{ showAttachments?: boolean }> = ({ showAttachments = true }) => {
     return (
       <MessagePrimitive.Root className="aui-user-message-root">
         <UserActionBar />
-        <UserMessageAttachments />
+        {showAttachments && <UserMessageAttachments />}
 
         <div className="aui-user-message-content">
           <MessagePrimitive.Content />
@@ -273,11 +290,6 @@ import { ComposerAddAttachment, ComposerAttachments, UserMessageAttachments } fr
             </MessagePrimitive.If>
           </TooltipIconButton>
         </ActionBarPrimitive.Copy>
-        <ActionBarPrimitive.Reload asChild>
-          <TooltipIconButton tooltip="Refresh">
-            <RefreshCwIcon />
-          </TooltipIconButton>
-        </ActionBarPrimitive.Reload>
       </ActionBarPrimitive.Root>
     );
   };