From 23b21026c21a84b58150a665413fb8cad5d68b83 Mon Sep 17 00:00:00 2001
From: Mamadou DICKO <63923024+mamadoudicko@users.noreply.github.com>
Date: Wed, 30 Aug 2023 16:28:10 +0200
Subject: [PATCH] feat(chatMessage): update attributes display (#1067)

---
 .../__tests__/ChatMessages.test.tsx            |  5 ++++-
 .../{ => ChatMessage}/ChatMessage.tsx          | 17 ++++++++---------
 .../ChatMessage/components/QuestionBrain.tsx   | 18 ++++++++++++++++++
 .../ChatMessage/components/QuestionPrompt.tsx  | 18 ++++++++++++++++++
 .../components/ChatMessage/index.ts            |  1 +
 .../components/ChatMessage/components/index.ts |  1 +
 .../components/ChatMessage/index.ts            |  2 +-
 .../ChatMessages/components/index.ts           |  1 +
 .../[chatId]/components/ChatMessages/index.tsx |  2 +-
 9 files changed, 53 insertions(+), 12 deletions(-)
 rename frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/{ => ChatMessage}/ChatMessage.tsx (78%)
 create mode 100644 frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionBrain.tsx
 create mode 100644 frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionPrompt.tsx
 create mode 100644 frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/index.ts
 create mode 100644 frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/index.ts
 create mode 100644 frontend/app/chat/[chatId]/components/ChatMessages/components/index.ts

diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/__tests__/ChatMessages.test.tsx b/frontend/app/chat/[chatId]/components/ChatMessages/__tests__/ChatMessages.test.tsx
index ef6b1a903..b0b71fa74 100644
--- a/frontend/app/chat/[chatId]/components/ChatMessages/__tests__/ChatMessages.test.tsx
+++ b/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();
   });
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage.tsx b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/ChatMessage.tsx
similarity index 78%
rename from frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage.tsx
rename to frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/ChatMessage.tsx
index dd02ef916..6624aa622 100644
--- a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage.tsx
+++ b/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>
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionBrain.tsx b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionBrain.tsx
new file mode 100644
index 000000000..00028a544
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionPrompt.tsx b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/components/QuestionPrompt.tsx
new file mode 100644
index 000000000..1837cbbb7
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/index.ts b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/index.ts
new file mode 100644
index 000000000..69884931d
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/ChatMessage/index.ts
@@ -0,0 +1 @@
+export * from "./ChatMessage";
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/index.ts b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/index.ts
new file mode 100644
index 000000000..69884931d
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/components/index.ts
@@ -0,0 +1 @@
+export * from "./ChatMessage";
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/index.ts b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/index.ts
index cee38ecac..e76d21b76 100644
--- a/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/index.ts
+++ b/frontend/app/chat/[chatId]/components/ChatMessages/components/ChatMessage/index.ts
@@ -1 +1 @@
-export * from "./components/ChatMessage";
+export * from "./components/ChatMessage/ChatMessage";
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/components/index.ts b/frontend/app/chat/[chatId]/components/ChatMessages/components/index.ts
new file mode 100644
index 000000000..8bb80d50e
--- /dev/null
+++ b/frontend/app/chat/[chatId]/components/ChatMessages/components/index.ts
@@ -0,0 +1 @@
+export * from './ChatMessage'
\ No newline at end of file
diff --git a/frontend/app/chat/[chatId]/components/ChatMessages/index.tsx b/frontend/app/chat/[chatId]/components/ChatMessages/index.tsx
index de42cab29..4c507c5e4 100644
--- a/frontend/app/chat/[chatId]/components/ChatMessages/index.tsx
+++ b/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 => {