Enhance chat UI and compatible anthropic thinking messages (#1018)

frontend/src/components/workspace/artifacts/context.tsx

@@ -57,6 +57,7 @@ export function ArtifactsProvider({ children }: ArtifactsProviderProps) {
   const deselect = useCallback(() => {
     setSelectedArtifact(null);
     setAutoSelect(true);
+    setOpen(false);
   }, []);
 
   const value: ArtifactsContextType = {

frontend/src/components/workspace/chats/chat-box.tsx

@@ -27,7 +27,9 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
   threadId,
 }) => {
   const { thread } = useThread();
+  const threadIdRef = useRef(threadId);
   const layoutRef = useRef<GroupImperativeHandle>(null);
+
   const {
     artifacts,
     open: artifactsOpen,
@@ -40,13 +42,22 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
 
   const [autoSelectFirstArtifact, setAutoSelectFirstArtifact] = useState(true);
   useEffect(() => {
+    if (threadIdRef.current !== threadId) {
+      threadIdRef.current = threadId;
+      deselect();
+    }
+
+    // Update artifacts from the current thread
     setArtifacts(thread.values.artifacts);
+
+    // Deselect if the currently selected artifact no longer exists
     if (
-      thread.values.artifacts?.length === 0 ||
-      (selectedArtifact && !thread.values.artifacts?.includes(selectedArtifact))
+      selectedArtifact &&
+      !thread.values.artifacts?.includes(selectedArtifact)
     ) {
       deselect();
     }
+
     if (
       env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" &&
       autoSelectFirstArtifact
@@ -57,6 +68,7 @@ const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
       }
     }
   }, [
+    threadId,
     autoSelectFirstArtifact,
     deselect,
     selectArtifact,

frontend/src/components/workspace/messages/message-list.tsx

@@ -54,13 +54,15 @@ export function MessageList({
       <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-8 pt-12">
         {groupMessages(messages, (group) => {
           if (group.type === "human" || group.type === "assistant") {
-            return (
-              <MessageListItem
-                key={group.id}
-                message={group.messages[0]!}
-                isLoading={thread.isLoading}
-              />
-            );
+            return group.messages.map((msg) => {
+              return (
+                <MessageListItem
+                  key={`${group.id}/${msg.id}`}
+                  message={msg}
+                  isLoading={thread.isLoading}
+                />
+              );
+            });
           } else if (group.type === "assistant:clarification") {
             const message = group.messages[0];
             if (message && hasContent(message)) {

frontend/src/components/workspace/thread-title.tsx

@@ -18,15 +18,17 @@ export function ThreadTitle({
   const { t } = useI18n();
   const { isNewThread } = useThreadChat();
   useEffect(() => {
-    const pageTitle = isNewThread
-      ? t.pages.newChat
-      : thread.values?.title && thread.values.title !== "Untitled"
-        ? thread.values.title
-        : t.pages.untitled;
+    let _title = t.pages.untitled;
+
+    if (thread.values?.title) {
+      _title = thread.values.title;
+    } else if (isNewThread) {
+      _title = t.pages.newChat;
+    }
     if (thread.isThreadLoading) {
       document.title = `Loading... - ${t.pages.appName}`;
     } else {
-      document.title = `${pageTitle} - ${t.pages.appName}`;
+      document.title = `${_title} - ${t.pages.appName}`;
     }
   }, [
     isNewThread,