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,39 +89,52 @@ const MessageContainer: React.FC<ThreadMessage> = (props) => {
           )}
       </div>
 
-      <div
+      <div className="flex w-full flex-col">
-        className={twMerge(
+        <div
-          'w-full',
+          className={twMerge(
-          !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'
-          {messageType === ContentType.Image && (
-            <ImageMessage content={props.content[0]} />
           )}
-          {messageType === ContentType.Pdf && (
+        >
-            <DocMessage
+          <MessageToolbar message={props} />
-              id={props.id}
+        </div>
-              name={props.content[0]?.text?.name}
+        <div
-              size={props.content[0]?.text?.size}
+          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 ? (
+            {editMessage === props.id ? (
-            <div>
+              <div>
-              <EditChatInput message={props} />
+                <EditChatInput message={props} />
-            </div>
+              </div>
-          ) : (
+            ) : (
-            <div
+              <div
-              className={twMerge(
+                className={twMerge(
-                'message max-width-[100%] flex flex-col gap-y-2 overflow-x-auto overflow-y-hidden leading-relaxed'
+                  'message max-width-[100%] flex flex-col gap-y-2 overflow-x-auto overflow-y-hidden leading-relaxed'
-              )}
+                )}
-              dir="ltr"
+                dir="ltr"
-            >
+              >
-              <MarkdownTextMessage id={props.id} text={text} />
+                <MarkdownTextMessage id={props.id} text={text} />
-            </div>
+              </div>
-          )}
+            )}
-        </>
+          </>
+        </div>
       </div>
     </div>
   )