Merge pull request #5044 from menloresearch/chore/chat-input-inline-message

chore: add inline message chat input

web-app/src/containers/ChatInput.tsx

@@ -16,6 +16,7 @@ import {
   IconCodeCircle2,
   IconPlayerStopFilled,
   IconBrandSpeedtest,
+  IconX,
 } from '@tabler/icons-react'
 import { useTranslation } from 'react-i18next'
 import { useGeneralSetting } from '@/hooks/useGeneralSetting'
@@ -56,8 +57,16 @@ const ChatInput = ({
 
   const { selectedModel } = useModelProvider()
   const { sendMessage } = useChat()
+  const [message, setMessage] = useState('')
 
-  console.log(model)
+  const handleSendMesage = (prompt: string) => {
+    if (!selectedModel) {
+      setMessage('Please select a model to start chatting.')
+      return
+    }
+    setMessage('')
+    sendMessage(prompt)
+  }
 
   useEffect(() => {
     const handleFocusIn = () => {
@@ -129,6 +138,7 @@ const ChatInput = ({
   )
 
   return (
+    <div className="relative">
       <div className="relative">
         <div
           className={cn(
@@ -170,7 +180,7 @@ const ChatInput = ({
                 if (e.key === 'Enter' && !e.shiftKey && prompt) {
                   e.preventDefault()
                   // Submit the message when Enter is pressed without Shift
-                sendMessage(prompt)
+                  handleSendMesage(prompt)
                   // When Shift+Enter is pressed, a new line is added (default behavior)
                 }
               }}
@@ -188,6 +198,7 @@ const ChatInput = ({
             />
           </div>
         </div>
+
         <div className="absolute z-20 bg-transparent bottom-0 w-full p-2 ">
           <div className="flex justify-between items-center w-full">
             <div className="px-1 flex items-center gap-1">
@@ -221,7 +232,10 @@ const ChatInput = ({
 
                 {selectedModel?.capabilities?.includes('embeddings') && (
                   <div className="h-6 p-1 flex items-center justify-center rounded-sm hover:bg-main-view-fg/10 transition-all duration-200 ease-in-out gap-1">
-                  <IconCodeCircle2 size={18} className="text-main-view-fg/50" />
+                    <IconCodeCircle2
+                      size={18}
+                      className="text-main-view-fg/50"
+                    />
                   </div>
                 )}
 
@@ -267,7 +281,7 @@ const ChatInput = ({
                 variant={!prompt ? null : 'default'}
                 size="icon"
                 disabled={!prompt}
-              onClick={() => sendMessage(prompt)}
+                onClick={() => handleSendMesage(prompt)}
               >
                 {streamingContent ? (
                   <span className="animate-spin h-4 w-4 border-2 border-current border-t-transparent rounded-full" />
@@ -279,6 +293,20 @@ const ChatInput = ({
           </div>
         </div>
       </div>
+      {message && !selectedModel && (
+        <div className="bg-main-view-fg/2 -mt-0.5 mx-2 pb-2 px-3 pt-1.5 rounded-b-lg text-xs text-destructive transition-all duration-200 ease-in-out">
+          <div className="flex items-center gap-1 justify-between">
+            {message}
+            <IconX
+              className="size-3 text-main-view-fg/30 cursor-pointer"
+              onClick={() => {
+                setMessage('')
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
   )
 }