v2.49 - Enhance Onboarding, Fix Input Box, @ Function, System Prompt Exposed

Author: imjustinliao

frontend/src/components/app/ChatInput.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { memo, useState, useRef, useCallback } from "react"
+import { memo, useState, useRef, useCallback, useMemo } from "react"
 import { useRouter } from "next/navigation"
 import { useChat } from "@/context/ChatContext"
 import { useTypewriter } from "@/hooks/useTypewriter"
@@ -55,6 +55,18 @@ const ChatInput = memo(function ChatInput() {
     }
   }
 
+  /* Detect @mention trigger in input text */
+  const atMention = useMemo(() => {
+    const match = inputValue.match(/@(\w*)$/)
+    return match ? { search: match[1], fullMatch: match[0] } : null
+  }, [inputValue])
+
+  const handleTriggerConsumed = useCallback(() => {
+    if (atMention) {
+      setInputValue(inputValue.slice(0, inputValue.length - atMention.fullMatch.length).trimEnd())
+    }
+  }, [atMention, inputValue, setInputValue])
+
   const [inputFocused, setInputFocused] = useState(false)
   const [attachHover, setAttachHover] = useState(false)
   const [globeHover, setGlobeHover] = useState(false)
@@ -364,7 +376,7 @@ const ChatInput = memo(function ChatInput() {
           flexShrink: 0,
         }}
       >
-        {/* Left: Attach + Web search */}
+        {/* Left: Attach + @ + Web search */}
         <div style={{ display: "flex", alignItems: "center", gap: "14px" }}>
           {/* Attach */}
           <button
@@ -378,6 +390,15 @@ const ChatInput = memo(function ChatInput() {
               <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" />
             </svg>
           </button>
+          {/* @ Content type picker */}
+          <ContentTypePicker
+            selected={inputFeatures.requestedContentTypes ?? []}
+            onChange={(ids) => { setInputFeatures({ requestedContentTypes: ids }); writeStoredContentTypes(ids) }}
+            isDark={isDark}
+            COLORS={COLORS}
+            triggerSearch={atMention?.search}
+            onTriggerConsumed={handleTriggerConsumed}
+          />
           {/* Web search toggle */}
           <button
             onClick={() => setInputFeatures({ webSearch: !inputFeatures.webSearch })}
@@ -405,13 +426,6 @@ const ChatInput = memo(function ChatInput() {
               <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
             </svg>
           </button>
-          {/* @ Content type picker */}
-          <ContentTypePicker
-            selected={inputFeatures.requestedContentTypes ?? []}
-            onChange={(ids) => { setInputFeatures({ requestedContentTypes: ids }); writeStoredContentTypes(ids) }}
-            isDark={isDark}
-            COLORS={COLORS}
-          />
         </div>
 
         {/* Right: Model + Length + Mic + Send */}