From a058710fedf4cf861aa3effb5e661f8aca9c2ac8 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Tue, 3 Dec 2024 13:25:54 +0700
Subject: [PATCH 1/2] fix: 4178 - current generated message options should be
 visible

---
 .../ThreadCenterPanel/ChatItem/index.tsx      |  7 +-
 .../ThreadCenterPanel/TextMessage/index.tsx   | 90 ++++++++++---------
 2 files changed, 52 insertions(+), 45 deletions(-)

diff --git a/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx b/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
index 10d4082113..1fa3ef1155 100644
--- a/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
@@ -54,7 +54,12 @@ const ChatItem = forwardRef<Ref, Props>((message, ref) => {
     <>
       {status !== MessageStatus.Error && content?.length > 0 && (
         <div ref={ref} className="relative">
-          <MessageContainer {...message} content={content} status={status} />
+          <MessageContainer
+            {...message}
+            content={content}
+            status={status}
+            isCurrentMessage={message.isCurrentMessage ?? false}
+          />
         </div>
       )}
       {errorMessage && !message.loadModelError && (
diff --git a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
index fa39f8209f..f65b9b967f 100644
--- a/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
@@ -19,19 +19,18 @@ import { MarkdownTextMessage } from './MarkdownTextMessage'
 
 import {
   editMessageAtom,
-  getCurrentChatMessagesAtom,
   tokenSpeedAtom,
 } from '@/helpers/atoms/ChatMessage.atom'
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
-const MessageContainer: React.FC<ThreadMessage> = (props) => {
+const MessageContainer: React.FC<
+  ThreadMessage & { isCurrentMessage: boolean }
+> = (props) => {
   const isUser = props.role === ChatCompletionRole.User
   const isSystem = props.role === ChatCompletionRole.System
   const editMessage = useAtomValue(editMessageAtom)
   const activeThread = useAtomValue(activeThreadAtom)
-
   const tokenSpeed = useAtomValue(tokenSpeedAtom)
-  const messages = useAtomValue(getCurrentChatMessagesAtom)
 
   const text = useMemo(
     () => props.content[0]?.text?.value ?? '',
@@ -81,16 +80,6 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
         <p className="text-xs font-medium text-gray-400">
           {displayDate(props.created)}
         </p>
-        <div
-          className={twMerge(
-            'absolute right-0 cursor-pointer transition-all',
-            messages[messages.length - 1]?.id === props.id && !isUser
-              ? 'absolute -bottom-8 right-4'
-              : 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
-          )}
-        >
-          <MessageToolbar message={props} />
-        </div>
         {tokenSpeed &&
           tokenSpeed.message === props.id &&
           tokenSpeed.tokenSpeed > 0 && (
@@ -100,39 +89,52 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
           )}
       </div>
 
-      <div
-        className={twMerge(
-          'w-full',
-          !isUser && !text.includes(' ') && 'break-all'
-        )}
-      >
-        <>
-          {messageType === ContentType.Image && (
-            <ImageMessage content={props.content[0]} />
+      <div className="flex w-full flex-col">
+        <div
+          className={twMerge(
+            'absolute right-0 order-1 mt-2 flex cursor-pointer items-center justify-start gap-x-2 transition-all',
+            props.isCurrentMessage && !isUser
+              ? 'relative order-2 flex justify-end'
+              : 'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:flex'
           )}
-          {messageType === ContentType.Pdf && (
-            <DocMessage
-              id={props.id}
-              name={props.content[0]?.text?.name}
-              size={props.content[0]?.text?.size}
-            />
+        >
+          <MessageToolbar message={props} />
+        </div>
+        <div
+          className={twMerge(
+            'order-2 w-full',
+            !isUser && !text.includes(' ') && 'break-all',
+            props.isCurrentMessage && !isUser && 'order-1'
           )}
+        >
+          <>
+            {messageType === ContentType.Image && (
+              <ImageMessage content={props.content[0]} />
+            )}
+            {messageType === ContentType.Pdf && (
+              <DocMessage
+                id={props.id}
+                name={props.content[0]?.text?.name}
+                size={props.content[0]?.text?.size}
+              />
+            )}
 
-          {editMessage === props.id ? (
-            <div>
-              <EditChatInput message={props} />
-            </div>
-          ) : (
-            <div
-              className={twMerge(
-                'message max-width-[100%] flex flex-col gap-y-2 overflow-x-auto overflow-y-hidden leading-relaxed'
-              )}
-              dir="ltr"
-            >
-              <MarkdownTextMessage id={props.id} text={text} />
-            </div>
-          )}
-        </>
+            {editMessage === props.id ? (
+              <div>
+                <EditChatInput message={props} />
+              </div>
+            ) : (
+              <div
+                className={twMerge(
+                  'message max-width-[100%] flex flex-col gap-y-2 overflow-x-auto overflow-y-hidden leading-relaxed'
+                )}
+                dir="ltr"
+              >
+                <MarkdownTextMessage id={props.id} text={text} />
+              </div>
+            )}
+          </>
+        </div>
       </div>
     </div>
   )

From bfd66c421c23ec62a0263700616425ec1288cf2f Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Tue, 3 Dec 2024 13:53:26 +0700
Subject: [PATCH 2/2] fix: error message should not be capitalized

---
 web/containers/ErrorMessage/index.tsx                        | 5 ++++-
 .../Thread/ThreadCenterPanel/LoadModelError/index.tsx        | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/web/containers/ErrorMessage/index.tsx b/web/containers/ErrorMessage/index.tsx
index 4c97da14be..b2f6bc23af 100644
--- a/web/containers/ErrorMessage/index.tsx
+++ b/web/containers/ErrorMessage/index.tsx
@@ -52,7 +52,10 @@ const ErrorMessage = ({ message }: { message: ThreadMessage }) => {
         )
       default:
         return (
-          <p data-testid="passthrough-error-message" className="capitalize">
+          <p
+            data-testid="passthrough-error-message"
+            className="first-letter:uppercase"
+          >
             {message.content[0]?.text?.value && (
               <AutoLink text={message.content[0].text.value} />
             )}
diff --git a/web/screens/Thread/ThreadCenterPanel/LoadModelError/index.tsx b/web/screens/Thread/ThreadCenterPanel/LoadModelError/index.tsx
index 569e93d62b..d6fed48043 100644
--- a/web/screens/Thread/ThreadCenterPanel/LoadModelError/index.tsx
+++ b/web/screens/Thread/ThreadCenterPanel/LoadModelError/index.tsx
@@ -49,7 +49,9 @@ const LoadModelError = () => {
     } else {
       return (
         <div className="mx-6 flex flex-col items-center space-y-2 text-center font-medium text-[hsla(var(--text-secondary))]">
-          {loadModelError && <p className="capitalize">{loadModelError}</p>}
+          {loadModelError && (
+            <p className="first-letter:uppercase">{loadModelError}</p>
+          )}
           <p>
             {`Something's wrong.`}&nbsp;Access&nbsp;
             <span