From bfeb552c24d8b1883dd4d6ed460db2ea8f3b011d Mon Sep 17 00:00:00 2001
From: MrGaoGang <gaogangwork@qq.com>
Date: Mon, 17 Feb 2025 20:10:40 +0800
Subject: [PATCH 1/6] feat: support user select message  direction

---
 .../HistoricalMessage/Actions/index.jsx       |  6 +-
 .../ChatHistory/HistoricalMessage/index.jsx   |  9 +-
 frontend/src/hooks/useMessageDirection.js     | 22 +++++
 .../Appearance/MessageDirection/index.jsx     | 86 +++++++++++++++++++
 .../GeneralSettings/Appearance/index.jsx      |  2 +
 5 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/hooks/useMessageDirection.js
 create mode 100644 frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
index 0b05576008b..2305bb62de3 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
@@ -5,6 +5,7 @@ import Workspace from "@/models/workspace";
 import { EditMessageAction } from "./EditMessage";
 import RenderMetrics from "./RenderMetrics";
 import ActionMenu from "./ActionMenu";
+import { useMessageDirection } from "@/hooks/useMessageDirection";
 
 const Actions = ({
   message,
@@ -25,9 +26,12 @@ const Actions = ({
     await Workspace.updateChatFeedback(chatId, slug, updatedFeedback);
     setSelectedFeedback(updatedFeedback);
   };
+  const { msgDirection } = useMessageDirection();
+
+  const direction = role === "user" && msgDirection==='left_right' ? "flex-row-reverse" : ""
 
   return (
-    <div className="flex w-full justify-between items-center">
+    <div className={`flex w-full justify-between items-center ${direction}`}>
       <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]">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index a5d60db4e07..b4ef899be03 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -16,6 +16,7 @@ import {
   THOUGHT_REGEX_OPEN,
   ThoughtChainComponent,
 } from "../ThoughtContainer";
+import { useMessageDirection } from "@/hooks/useMessageDirection";
 
 const DOMPurify = createDOMPurify(window);
 DOMPurify.setConfig({
@@ -48,7 +49,10 @@ const HistoricalMessage = ({
     element.style.height = "auto";
     element.style.height = element.scrollHeight + "px";
   };
+  const { msgDirection } = useMessageDirection();
 
+  const direction =
+    role === "user" && msgDirection === "left_right" ? "flex-row-reverse" : "";
   if (!!error) {
     return (
       <div
@@ -56,7 +60,7 @@ const HistoricalMessage = ({
         className={`flex justify-center items-end w-full bg-theme-bg-chat`}
       >
         <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
-          <div className="flex gap-x-5">
+          <div className={`flex gap-x-5 ${direction}`}>
             <ProfileImage role={role} workspace={workspace} />
             <div className="p-2 rounded-lg bg-red-50 text-red-500">
               <span className="inline-block">
@@ -74,6 +78,7 @@ const HistoricalMessage = ({
   }
 
   if (completeDelete) return null;
+
   return (
     <div
       key={uuid}
@@ -83,7 +88,7 @@ const HistoricalMessage = ({
       } flex justify-center items-end w-full group bg-theme-bg-chat`}
     >
       <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
-        <div className="flex gap-x-5">
+        <div className={`flex gap-x-5 ${direction}`}>
           <div className="flex flex-col items-center">
             <ProfileImage role={role} workspace={workspace} />
             <div className="mt-1 -mb-10">
diff --git a/frontend/src/hooks/useMessageDirection.js b/frontend/src/hooks/useMessageDirection.js
new file mode 100644
index 00000000000..774d2eb2f12
--- /dev/null
+++ b/frontend/src/hooks/useMessageDirection.js
@@ -0,0 +1,22 @@
+import {
+  useState,
+  useEffect
+} from "react";
+
+
+export function useMessageDirection() {
+  const [msgDirection, setMsgDirection] = useState(() => {
+    return localStorage.getItem("msg-direction") || 'left';
+  });
+
+  useEffect(() => {
+    if (msgDirection) {
+      localStorage.setItem("msg-direction", msgDirection);
+    }
+  }, [msgDirection]);
+
+  return {
+    msgDirection,
+    setMsgDirection
+  };
+}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
new file mode 100644
index 00000000000..6dc1f2898ed
--- /dev/null
+++ b/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
@@ -0,0 +1,86 @@
+import { useMessageDirection } from "@/hooks/useMessageDirection";
+
+export function MessageDirection() {
+  const { msgDirection, setMsgDirection } = useMessageDirection();
+  return (
+    <div className="flex flex-col gap-y-1 mt-4">
+      <h2 className="text-base leading-6 font-bold text-white">
+        Message Direction
+      </h2>
+      <p className="text-xs leading-[18px] font-base text-white/60">
+        Select the message alignment mode for user input!
+      </p>
+
+      <div className="flex flex-row">
+        <ItemDirection
+          active={msgDirection === "left"}
+          reverse={true}
+          msg="Align bubbles to the left"
+          onSelect={() => {
+            setMsgDirection("left");
+          }}
+        />
+        {/* Bottom section */}
+        <ItemDirection
+          active={msgDirection === "left_right"}
+          reverse={false}
+          msg="Message bubbles are distributed left and right"
+          onSelect={() => {
+            setMsgDirection("left_right");
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+function ItemDirection({ active, reverse, onSelect, msg }) {
+  return (
+    <div
+      className={`flex:1 p-4 bg-white rounded-xl ml-10 border  ${active ? "border-[#32D583]" : ""}`}
+    >
+      {/* Chat messages container */}
+      <div className="space-y-4 mb-4">
+        {/* Left aligned message */}
+        <div className="flex items-start gap-2">
+          <div className="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0" />
+          <div className="bg-gray-100 rounded-2xl px-4 py-2">
+            <p className="text-gray-700">This is a reply message</p>
+          </div>
+        </div>
+
+        {/* Right aligned message */}
+        <div
+          className={`flex items-start justify-end gap-2 ${reverse ? "flex-row-reverse" : ""}`}
+        >
+          <div className="bg-blue-50 rounded-2xl px-4 py-2">
+            <p className="text-gray-700">This is a user message</p>
+          </div>
+          <div className="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0" />
+        </div>
+        {/* Another left aligned message */}
+        <div className="flex items-start gap-2">
+          <div className="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0" />
+          <div className="bg-gray-100 rounded-2xl px-4 py-2">
+            <p className="text-gray-700">A another reply message</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Bottom section */}
+      <div className="flex items-center gap-2 p-4 bg-blue-50 rounded-xl">
+        {active ? (
+          <div
+            className={`w-5 h-5 rounded-full border-white border-2 bg-[#32D583] flex-shrink-0`}
+          />
+        ) : (
+          <div
+            className={`w-4 h-4 rounded-full border-gray border bg-white flex-shrink-0`}
+            onClick={onSelect}
+          />
+        )}
+        <span className="text-gray-700">{msg}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 00a415bb2d5..81de0340ed2 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -10,6 +10,7 @@ import LanguagePreference from "./LanguagePreference";
 import CustomSiteSettings from "./CustomSiteSettings";
 import ShowScrollbar from "./ShowScrollbar";
 import ThemePreference from "./ThemePreference";
+import { MessageDirection } from "./MessageDirection";
 
 export default function Appearance() {
   const { t } = useTranslation();
@@ -34,6 +35,7 @@ export default function Appearance() {
           </div>
           <ThemePreference />
           <LanguagePreference />
+          <MessageDirection/>
           <ShowScrollbar />
           <CustomLogo />
           <CustomAppName />

From 0ef1f7f3f0174b5ceb436ea6ba8b2a60f933f614 Mon Sep 17 00:00:00 2001
From: MrGaoGang <gaogangwork@qq.com>
Date: Mon, 17 Feb 2025 20:27:08 +0800
Subject: [PATCH 2/6] feat: optimizing the code

---
 .../ChatHistory/HistoricalMessage/Actions/index.jsx      | 7 ++-----
 .../ChatHistory/HistoricalMessage/index.jsx              | 9 ++++-----
 frontend/src/hooks/useMessageDirection.js                | 7 +++++--
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
index 2305bb62de3..5ca5c0c348d 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
@@ -26,12 +26,9 @@ const Actions = ({
     await Workspace.updateChatFeedback(chatId, slug, updatedFeedback);
     setSelectedFeedback(updatedFeedback);
   };
-  const { msgDirection } = useMessageDirection();
-
-  const direction = role === "user" && msgDirection==='left_right' ? "flex-row-reverse" : ""
-
+  const { directionCls } = useMessageDirection(role);
   return (
-    <div className={`flex w-full justify-between items-center ${direction}`}>
+    <div className={`flex w-full justify-between items-center ${directionCls}`}>
       <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]">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index b4ef899be03..44b9b09aa38 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -49,10 +49,9 @@ const HistoricalMessage = ({
     element.style.height = "auto";
     element.style.height = element.scrollHeight + "px";
   };
-  const { msgDirection } = useMessageDirection();
+  const { directionCls } = useMessageDirection(role);
+
 
-  const direction =
-    role === "user" && msgDirection === "left_right" ? "flex-row-reverse" : "";
   if (!!error) {
     return (
       <div
@@ -60,7 +59,7 @@ const HistoricalMessage = ({
         className={`flex justify-center items-end w-full bg-theme-bg-chat`}
       >
         <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
-          <div className={`flex gap-x-5 ${direction}`}>
+          <div className={`flex gap-x-5 ${directionCls}`}>
             <ProfileImage role={role} workspace={workspace} />
             <div className="p-2 rounded-lg bg-red-50 text-red-500">
               <span className="inline-block">
@@ -88,7 +87,7 @@ const HistoricalMessage = ({
       } flex justify-center items-end w-full group bg-theme-bg-chat`}
     >
       <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
-        <div className={`flex gap-x-5 ${direction}`}>
+        <div className={`flex gap-x-5 ${directionCls}`}>
           <div className="flex flex-col items-center">
             <ProfileImage role={role} workspace={workspace} />
             <div className="mt-1 -mb-10">
diff --git a/frontend/src/hooks/useMessageDirection.js b/frontend/src/hooks/useMessageDirection.js
index 774d2eb2f12..cd1e97d4438 100644
--- a/frontend/src/hooks/useMessageDirection.js
+++ b/frontend/src/hooks/useMessageDirection.js
@@ -4,7 +4,7 @@ import {
 } from "react";
 
 
-export function useMessageDirection() {
+export function useMessageDirection(role) {
   const [msgDirection, setMsgDirection] = useState(() => {
     return localStorage.getItem("msg-direction") || 'left';
   });
@@ -15,8 +15,11 @@ export function useMessageDirection() {
     }
   }, [msgDirection]);
 
+  const isLeftToRight = role === 'user' && msgDirection === 'left_right';
   return {
     msgDirection,
-    setMsgDirection
+    setMsgDirection,
+    isLeftToRight: isLeftToRight,
+    directionCls: isLeftToRight ? 'flex-row-reverse' : ''
   };
 }

From 116613825f1b6b6eaccd7abed0d00e05b963333b Mon Sep 17 00:00:00 2001
From: MrGaoGang <gaogangwork@qq.com>
Date: Mon, 17 Feb 2025 20:38:37 +0800
Subject: [PATCH 3/6] feat: lint code

---
 .../ChatHistory/HistoricalMessage/index.jsx          |  1 -
 frontend/src/hooks/useMessageDirection.js            | 12 ++++--------
 .../src/pages/GeneralSettings/Appearance/index.jsx   |  2 +-
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index 44b9b09aa38..5495357a25b 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -51,7 +51,6 @@ const HistoricalMessage = ({
   };
   const { directionCls } = useMessageDirection(role);
 
-
   if (!!error) {
     return (
       <div
diff --git a/frontend/src/hooks/useMessageDirection.js b/frontend/src/hooks/useMessageDirection.js
index cd1e97d4438..fcd1d8f0b20 100644
--- a/frontend/src/hooks/useMessageDirection.js
+++ b/frontend/src/hooks/useMessageDirection.js
@@ -1,12 +1,8 @@
-import {
-  useState,
-  useEffect
-} from "react";
-
+import { useState, useEffect } from "react";
 
 export function useMessageDirection(role) {
   const [msgDirection, setMsgDirection] = useState(() => {
-    return localStorage.getItem("msg-direction") || 'left';
+    return localStorage.getItem("msg-direction") || "left";
   });
 
   useEffect(() => {
@@ -15,11 +11,11 @@ export function useMessageDirection(role) {
     }
   }, [msgDirection]);
 
-  const isLeftToRight = role === 'user' && msgDirection === 'left_right';
+  const isLeftToRight = role === "user" && msgDirection === "left_right";
   return {
     msgDirection,
     setMsgDirection,
     isLeftToRight: isLeftToRight,
-    directionCls: isLeftToRight ? 'flex-row-reverse' : ''
+    directionCls: isLeftToRight ? "flex-row-reverse" : "",
   };
 }
diff --git a/frontend/src/pages/GeneralSettings/Appearance/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
index 81de0340ed2..0ff55aa39b8 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/index.jsx
@@ -35,7 +35,7 @@ export default function Appearance() {
           </div>
           <ThemePreference />
           <LanguagePreference />
-          <MessageDirection/>
+          <MessageDirection />
           <ShowScrollbar />
           <CustomLogo />
           <CustomAppName />

From 63255e1a516075a39143688b18435b27c7ec015a Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 18 Feb 2025 21:45:05 -0800
Subject: [PATCH 4/6] fix: prevent localstorage read on every message component
 render ui: refactor alignment UI selector for dark and light mode with simple
 styling

---
 .../HistoricalMessage/Actions/index.jsx       |  6 +-
 .../ChatHistory/HistoricalMessage/index.jsx   |  8 +-
 .../ChatContainer/ChatHistory/index.jsx       |  6 ++
 frontend/src/hooks/useChatMessageAlignment.js | 30 +++++++
 frontend/src/hooks/useMessageDirection.js     | 21 -----
 .../Appearance/MessageDirection/index.jsx     | 89 ++++++++-----------
 6 files changed, 78 insertions(+), 82 deletions(-)
 create mode 100644 frontend/src/hooks/useChatMessageAlignment.js
 delete mode 100644 frontend/src/hooks/useMessageDirection.js

diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
index 5ca5c0c348d..70236ee9dd0 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/Actions/index.jsx
@@ -5,7 +5,6 @@ import Workspace from "@/models/workspace";
 import { EditMessageAction } from "./EditMessage";
 import RenderMetrics from "./RenderMetrics";
 import ActionMenu from "./ActionMenu";
-import { useMessageDirection } from "@/hooks/useMessageDirection";
 
 const Actions = ({
   message,
@@ -18,6 +17,7 @@ const Actions = ({
   isEditing,
   role,
   metrics = {},
+  alignmentCls = "",
 }) => {
   const [selectedFeedback, setSelectedFeedback] = useState(feedbackScore);
   const handleFeedback = async (newFeedback) => {
@@ -26,9 +26,9 @@ const Actions = ({
     await Workspace.updateChatFeedback(chatId, slug, updatedFeedback);
     setSelectedFeedback(updatedFeedback);
   };
-  const { directionCls } = useMessageDirection(role);
+
   return (
-    <div className={`flex w-full justify-between items-center ${directionCls}`}>
+    <div className={`flex w-full justify-between items-center ${alignmentCls}`}>
       <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]">
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
index 7be3c747435..7a913b96277 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
@@ -16,7 +16,6 @@ import {
   THOUGHT_REGEX_OPEN,
   ThoughtChainComponent,
 } from "../ThoughtContainer";
-import { useMessageDirection } from "@/hooks/useMessageDirection";
 
 const HistoricalMessage = ({
   uuid = v4(),
@@ -33,6 +32,7 @@ const HistoricalMessage = ({
   saveEditedMessage,
   forkThread,
   metrics = {},
+  alignmentCls = "",
 }) => {
   const { isEditing } = useEditMessage({ chatId, role });
   const { isDeleted, completeDelete, onEndAnimation } = useWatchDeleteMessage({
@@ -44,7 +44,6 @@ const HistoricalMessage = ({
     element.style.height = "auto";
     element.style.height = element.scrollHeight + "px";
   };
-  const { directionCls } = useMessageDirection(role);
 
   if (!!error) {
     return (
@@ -53,7 +52,7 @@ const HistoricalMessage = ({
         className={`flex justify-center items-end w-full bg-theme-bg-chat`}
       >
         <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
-          <div className={`flex gap-x-5 ${directionCls}`}>
+          <div className={`flex gap-x-5 ${alignmentCls}`}>
             <ProfileImage role={role} workspace={workspace} />
             <div className="p-2 rounded-lg bg-red-50 text-red-500">
               <span className="inline-block">
@@ -81,7 +80,7 @@ const HistoricalMessage = ({
       } flex justify-center items-end w-full group bg-theme-bg-chat`}
     >
       <div className="py-8 px-4 w-full flex gap-x-5 md:max-w-[80%] flex-col">
-        <div className={`flex gap-x-5 ${directionCls}`}>
+        <div className={`flex gap-x-5 ${alignmentCls}`}>
           <div className="flex flex-col items-center">
             <ProfileImage role={role} workspace={workspace} />
             <div className="mt-1 -mb-10">
@@ -126,6 +125,7 @@ const HistoricalMessage = ({
             role={role}
             forkThread={forkThread}
             metrics={metrics}
+            alignmentCls={alignmentCls}
           />
         </div>
         {role === "assistant" && <Citations sources={sources} />}
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
index c78a8f21aeb..373660230eb 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
@@ -14,6 +14,7 @@ import paths from "@/utils/paths";
 import Appearance from "@/models/appearance";
 import useTextSize from "@/hooks/useTextSize";
 import { v4 } from "uuid";
+import { useChatMessageAlignment } from "@/hooks/useChatMessageAlignment";
 
 export default function ChatHistory({
   history = [],
@@ -33,6 +34,7 @@ export default function ChatHistory({
   const isStreaming = history[history.length - 1]?.animate;
   const { showScrollbar } = Appearance.getSettings();
   const { textSizeClass } = useTextSize();
+  const { getMessageAlignment } = useChatMessageAlignment();
 
   useEffect(() => {
     if (!isUserScrolling && (isAtBottom || isStreaming)) {
@@ -146,6 +148,7 @@ export default function ChatHistory({
         regenerateAssistantMessage,
         saveEditedMessage,
         forkThread,
+        getMessageAlignment,
       }),
     [
       workspace,
@@ -282,6 +285,7 @@ function WorkspaceChatSuggestions({ suggestions = [], sendSuggestion }) {
  * @param {Function} param0.regenerateAssistantMessage - The function to regenerate the assistant message.
  * @param {Function} param0.saveEditedMessage - The function to save the edited message.
  * @param {Function} param0.forkThread - The function to fork the thread.
+ * @param {Function} param0.getMessageAlignment - The function to get the alignment of the message (returns class).
  * @returns {Array} The compiled history of messages.
  */
 function buildMessages({
@@ -290,6 +294,7 @@ function buildMessages({
   regenerateAssistantMessage,
   saveEditedMessage,
   forkThread,
+  getMessageAlignment,
 }) {
   return history.reduce((acc, props, index) => {
     const isLastBotReply =
@@ -338,6 +343,7 @@ function buildMessages({
           saveEditedMessage={saveEditedMessage}
           forkThread={forkThread}
           metrics={props.metrics}
+          alignmentCls={getMessageAlignment?.(props.role)}
         />
       );
     }
diff --git a/frontend/src/hooks/useChatMessageAlignment.js b/frontend/src/hooks/useChatMessageAlignment.js
new file mode 100644
index 00000000000..d24dc54f877
--- /dev/null
+++ b/frontend/src/hooks/useChatMessageAlignment.js
@@ -0,0 +1,30 @@
+import { useState, useEffect, useCallback } from "react";
+const ALIGNMENT_STORAGE_KEY = "anythingllm-chat-message-alignment";
+
+/**
+ * Store the message alignment in localStorage as well as provide a function to get the alignment of a message via role.
+ * @returns {{msgDirection: 'left'|'left_right', setMsgDirection: (direction: string) => void, getMessageAlignment: (role: string) => {isLeftToRight: boolean, directionCls: string}}} - The message direction and the class name for the direction.
+ */
+export function useChatMessageAlignment() {
+  const [msgDirection, setMsgDirection] = useState(
+    () => localStorage.getItem(ALIGNMENT_STORAGE_KEY) ?? "left"
+  );
+
+  useEffect(() => {
+    if (msgDirection) localStorage.setItem(ALIGNMENT_STORAGE_KEY, msgDirection);
+  }, [msgDirection]);
+
+  const getMessageAlignment = useCallback(
+    (role) => {
+      const isLeftToRight = role === "user" && msgDirection === "left_right";
+      return isLeftToRight ? "flex-row-reverse" : "";
+    },
+    [msgDirection]
+  );
+
+  return {
+    msgDirection,
+    setMsgDirection,
+    getMessageAlignment,
+  };
+}
diff --git a/frontend/src/hooks/useMessageDirection.js b/frontend/src/hooks/useMessageDirection.js
deleted file mode 100644
index fcd1d8f0b20..00000000000
--- a/frontend/src/hooks/useMessageDirection.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useState, useEffect } from "react";
-
-export function useMessageDirection(role) {
-  const [msgDirection, setMsgDirection] = useState(() => {
-    return localStorage.getItem("msg-direction") || "left";
-  });
-
-  useEffect(() => {
-    if (msgDirection) {
-      localStorage.setItem("msg-direction", msgDirection);
-    }
-  }, [msgDirection]);
-
-  const isLeftToRight = role === "user" && msgDirection === "left_right";
-  return {
-    msgDirection,
-    setMsgDirection,
-    isLeftToRight: isLeftToRight,
-    directionCls: isLeftToRight ? "flex-row-reverse" : "",
-  };
-}
diff --git a/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
index 6dc1f2898ed..d20656c3f41 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
@@ -1,86 +1,67 @@
-import { useMessageDirection } from "@/hooks/useMessageDirection";
+import { useChatMessageAlignment } from "@/hooks/useChatMessageAlignment";
+import { Tooltip } from "react-tooltip";
 
 export function MessageDirection() {
-  const { msgDirection, setMsgDirection } = useMessageDirection();
+  const { msgDirection, setMsgDirection } = useChatMessageAlignment();
+
   return (
     <div className="flex flex-col gap-y-1 mt-4">
       <h2 className="text-base leading-6 font-bold text-white">
-        Message Direction
+        Message Chat Alignment
       </h2>
       <p className="text-xs leading-[18px] font-base text-white/60">
-        Select the message alignment mode for user input!
+        Select the message alignment mode when using the chat interface.
       </p>
-
-      <div className="flex flex-row">
+      <div className="flex flex-row flex-wrap gap-x-4 pt-1">
         <ItemDirection
           active={msgDirection === "left"}
-          reverse={true}
-          msg="Align bubbles to the left"
+          reverse={false}
+          msg="User and AI messages are aligned to the left (default)"
           onSelect={() => {
             setMsgDirection("left");
           }}
         />
-        {/* Bottom section */}
         <ItemDirection
           active={msgDirection === "left_right"}
-          reverse={false}
-          msg="Message bubbles are distributed left and right"
+          reverse={true}
+          msg="User and AI messages are distributed left and right alternating each message"
           onSelect={() => {
             setMsgDirection("left_right");
           }}
         />
       </div>
+      <Tooltip
+        id="alignment-choice-item"
+        place="top"
+        delayShow={300}
+        className="tooltip !text-xs z-99"
+      />
     </div>
   );
 }
 
 function ItemDirection({ active, reverse, onSelect, msg }) {
   return (
-    <div
-      className={`flex:1 p-4 bg-white rounded-xl ml-10 border  ${active ? "border-[#32D583]" : ""}`}
+    <button
+      data-tooltip-id="alignment-choice-item"
+      data-tooltip-content={msg}
+      type="button"
+      className={`flex:1 p-4 bg-transparent hover:light:bg-gray-100 hover:bg-gray-700/20 rounded-xl border w-[250px] ${active ? "border-primary-button" : " border-theme-border-sidebar-item"}`}
+      onClick={onSelect}
     >
-      {/* Chat messages container */}
-      <div className="space-y-4 mb-4">
-        {/* Left aligned message */}
-        <div className="flex items-start gap-2">
-          <div className="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0" />
-          <div className="bg-gray-100 rounded-2xl px-4 py-2">
-            <p className="text-gray-700">This is a reply message</p>
-          </div>
-        </div>
-
-        {/* Right aligned message */}
-        <div
-          className={`flex items-start justify-end gap-2 ${reverse ? "flex-row-reverse" : ""}`}
-        >
-          <div className="bg-blue-50 rounded-2xl px-4 py-2">
-            <p className="text-gray-700">This is a user message</p>
-          </div>
-          <div className="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0" />
-        </div>
-        {/* Another left aligned message */}
-        <div className="flex items-start gap-2">
-          <div className="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0" />
-          <div className="bg-gray-100 rounded-2xl px-4 py-2">
-            <p className="text-gray-700">A another reply message</p>
-          </div>
-        </div>
-      </div>
-
-      {/* Bottom section */}
-      <div className="flex items-center gap-2 p-4 bg-blue-50 rounded-xl">
-        {active ? (
+      <div className="space-y-4">
+        {Array.from({ length: 3 }).map((_, index) => (
           <div
-            className={`w-5 h-5 rounded-full border-white border-2 bg-[#32D583] flex-shrink-0`}
-          />
-        ) : (
-          <div
-            className={`w-4 h-4 rounded-full border-gray border bg-white flex-shrink-0`}
-            onClick={onSelect}
-          />
-        )}
-        <span className="text-gray-700">{msg}</span>
+            key={index}
+            className={`flex items-center justify-end gap-2 ${reverse && index % 2 === 0 ? "flex-row-reverse" : ""}`}
+          >
+            <div
+              className={`w-4 h-4 rounded-full ${index % 2 === 0 ? "bg-primary-button" : "bg-white light:bg-black"} flex-shrink-0`}
+            />
+            <div className="bg-gray-600 light:bg-gray-200 rounded-2xl px-4 py-2 h-[20px] w-full" />
+          </div>
+        ))}
       </div>
-    </div>
+    </button>
   );
 }

From 723360d88b2d164bc15c0adad7d4da34ab519297 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 18 Feb 2025 21:56:31 -0800
Subject: [PATCH 5/6] docs: update jsdoc comment for hook fix: apply chat
 alignment to homepage chat

---
 frontend/src/components/DefaultChat/index.jsx | 24 ++++++++++---------
 frontend/src/hooks/useChatMessageAlignment.js |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/DefaultChat/index.jsx b/frontend/src/components/DefaultChat/index.jsx
index 4340adaeafe..9519aacf70d 100644
--- a/frontend/src/components/DefaultChat/index.jsx
+++ b/frontend/src/components/DefaultChat/index.jsx
@@ -18,8 +18,10 @@ import { userFromStorage } from "@/utils/request";
 import useUser from "@/hooks/useUser";
 import { useTranslation, Trans } from "react-i18next";
 import Appearance from "@/models/appearance";
+import { useChatMessageAlignment } from "@/hooks/useChatMessageAlignment";
 
 export default function DefaultChatContainer() {
+  const { getMessageAlignment } = useChatMessageAlignment();
   const { showScrollbar } = Appearance.getSettings();
   const [mockMsgs, setMockMessages] = useState([]);
   const { user } = useUser();
@@ -43,7 +45,7 @@ export default function DefaultChatContainer() {
   const MESSAGES = [
     <React.Fragment key="msg1">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("assistant")}>
           <UserIcon user={{ uid: "system" }} role={"assistant"} />
           <MessageText>{t("welcomeMessage.part1")}</MessageText>
         </MessageContent>
@@ -52,7 +54,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg2">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("assistant")}>
           <UserIcon user={{ uid: "system" }} role={"assistant"} />
           <MessageText>{t("welcomeMessage.part2")}</MessageText>
         </MessageContent>
@@ -61,7 +63,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg3">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("assistant")}>
           <UserIcon user={{ uid: "system" }} role={"assistant"} />
           <div>
             <MessageText>{t("welcomeMessage.part3")}</MessageText>
@@ -81,7 +83,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg4">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("user")}>
           <UserIcon user={{ uid: userFromStorage()?.username }} role={"user"} />
           <MessageText>{t("welcomeMessage.user1")}</MessageText>
         </MessageContent>
@@ -90,7 +92,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg5">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("assistant")}>
           <UserIcon user={{ uid: "system" }} role={"assistant"} />
           <div>
             <MessageText>{t("welcomeMessage.part4")}</MessageText>
@@ -111,7 +113,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg6">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("user")}>
           <UserIcon user={{ uid: userFromStorage()?.username }} role={"user"} />
           <MessageText>{t("welcomeMessage.user2")}</MessageText>
         </MessageContent>
@@ -120,7 +122,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg7">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("assistant")}>
           <UserIcon user={{ uid: "system" }} role={"assistant"} />
           <MessageText>
             <Trans
@@ -137,7 +139,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg8">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("user")}>
           <UserIcon user={{ uid: userFromStorage()?.username }} role={"user"} />
           <MessageText>{t("welcomeMessage.user3")}</MessageText>
         </MessageContent>
@@ -146,7 +148,7 @@ export default function DefaultChatContainer() {
 
     <React.Fragment key="msg9">
       <MessageContainer>
-        <MessageContent>
+        <MessageContent alignmentCls={getMessageAlignment("assistant")}>
           <UserIcon user={{ uid: "system" }} role={"assistant"} />
           <div>
             <MessageText>{t("welcomeMessage.part6")}</MessageText>
@@ -242,8 +244,8 @@ function MessageContainer({ children }) {
   );
 }
 
-function MessageContent({ children }) {
-  return <div className="flex gap-x-5">{children}</div>;
+function MessageContent({ children, alignmentCls = "" }) {
+  return <div className={`flex gap-x-5 ${alignmentCls}`}>{children}</div>;
 }
 
 function MessageText({ children }) {
diff --git a/frontend/src/hooks/useChatMessageAlignment.js b/frontend/src/hooks/useChatMessageAlignment.js
index d24dc54f877..60668832fc4 100644
--- a/frontend/src/hooks/useChatMessageAlignment.js
+++ b/frontend/src/hooks/useChatMessageAlignment.js
@@ -3,7 +3,7 @@ const ALIGNMENT_STORAGE_KEY = "anythingllm-chat-message-alignment";
 
 /**
  * Store the message alignment in localStorage as well as provide a function to get the alignment of a message via role.
- * @returns {{msgDirection: 'left'|'left_right', setMsgDirection: (direction: string) => void, getMessageAlignment: (role: string) => {isLeftToRight: boolean, directionCls: string}}} - The message direction and the class name for the direction.
+ * @returns {{msgDirection: 'left'|'left_right', setMsgDirection: (direction: string) => void, getMessageAlignment: (role: string) => string}} - The message direction and the class name for the direction.
  */
 export function useChatMessageAlignment() {
   const [msgDirection, setMsgDirection] = useState(

From 3e8224b812686066cfb85460fbab2214ecb4c6c2 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 19 Feb 2025 12:46:03 -0800
Subject: [PATCH 6/6] fix mobile styles of message chat alignment preference

---
 .../pages/GeneralSettings/Appearance/MessageDirection/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx b/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
index d20656c3f41..79998fb1388 100644
--- a/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
+++ b/frontend/src/pages/GeneralSettings/Appearance/MessageDirection/index.jsx
@@ -12,7 +12,7 @@ export function MessageDirection() {
       <p className="text-xs leading-[18px] font-base text-white/60">
         Select the message alignment mode when using the chat interface.
       </p>
-      <div className="flex flex-row flex-wrap gap-x-4 pt-1">
+      <div className="flex flex-row flex-wrap gap-x-4 pt-1 gap-y-4 md:gap-y-0">
         <ItemDirection
           active={msgDirection === "left"}
           reverse={false}