Merge pull request #4196 from janhq/fix/4178-generated-messages-options-always-visible

fix: 4178 - current generated message options should be visible

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} />
             )}

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 && (

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

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,10 +89,22 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
           )}
       </div>
 
+      <div className="flex w-full flex-col">
         <div
           className={twMerge(
-          'w-full',
-          !isUser && !text.includes(' ') && 'break-all'
+            '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'
+          )}
+        >
+          <MessageToolbar message={props} />
+        </div>
+        <div
+          className={twMerge(
+            'order-2 w-full',
+            !isUser && !text.includes(' ') && 'break-all',
+            props.isCurrentMessage && !isUser && 'order-1'
           )}
         >
           <>
@@ -135,6 +136,7 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
           </>
         </div>
       </div>
+    </div>
   )
 }