New chat history layout with chat bubbles

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/Chartable/index.jsx

@@ -31,7 +31,6 @@ import CustomCell from "./CustomCell.jsx";
 import Tooltip from "./CustomTooltip.jsx";
 import { safeJsonParse } from "@/utils/request.js";
 import renderMarkdown from "@/utils/chat/markdown.js";
-import { WorkspaceProfileImage } from "../PromptReply/index.jsx";
 import { memo, useCallback, useState } from "react";
 import { saveAs } from "file-saver";
 import { useGenerateImage } from "recharts-to-png";
@@ -41,7 +40,7 @@ const dataFormatter = (number) => {
   return Intl.NumberFormat("us").format(number).toString();
 };
 
-export function Chartable({ props, workspace }) {
+export function Chartable({ props }) {
   const [getDivJpeg, { ref }] = useGenerateImage({
     quality: 1,
     type: "image/jpeg",
@@ -387,41 +386,36 @@ export function Chartable({ props, workspace }) {
 
   if (!!props.chatId) {
     return (
-      <div className="flex justify-center items-end w-full">
-        <div className="py-2 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
-          <div className="flex gap-x-5">
-            <WorkspaceProfileImage workspace={workspace} />
-            <div className="relative w-full">
-              <DownloadGraph onClick={handleDownload} />
-              <div ref={ref}>{renderChart()}</div>
-              <span
-                className={`flex flex-col gap-y-1 mt-2`}
-                dangerouslySetInnerHTML={{
-                  __html: renderMarkdown(content.caption),
-                }}
-              />
-            </div>
+      <div className="flex justify-start w-full">
+        <div className="py-2 px-4 w-full flex flex-col md:max-w-[80%]">
+          <div className="relative w-full">
+            <DownloadGraph onClick={handleDownload} />
+            <div ref={ref}>{renderChart()}</div>
+            <span
+              className="flex flex-col gap-y-1 mt-2"
+              dangerouslySetInnerHTML={{
+                __html: renderMarkdown(content.caption),
+              }}
+            />
           </div>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="flex justify-center items-end w-full">
-      <div className="py-2 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
+    <div className="flex justify-start w-full">
+      <div className="py-2 px-4 w-full flex flex-col md:max-w-[80%]">
         <div className="relative w-full">
           <DownloadGraph onClick={handleDownload} />
           <div ref={ref}>{renderChart()}</div>
         </div>
-        <div className="flex gap-x-5">
-          <span
-            className={`flex flex-col gap-y-1 mt-2`}
-            dangerouslySetInnerHTML={{
-              __html: renderMarkdown(content.caption),
-            }}
-          />
-        </div>
+        <span
+          className="flex flex-col gap-y-1 mt-2"
+          dangerouslySetInnerHTML={{
+            __html: renderMarkdown(content.caption),
+          }}
+        />
       </div>
     </div>
   );

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/ActionMenu/index.jsx

@@ -40,7 +40,7 @@ function ActionMenu({ chatId, forkThread, isEditing, role }) {
     <div className="mt-2 -ml-0.5 relative" ref={menuRef}>
       <button
         onClick={toggleMenu}
-        className="border-none text-[var(--theme-sidebar-footer-icon-fill)] hover:text-[var(--theme-sidebar-footer-icon-fill)] transition-colors duration-200"
+        className="border-none text-zinc-300 light:text-slate-500 transition-colors duration-200"
         data-tooltip-id="action-menu"
         data-tooltip-content={t("chat_window.more_actions")}
         aria-label={t("chat_window.more_actions")}

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/EditMessage/index.jsx

@@ -53,14 +53,10 @@ export function EditMessageAction({ chatId = null, role, isEditing }) {
             ? t("chat_window.edit_prompt")
             : t("chat_window.edit_response")
         } `}
-        className="border-none text-zinc-300"
+        className="border-none text-zinc-300 light:text-slate-500"
         aria-label={`Edit ${role === "user" ? t("chat_window.edit_prompt") : t("chat_window.edit_response")}`}
       >
-        <Pencil
-          color="var(--theme-sidebar-footer-icon-fill)"
-          size={21}
-          className="mb-1"
-        />
+        <Pencil size={21} className="mb-1" />
       </button>
     </div>
   );

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/RenderMetrics/index.jsx

@@ -130,7 +130,7 @@ export default function RenderMetrics({ metrics = {} }) {
       }
       className={`border-none flex justify-end items-center gap-x-[8px] ${showMetricsAutomatically ? "opacity-100" : "opacity-0"} md:group-hover:opacity-100 transition-all duration-300`}
     >
-      <p className="cursor-pointer text-xs font-mono text-theme-text-secondary opacity-50">
+      <p className="cursor-pointer text-xs font-mono text-zinc-400 light:text-slate-500">
         {buildMetricsString(metrics)}
       </p>
     </button>

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/asyncTts.jsx

@@ -65,7 +65,7 @@ export default function AsyncTTSMessage({ slug, chatId }) {
             ? t("pause_tts_speech_message")
             : t("chat_window.tts_speak_message")
         }
-        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
+        className="border-none text-zinc-300 light:text-slate-500"
         aria-label={speaking ? "Pause speech" : "Speak message"}
       >
         {speaking ? (

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/TTSButton/native.jsx

@@ -41,7 +41,7 @@ export default function NativeTTSMessage({ chatId, message }) {
         data-tooltip-content={
           speaking ? "Pause TTS speech of message" : "TTS Speak message"
         }
-        className="border-none text-[var(--theme-sidebar-footer-icon-fill)]"
+        className="border-none text-zinc-300 light:text-slate-500"
         aria-label={speaking ? "Pause speech" : "Speak message"}
       >
         {speaking ? (

frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx

@@ -18,7 +18,6 @@ const Actions = ({
   isEditing,
   role,
   metrics = {},
-  alignmentCls = "",
 }) => {
   const { t } = useTranslation();
   const [selectedFeedback, setSelectedFeedback] = useState(feedbackScore);
@@ -30,7 +29,9 @@ const Actions = ({
   };
 
   return (
-    <div className={`flex w-full justify-between items-center ${alignmentCls}`}>
+    <div
+      className={`flex w-full items-center ${role === "user" ? "justify-end" : "justify-between"}`}
+    >
       <div className="flex justify-start items-center gap-x-[8px]">
         <CopyMessage message={message} />
         <div className="md:group-hover:opacity-100 transition-all duration-300 md:opacity-0 flex justify-start items-center gap-x-[8px]">
@@ -80,11 +81,10 @@ function FeedbackButton({
         onClick={handleFeedback}
         data-tooltip-id="feedback-button"
         data-tooltip-content={tooltipContent}
-        className="text-zinc-300"
+        className="text-zinc-300 light:text-slate-500"
         aria-label={tooltipContent}
       >
         <IconComponent
-          color="var(--theme-sidebar-footer-icon-fill)"
           size={20}
           className="mb-1"
           weight={isSelected ? "fill" : "regular"}
@@ -105,21 +105,13 @@ function CopyMessage({ message }) {
           onClick={() => copyText(message)}
           data-tooltip-id="copy-assistant-text"
           data-tooltip-content={t("chat_window.copy")}
-          className="text-zinc-300"
+          className="text-zinc-300 light:text-slate-500"
           aria-label={t("chat_window.copy")}
         >
           {copied ? (
-            <Check
-              color="var(--theme-sidebar-footer-icon-fill)"
-              size={20}
-              className="mb-1"
-            />
+            <Check size={20} className="mb-1" />
           ) : (
-            <Copy
-              color="var(--theme-sidebar-footer-icon-fill)"
-              size={20}
-              className="mb-1"
-            />
+            <Copy size={20} className="mb-1" />
           )}
         </button>
       </div>
@@ -136,15 +128,10 @@ function RegenerateMessage({ regenerateMessage, chatId }) {
         onClick={() => regenerateMessage(chatId)}
         data-tooltip-id="regenerate-assistant-text"
         data-tooltip-content={t("chat_window.regenerate_response")}
-        className="border-none text-zinc-300"
+        className="border-none text-zinc-300 light:text-slate-500"
         aria-label={t("chat_window.regenerate")}
       >
-        <ArrowsClockwise
-          color="var(--theme-sidebar-footer-icon-fill)"
-          size={20}
-          className="mb-1"
-          weight="fill"
-        />
+        <ArrowsClockwise size={20} className="mb-1" weight="fill" />
       </button>
     </div>
   );