fix: 4178 - current generated message options should be visible

web/containers/ErrorMessage/index.tsx

@@ -35,13 +35,13 @@
             <button
               className="font-medium text-[hsla(var(--app-link))] underline"
               onClick={() => {
                 setMainState(MainViewState.Settings)
 
                 if (activeThread?.assistants[0]?.model.engine) {
                   const engine = EngineManager.instance().get(
                     activeThread.assistants[0].model.engine
                   )
                   engine?.name && setSelectedSettingScreen(engine.name)
                 }
               }}
             >
@@ -52,7 +52,10 @@
         )
       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

@@ -20,32 +20,32 @@
 } & ThreadMessage
 
 const ChatItem = forwardRef<Ref, Props>((message, ref) => {
   const [content, setContent] = useState<ThreadContent[]>(message.content)
   const [status, setStatus] = useState<MessageStatus>(message.status)
   const [errorMessage, setErrorMessage] = useState<ThreadMessage | undefined>(
     message.isCurrentMessage && message.status === MessageStatus.Error
       ? message
       : undefined
   )
 
   function onMessageUpdate(data: ThreadMessage) {
     if (data.id === message.id) {
       setContent(data.content)
       if (data.status !== status) setStatus(data.status)
       if (data.status === MessageStatus.Error && message.isCurrentMessage)
         setErrorMessage(data)
     }
   }
 
   useEffect(() => {
     if (!message.isCurrentMessage && errorMessage) setErrorMessage(undefined)
   }, [message, errorMessage])
 
   useEffect(() => {
     if (message.status === MessageStatus.Pending)
       events.on(MessageEvent.OnMessageUpdate, onMessageUpdate)
     return () => {
       events.off(MessageEvent.OnMessageUpdate, onMessageUpdate)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
@@ -54,7 +54,12 @@
     <>
       {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

@@ -14,14 +14,14 @@
 import { activeThreadAtom } from '@/helpers/atoms/Thread.atom'
 
 const LoadModelError = () => {
   const setModalTroubleShooting = useSetAtom(modalTroubleShootingAtom)
   const loadModelError = useAtomValue(loadModelErrorAtom)
   const setMainState = useSetAtom(mainViewStateAtom)
   const setSelectedSettingScreen = useSetAtom(selectedSettingAtom)
   const activeThread = useAtomValue(activeThreadAtom)
 
   const ErrorMessage = () => {
     if (
       typeof loadModelError?.includes === 'function' &&
       loadModelError.includes('EXTENSION_IS_NOT_INSTALLED')
     ) {
@@ -32,9 +32,9 @@
           <span
             className="cursor-pointer font-medium text-[hsla(var(--app-link))]"
             onClick={() => {
               setMainState(MainViewState.Settings)
               if (activeThread?.assistants[0]?.model.engine) {
                 const engine = EngineManager.instance().get(
                   activeThread.assistants[0].model.engine
                 )
                 engine?.name && setSelectedSettingScreen(engine.name)
@@ -49,7 +49,9 @@
     } 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
-        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>
   )