fix styles + remove duplication for the AI Chat component

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

@@ -9,7 +9,6 @@ import {
 import type {
   AppendMessage,
   CompleteAttachment,
-  ExternalStoreThreadData,
   ExternalStoreThreadListAdapter,
 } from "@assistant-ui/react";
 import { Thread } from "components/assistant-ui/thread";
@@ -24,11 +23,11 @@ import { universalAttachmentAdapter } from "../utils/attachmentAdapter";
 import {
   createAssistantErrorMessage,
   createUserMessage,
-  generateThreadTitle,
   getTextFromAppendMessage,
   getTextFromThreadContent,
-  shouldGenerateThreadTitle,
+  maybeUpdateInitialThreadTitle,
   toChatMessage,
+  toExternalThreadData,
 } from "../utils/assistantMessages";
 import { StyledChatContainer } from "./ChatContainerStyles";
 
@@ -50,10 +49,10 @@ function ChatContainerView(props: ChatCoreProps) {
   const currentMessages = actions.getCurrentMessages();
 
   useEffect(() => {
-    if (currentMessages.length > 0 && !isRunning) {
+    if (currentMessages.length > 0) {
       onConversationUpdateRef.current?.(currentMessages);
     }
-  }, [currentMessages, isRunning]);
+  }, [currentMessages]);
 
   useEffect(() => {
     onEventRef.current?.("componentLoad");
@@ -62,26 +61,14 @@ function ChatContainerView(props: ChatCoreProps) {
   const convertMessage = (message: ChatMessage): ThreadMessageLike => message;
 
   const updateInitialThreadTitle = async (userMessage: ChatMessage) => {
-    const currentThread = state.threadList.find(
-      (thread) => thread.threadId === state.currentThreadId
+    const updated = await maybeUpdateInitialThreadTitle(
+      userMessage,
+      state.threadList,
+      state.currentThreadId,
+      currentMessages.length,
+      actions.updateThread
     );
-    const defaultTitle = trans("chat.newChatTitle");
-
-    if (
-      !shouldGenerateThreadTitle(
-        currentThread?.title,
-        defaultTitle,
-        currentMessages.length
-      )
-    ) {
-      return;
-    }
-
-    const title = generateThreadTitle(userMessage);
-    if (!title || title === currentThread?.title) return;
-
-    await actions.updateThread(state.currentThreadId, { title });
-    props.onEvent?.("threadUpdated");
+    if (updated) props.onEvent?.("threadUpdated");
   };
 
   const onNew = async (message: AppendMessage) => {
@@ -148,14 +135,6 @@ function ChatContainerView(props: ChatCoreProps) {
     }
   };
 
-  const toExternalThreadData = (
-    thread: RegularThreadData,
-  ): ExternalStoreThreadData<"regular"> => ({
-    id: thread.threadId,
-    status: "regular",
-    title: thread.title,
-  });
-
   const threadListAdapter: ExternalStoreThreadListAdapter = {
     threadId: state.currentThreadId,
     threads: state.threadList

client/packages/lowcoder/src/comps/comps/chatComp/components/ChatContainerStyles.ts

@@ -91,6 +91,10 @@ export const StyledChatContainer = styled.div<StyledChatContainerProps>`
 
   /* Assistant Message Styles */
   .aui-assistant-message-content {
+    display: inline-block;
+    max-width: 85%;
+    padding: 10px 16px;
+    border-radius: 16px;
     background-color: ${(props) => props.$messagesStyle?.assistantMessageBackground || "#ffffff"};
     color: ${(props) => props.$messagesStyle?.assistantMessageText || "inherit"};
   }

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

@@ -8,7 +8,6 @@ import {
 } from "@assistant-ui/react";
 import type {
   AppendMessage,
-  ExternalStoreThreadData,
   ExternalStoreThreadListAdapter,
 } from "@assistant-ui/react";
 import { Thread } from "components/assistant-ui/thread";
@@ -25,12 +24,12 @@ import { TooltipProvider } from "@radix-ui/react-tooltip";
 import {
   createAssistantErrorMessage,
   createUserMessage,
-  generateThreadTitle,
   getAutomatorActionsFromMessage,
   getTextFromAppendMessage,
   getTextFromThreadContent,
-  shouldGenerateThreadTitle,
+  maybeUpdateInitialThreadTitle,
   toChatMessage,
+  toExternalThreadData,
 } from "../utils/assistantMessages";
 
 import { EditorContext } from "@lowcoder-ee/comps/editorState";
@@ -222,25 +221,13 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
   const convertMessage = (message: ChatMessage): ThreadMessageLike => message;
 
   const updateInitialThreadTitle = async (userMessage: ChatMessage) => {
-    const currentThread = state.threadList.find(
-      (thread) => thread.threadId === state.currentThreadId
+    await maybeUpdateInitialThreadTitle(
+      userMessage,
+      state.threadList,
+      state.currentThreadId,
+      currentMessages.length,
+      actions.updateThread
     );
-    const defaultTitle = trans("chat.newChatTitle");
-
-    if (
-      !shouldGenerateThreadTitle(
-        currentThread?.title,
-        defaultTitle,
-        currentMessages.length
-      )
-    ) {
-      return;
-    }
-
-    const title = generateThreadTitle(userMessage);
-    if (!title || title === currentThread?.title) return;
-
-    await actions.updateThread(state.currentThreadId, { title });
   };
 
   const onNew = async (message: AppendMessage) => {
@@ -323,14 +310,6 @@ function ChatPanelView({ messageHandler, placeholder, onMessageUpdate }: Omit<Ch
     }
   };
 
-  const toExternalThreadData = (
-    thread: RegularThreadData,
-  ): ExternalStoreThreadData<"regular"> => ({
-    id: thread.threadId,
-    status: "regular",
-    title: thread.title,
-  });
-
   const threadListAdapter: ExternalStoreThreadListAdapter = {
     threadId: state.currentThreadId,
     threads: state.threadList

client/packages/lowcoder/src/comps/comps/chatComp/utils/assistantMessages.ts

@@ -1,11 +1,13 @@
 import type {
   AppendMessage,
   CompleteAttachment,
+  ExternalStoreThreadData,
   TextMessagePart,
   ThreadAssistantMessagePart,
   ThreadMessageLike,
   ThreadUserMessagePart,
 } from "@assistant-ui/react";
+import { trans } from "i18n";
 
 import type { ChatMessage, ChatMessageContent } from "../types/chatTypes";
 
@@ -104,6 +106,38 @@ export const toAssistantMessage = (message: ThreadMessageLike): ChatMessage => {
   return chatMessage;
 };
 
+export const toExternalThreadData = (
+  thread: { threadId: string; title: string }
+): ExternalStoreThreadData<"regular"> => ({
+  id: thread.threadId,
+  status: "regular",
+  title: thread.title,
+});
+
+// Generates a thread title from the first user message, once. Returns
+// whether the title was actually changed, so callers can decide whether
+// to fire a threadUpdated event.
+export const maybeUpdateInitialThreadTitle = async (
+  userMessage: ChatMessage,
+  threadList: Array<{ threadId: string; title: string }>,
+  currentThreadId: string,
+  currentMessageCount: number,
+  updateThread: (threadId: string, updates: { title: string }) => Promise<void>
+): Promise<boolean> => {
+  const currentThread = threadList.find((t) => t.threadId === currentThreadId);
+  const defaultTitle = trans("chat.newChatTitle");
+
+  if (!shouldGenerateThreadTitle(currentThread?.title, defaultTitle, currentMessageCount)) {
+    return false;
+  }
+
+  const title = generateThreadTitle(userMessage);
+  if (!title || title === currentThread?.title) return false;
+
+  await updateThread(currentThreadId, { title });
+  return true;
+};
+
 export const getAutomatorActionsFromMessage = (message: ChatMessage) => {
   const toolPart = message.content.find(
     (part): part is Extract<ThreadAssistantMessagePart, { type: "tool-call" }> =>