feat(chatMessage): update attributes display (#1067)

frontend/app/chat/[chatId]/components/ChatMessages/__tests__/ChatMessages.test.tsx

@@ -18,6 +18,8 @@ const useChatContextMock = vi.fn(() => ({
       assistant: "Test assistant message",
       message_id: "123",
       user_message: "Test user message",
+      prompt_title: "Test prompt name",
+      brain_name: "Test brain name",
     },
   ],
 }));
@@ -37,7 +39,8 @@ describe("ChatMessages", () => {
   it("should render chat messages correctly", () => {
     const { getAllByTestId } = render(<ChatMessages />);
 
-    expect(getAllByTestId("brain-prompt-tags")).toBeDefined();
+    expect(getAllByTestId("brain-tags")).toBeDefined();
+    expect(getAllByTestId("prompt-tags")).toBeDefined();
 
     expect(getAllByTestId("chat-message-text")).toBeDefined();
   });

frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage.tsx → frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/ChatMessage.tsx

@@ -3,11 +3,14 @@ import ReactMarkdown from "react-markdown";
 
 import { cn } from "@/lib/utils";
 
+import { QuestionBrain } from "./components/QuestionBrain";
+import { QuestionPrompt } from "./components/QuestionPrompt";
+
 type ChatMessageProps = {
   speaker: string;
   text: string;
-  brainName?: string;
-  promptName?: string;
+  brainName?: string | null;
+  promptName?: string | null;
 };
 
 export const ChatMessage = React.forwardRef(
@@ -36,13 +39,9 @@ export const ChatMessage = React.forwardRef(
       <div className={containerWrapperClasses}>
         {" "}
         <div ref={ref} className={containerClasses}>
-          <div className="w-full">
-            <span
-              data-testid="brain-prompt-tags"
-              className="text-gray-400 mb-1 text-xs"
-            >
-              @{brainName ?? "-"} #{promptName ?? "-"}
-            </span>
+          <div className="w-full gap-1 flex">
+            <QuestionBrain brainName={brainName} />
+            <QuestionPrompt promptName={promptName} />
           </div>
           <div data-testid="chat-message-text">
             <ReactMarkdown className={markdownClasses}>{text}</ReactMarkdown>

frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionBrain.tsx

@@ -0,0 +1,18 @@
+import { Fragment } from "react";
+
+type QuestionBrainProps = {
+  brainName?: string | null;
+};
+export const QuestionBrain = ({
+  brainName,
+}: QuestionBrainProps): JSX.Element => {
+  if (brainName === undefined || brainName === null) {
+    return <Fragment />;
+  }
+
+  return (
+    <span data-testid="brain-tags" className="text-gray-400 mb-1 text-xs">
+      @{brainName}
+    </span>
+  );
+};

frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionPrompt.tsx

@@ -0,0 +1,18 @@
+import { Fragment } from "react";
+
+type QuestionProptProps = {
+  promptName?: string | null;
+};
+export const QuestionPrompt = ({
+  promptName,
+}: QuestionProptProps): JSX.Element => {
+  if (promptName === undefined || promptName === null) {
+    return <Fragment />;
+  }
+
+  return (
+    <span data-testid="prompt-tags" className="text-gray-400 mb-1 text-xs">
+      #{promptName}
+    </span>
+  );
+};

frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/index.ts

@@ -0,0 +1 @@
+export * from "./ChatMessage";

frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/index.ts

@@ -0,0 +1 @@
+export * from "./ChatMessage";

frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/index.ts

@@ -1 +1 @@
-export * from "./components/ChatMessage";
+export * from "./components/ChatMessage/ChatMessage";

frontend/app/chat/[chatId]/components/ChatMessages/components/index.ts

@@ -0,0 +1 @@
+export * from './ChatMessage'

frontend/app/chat/[chatId]/components/ChatMessages/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 
 import { useChatContext } from "@/lib/context";
 
-import { ChatMessage } from "./components/ChatMessage/components/ChatMessage";
+import { ChatMessage } from "./components";
 import { useChatMessages } from "./hooks/useChatMessages";
 
 export const ChatMessages = (): JSX.Element => {