feat: Add support for handling chat input keydown events

src/components/Option/Playground/PlaygroundForm.tsx

@@ -14,6 +14,7 @@ import { useTranslation } from "react-i18next"
 import { KnowledgeSelect } from "../Knowledge/KnowledgeSelect"
 import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
 import { PiGlobe } from "react-icons/pi"
+import { handleChatInputKeyDown } from "@/utils/key-down"
 
 type Props = {
   dropedFile: File | undefined
@@ -144,13 +145,16 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
   })
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Process" || e.key === "229") return
+    if (import.meta.env.BROWSER !== "firefox") {
+      if (e.key === "Process" || e.key === "229") return
+    }
     if (
-      !typing &&
+      handleChatInputKeyDown({
-      e.key === "Enter" &&
+        e,
-      !e.shiftKey &&
+        sendWhenEnter,
-      !isSending &&
+        typing,
-      sendWhenEnter
+        isSending
+      })
     ) {
       e.preventDefault()
       stopListening()
@@ -244,8 +248,16 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
             />
             <div className="w-full border-x border-t flex flex-col dark:border-gray-600 rounded-t-xl p-2">
               <textarea
-                onCompositionStart={() => setTyping(true)}
+                onCompositionStart={() => {
-                onCompositionEnd={() => setTyping(false)}
+                  if (import.meta.env.BROWSER !== "firefox") {
+                    setTyping(true)
+                  }
+                }}
+                onCompositionEnd={() => {
+                  if (import.meta.env.BROWSER !== "firefox") {
+                    setTyping(false)
+                  }
+                }}
                 onKeyDown={(e) => handleKeyDown(e)}
                 ref={textareaRef}
                 className="px-2 py-2 w-full resize-none bg-transparent focus-within:outline-none focus:ring-0 focus-visible:ring-0 ring-0 dark:ring-0 border-0 dark:text-gray-100"

src/components/Sidepanel/Chat/form.tsx

@@ -12,6 +12,7 @@ import { useTranslation } from "react-i18next"
 import { ModelSelect } from "@/components/Common/ModelSelect"
 import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
 import { PiGlobeX, PiGlobe } from "react-icons/pi"
+import { handleChatInputKeyDown } from "@/utils/key-down"
 
 type Props = {
   dropedFile: File | undefined
@@ -66,11 +67,12 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Process" || e.key === "229") return
     if (
-      e.key === "Enter" &&
+      handleChatInputKeyDown({
-      !e.shiftKey &&
+        e,
-      !isSending &&
+        sendWhenEnter,
-      sendWhenEnter &&
+        typing,
-      !typing
+        isSending
+      })
     ) {
       e.preventDefault()
       form.onSubmit(async (value) => {
@@ -245,8 +247,16 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                 rows={1}
                 style={{ minHeight: "60px" }}
                 tabIndex={0}
-                onCompositionStart={() => setTyping(true)}
+                onCompositionStart={() => {
-                onCompositionEnd={() => setTyping(false)}
+                  if (import.meta.env.BROWSER !== "firefox") {
+                    setTyping(true)
+                  }
+                }}
+                onCompositionEnd={() => {
+                  if (import.meta.env.BROWSER !== "firefox") {
+                    setTyping(false)
+                  }
+                }}
                 placeholder={t("form.textarea.placeholder")}
                 {...form.getInputProps("message")}
               />

src/utils/key-down.tsx

@@ -0,0 +1,19 @@
+export const handleChatInputKeyDown = ({
+    e,
+    sendWhenEnter,
+    typing,
+    isSending
+}: {
+    e: React.KeyboardEvent
+    typing: boolean
+    sendWhenEnter: boolean
+    isSending: boolean
+}) => {
+    return import.meta.env.BROWSER === "firefox"
+        ? e.key === "Enter" &&
+        !e.shiftKey &&
+        !e.nativeEvent.isComposing &&
+        !isSending &&
+        sendWhenEnter
+        : !typing && e.key === "Enter" && !e.shiftKey && !isSending && sendWhenEnter
+}

wxt.config.ts

@@ -50,7 +50,7 @@ export default defineConfig({
   outDir: "build",
 
   manifest: {
-    version: "1.2.1",
+    version: "1.2.2",
     name:
       process.env.TARGET === "firefox"
         ? "Page Assist - A Web UI for Local AI Models"