@brainfish-ai/components 0.36.1 → 0.37.1

package/dist/components/chat-search/DictationChrome.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+import { SearchDictation } from './hooks/useSearchDictation';
+export declare const isDictating: (dictation?: SearchDictation) => boolean;
+export declare const splitPartial: (value: string, partial: string) => {
+    committed: string;
+    partial: string;
+};
+export declare const DictationMic: ({ onStart }: {
+    onStart: () => void;
+}) => React.JSX.Element;
+export declare const DictationToolbar: ({ dictation }: {
+    dictation: SearchDictation;
+}) => React.JSX.Element;
+export declare const DictationCaption: ({ dictation, hideError }: {
+    dictation: SearchDictation;
+    hideError?: boolean;
+}) => React.JSX.Element | null;
+export declare const DictationLiveRegion: ({ dictation }: {
+    dictation: SearchDictation;
+}) => React.JSX.Element;

package/dist/components/chat-search/FollowUpSearchBar.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { TextConfig, AttachedFile } from './types';
+import { SearchDictation } from './hooks/useSearchDictation';
 interface FollowUpSearchBarProps {
     initialQuery?: string;
     onQueryChange: (query: string) => void;
@@ -12,6 +13,7 @@ interface FollowUpSearchBarProps {
     onAddFiles?: (files: File[]) => void;
     onRemoveFile?: (id: string) => void;
     disabled?: boolean;
+    dictation?: SearchDictation;
 }
 export declare const FollowUpSearchBar: React.ForwardRefExoticComponent<FollowUpSearchBarProps & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/components/chat-search/PrimarySearch.d.ts

@@ -1,5 +1,6 @@
 import { default as React } from 'react';
 import { Collection, Suggestion, AttachedFile } from './types';
+import { SearchDictation } from './hooks/useSearchDictation';
 export declare const PrimarySearch: React.ForwardRefExoticComponent<{
     query: string;
     onQueryChange: (query: string) => void;
@@ -34,5 +35,6 @@ export declare const PrimarySearch: React.ForwardRefExoticComponent<{
     includePageLoading?: boolean;
     includePageDisabled?: boolean;
     onIncludePageToggle?: (enabled: boolean) => Promise<void>;
+    dictation?: SearchDictation;
 } & React.RefAttributes<HTMLTextAreaElement>>;
 export default PrimarySearch;

package/dist/components/chat-search/hooks/index.d.ts

@@ -8,3 +8,4 @@ export { useAccessibleColor } from './useAccessibleColor';
 export { useIncludePage } from './useIncludePage';
 export { useFileAttachment } from './useFileAttachment';
 export { useToast } from './useToast';
+export { useSearchDictation } from './useSearchDictation';

package/dist/components/chat-search/hooks/transcriptSession.d.ts

@@ -0,0 +1,6 @@
+export declare const composeQuery: (prefix: string, session: string) => string;
+/**
+ * False when the transcript carries no question: empty, punctuation-only, filler, or a
+ * silence annotation such as "[BLANK_AUDIO]". English-only; other languages pass unless empty.
+ */
+export declare const isMeaningfulTranscript: (text: string) => boolean;

package/dist/components/chat-search/hooks/useSearchDictation.d.ts

@@ -0,0 +1,25 @@
+export type DictationStatus = 'idle' | 'connecting' | 'recording' | 'transcribing' | 'error';
+export type DictationErrorTone = 'danger' | 'warning';
+export type SearchDictation = {
+    available: boolean;
+    status: DictationStatus;
+    /** Always empty in batch mode; kept for story/API compatibility. */
+    partial: string;
+    /** Always empty in batch mode; kept for story/API compatibility. */
+    committed: string;
+    error: string | null;
+    errorTone: DictationErrorTone | null;
+    elapsedSeconds: number;
+    levels: number[];
+    start: () => void;
+    done: () => void;
+    cancel: () => void;
+};
+export declare const useSearchDictation: ({ endpoint, headers, getText, setText, onSubmit, }: {
+    endpoint?: string;
+    headers?: Record<string, string>;
+    getText: () => string;
+    setText: (value: string) => void;
+    /** When set, a meaningful transcript is handed here (with typed prefix) instead of written to the box. */
+    onSubmit?: (query: string) => void;
+}) => SearchDictation;

package/dist/components/chat-search/types.d.ts

@@ -231,6 +231,8 @@ export interface ChatSearchProps {
     resetHandoff?: () => void;
     followUpQuestionsEndpoint?: string;
     autocompleteEndpoint?: string;
+    /** When set, the search box shows a mic and POSTs recorded audio here for batch transcription. */
+    transcriptionTokenEndpoint?: string;
     contentTypeEndpoint?: string;
     disableFollowUpQuestions?: boolean;
     enableFileAttachment?: boolean;

package/dist/esm/components/chat-search/ChatSearch.js

@@ -34,6 +34,7 @@ import { MemoizedIcon } from '../ui/icon.js';
 import { Features } from '../../lib/features.js';
 import { useToast } from './hooks/useToast.js';
 import { useFileAttachment } from './hooks/useFileAttachment.js';
+import { useSearchDictation } from './hooks/useSearchDictation.js';
 import { useConversationLoader } from './hooks/useConversationLoader.js';
 import { useSubscriptionManager } from './hooks/useSubscriptionManager.js';
 import { useIncludePage } from './hooks/useIncludePage.js';
@@ -61,6 +62,7 @@ const ChatSearchComponent = forwardRef(
     feedbackReasonEndpoint,
     loadConversationEndpoint,
     autocompleteEndpoint,
+    transcriptionTokenEndpoint,
     disableFollowUpQuestions = false,
     enableFileAttachment: enableFileAttachmentProp = false,
     disableFeedback = false,
@@ -120,6 +122,7 @@ const ChatSearchComponent = forwardRef(
     const enableFileAttachmentFlag = useBooleanFlagValue("enableFileAttachment", false);
     const enableFileAttachment = enableFileAttachmentProp || enableFileAttachmentFlag;
     const isHistoryTabEnabled = useBooleanFlagValue(Features.HistoryTab, false);
+    const isTranscribeEnabled = useBooleanFlagValue(Features.TranscribeEnabled, false);
     const { toasts, showToast, dismissToast } = useToast();
     const getOrCreateConversationId = useCallback(() => {
       let conversationId = currentConversationId;
@@ -147,8 +150,23 @@ const ChatSearchComponent = forwardRef(
     const followUpSearchRef = useRef(null);
     const bottomRef = useRef(null);
     const currentReaderRef = useRef(null);
+    const dictation = useSearchDictation({
+      endpoint: isTranscribeEnabled ? transcriptionTokenEndpoint : void 0,
+      headers,
+      getText: () => showResults ? followUpQuery : query,
+      setText: (value) => {
+        if (showResults) setFollowUpQuery(value);
+        else setQuery(value);
+      },
+      onSubmit: (dictatedQuery) => submitDictatedQueryRef.current(dictatedQuery)
+    });
+    const dictationActive = dictation.status === "connecting" || dictation.status === "recording" || dictation.status === "transcribing";
+    const cancelDictationRef = useRef(dictation.cancel);
+    cancelDictationRef.current = dictation.cancel;
+    const submitDictatedQueryRef = useRef(() => {
+    });
     const { suggestions: autocompleteSuggestions } = useAutocomplete({
-      query,
+      query: dictationActive ? "" : query,
       endpoint: autocompleteEndpoint || "",
       allowedRegions,
       collectionId: currentCollectionId,
@@ -641,6 +659,7 @@ const ChatSearchComponent = forwardRef(
       }
     };
     const createNewThread = (firstQuery) => {
+      dictation.cancel();
       completeActiveConversations();
       setIsViewOnly(false);
       resetHandoff?.();
@@ -669,6 +688,7 @@ const ChatSearchComponent = forwardRef(
       }
     };
     const navigateHome = () => {
+      dictation.cancel();
       setIsViewOnly(false);
       resetHandoff?.();
       if (currentReaderRef.current) {
@@ -714,6 +734,14 @@ const ChatSearchComponent = forwardRef(
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
     const handlePrimarySearch = async (searchQuery = query.trim()) => {
+      if (dictation.status === "recording") {
+        dictation.done();
+        return;
+      }
+      if (dictation.status === "connecting" || dictation.status === "transcribing") {
+        dictation.cancel();
+        return;
+      }
       await performSearch({ searchQuery, event: { name: "Primary Field Search Submitted" } });
     };
     const handleFeedback = async (response, searchQueryId, answerIndex) => {
@@ -759,14 +787,42 @@ const ChatSearchComponent = forwardRef(
       }
     };
     const handleFollowUpSearch = async (customQuery) => {
+      if (dictation.status === "recording") {
+        dictation.done();
+        return;
+      }
+      if (dictation.status === "connecting" || dictation.status === "transcribing") {
+        dictation.cancel();
+        return;
+      }
       const queryToUse = customQuery !== void 0 ? customQuery : followUpQuery;
       if (queryToUse.trim()) {
-        resetHandoff?.();
+        await submitFollowUp(queryToUse);
+      }
+    };
+    const submitFollowUp = async (queryToUse, metaData) => {
+      resetHandoff?.();
+      setQuery(queryToUse);
+      setFollowUpQuery("");
+      await performSearch({ searchQuery: queryToUse, event: { name: "Follow-up Search Field Submitted", metaData } });
+    };
+    const submitDictatedQuery = async (queryToUse) => {
+      if (isSearching) {
+        if (showResults) setFollowUpQuery(queryToUse);
+        else setQuery(queryToUse);
+        return;
+      }
+      if (showResults) {
+        await submitFollowUp(queryToUse, { inputMethod: "voice" });
+      } else {
         setQuery(queryToUse);
-        setFollowUpQuery("");
-        await performSearch({ searchQuery: queryToUse, event: { name: "Follow-up Search Field Submitted" } });
+        await performSearch({
+          searchQuery: queryToUse,
+          event: { name: "Primary Field Search Submitted", metaData: { inputMethod: "voice" } }
+        });
       }
     };
+    submitDictatedQueryRef.current = submitDictatedQuery;
     const handleSuggestedQuestionClick = (suggestion) => {
       if (suggestion.conversationId) {
         trackEvent?.("Recent Conversation Clicked", {
@@ -795,6 +851,7 @@ const ChatSearchComponent = forwardRef(
         const urlParams = new URLSearchParams(window.location.search);
         const urlConversationId = urlParams.get("conversation");
         if (!urlConversationId) {
+          cancelDictationRef.current();
           setQuery("");
           setFollowUpQuery("");
           setShowResults(false);
@@ -984,7 +1041,8 @@ const ChatSearchComponent = forwardRef(
                   includePageEnabled,
                   includePageLoading,
                   includePageDisabled,
-                  onIncludePageToggle: handleIncludePageToggle
+                  onIncludePageToggle: handleIncludePageToggle,
+                  dictation: dictation.available ? dictation : void 0
                 }
               )
             )
@@ -1151,7 +1209,8 @@ const ChatSearchComponent = forwardRef(
             isUploading,
             onAddFiles: addFiles,
             onRemoveFile: removeFile,
-            disabled: isAwaitingGroup
+            disabled: isAwaitingGroup,
+            dictation: dictation.available ? dictation : void 0
           }
         );
       })(),

package/dist/esm/components/chat-search/DictationChrome.js

@@ -0,0 +1,68 @@
+import React__default from 'react';
+import { X, Check, Microphone } from '@phosphor-icons/react';
+import { Button } from '../ui/button.js';
+import { cn } from '../../lib/utils.js';
+
+const isDictating = (dictation) => dictation?.status === "connecting" || dictation?.status === "recording" || dictation?.status === "transcribing";
+const formatElapsed = (seconds) => {
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return `${minutes}:${rest.toString().padStart(2, "0")}`;
+};
+const DictationMic = ({ onStart }) => /* @__PURE__ */ React__default.createElement(
+  Button,
+  {
+    type: "button",
+    variant: "ghost",
+    size: "icon",
+    className: "size-8",
+    "aria-label": "Ask with your voice",
+    onClick: onStart
+  },
+  /* @__PURE__ */ React__default.createElement(Microphone, { weight: "regular", className: "size-4" })
+);
+const DictationToolbar = ({ dictation }) => {
+  const connecting = dictation.status === "connecting";
+  const transcribing = dictation.status === "transcribing";
+  const recording = dictation.status === "recording";
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between gap-2 border-t border-border bg-background px-3 py-2 rounded-b-[4px]" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex min-w-0 items-center gap-2 text-sm text-foreground" }, connecting ? /* @__PURE__ */ React__default.createElement("span", null, "Connecting microphone…") : transcribing ? /* @__PURE__ */ React__default.createElement("span", null, "Transcribing…") : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("span", { className: "size-2 shrink-0 rounded-full bg-red", "aria-hidden": true }), /* @__PURE__ */ React__default.createElement("span", null, "Recording"), /* @__PURE__ */ React__default.createElement("span", { className: "tabular-nums text-subtle" }, formatElapsed(dictation.elapsedSeconds)), /* @__PURE__ */ React__default.createElement("span", { className: "flex h-4 items-center gap-px", "aria-hidden": true }, dictation.levels.map((level, index) => /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      key: index,
+      className: "h-4 w-0.5 origin-center rounded-full bg-foreground",
+      style: { transform: `scaleY(${level})` }
+    }
+  ))))), /* @__PURE__ */ React__default.createElement("div", { className: "flex shrink-0 items-center gap-2" }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "icon",
+      className: "size-8",
+      "aria-label": "Cancel voice input",
+      onClick: dictation.cancel
+    },
+    /* @__PURE__ */ React__default.createElement(X, { className: "size-4" })
+  ), recording && /* @__PURE__ */ React__default.createElement(Button, { size: "icon", className: "bg-primary text-primary", onClick: dictation.done, "aria-label": "Done" }, /* @__PURE__ */ React__default.createElement(Check, { weight: "bold", className: "size-4" }))));
+};
+const DictationCaption = ({ dictation, hideError = false }) => {
+  const active = isDictating(dictation);
+  if (!active && (!dictation.error || hideError)) return null;
+  const text = dictation.error ? dictation.error : dictation.status === "connecting" ? "Connecting microphone…" : dictation.status === "transcribing" ? "Turning your recording into text…" : "Press Done when you are finished. Press Esc to cancel.";
+  return /* @__PURE__ */ React__default.createElement(
+    "p",
+    {
+      className: cn(
+        "mt-2 text-center text-sm hidden md:block",
+        dictation.error ? dictation.errorTone === "warning" ? "text-warning" : "text-destructive" : "text-subtle"
+      )
+    },
+    text
+  );
+};
+const DictationLiveRegion = ({ dictation }) => {
+  const message = dictation.error ?? (dictation.status === "connecting" ? "Connecting microphone" : dictation.status === "transcribing" ? "Transcribing" : dictation.status === "recording" ? "Recording" : "");
+  return /* @__PURE__ */ React__default.createElement("div", { className: "sr-only", "aria-live": "polite" }, message);
+};
+
+export { DictationCaption, DictationLiveRegion, DictationMic, DictationToolbar, isDictating };

package/dist/esm/components/chat-search/FollowUpSearchBar.js

@@ -1,6 +1,7 @@
 import React__default, { useState, useRef, useEffect } from 'react';
-import { Image, MagnifyingGlass, ArrowRight } from '@phosphor-icons/react';
+import { MagnifyingGlass, Image, ArrowRight } from '@phosphor-icons/react';
 import { motion } from 'framer-motion';
+import { isDictating, DictationToolbar, DictationMic, DictationCaption, DictationLiveRegion } from './DictationChrome.js';
 import styles from './FollowUpSearchBar.module.css.js';
 import { Button } from '../ui/button.js';
 import { Textarea } from '../ui/textarea.js';
@@ -19,7 +20,8 @@ const FollowUpSearchBar = React__default.forwardRef(
     isUploading = false,
     onAddFiles,
     onRemoveFile,
-    disabled = false
+    disabled = false,
+    dictation
   }, ref) => {
     const [localQuery, setLocalQuery] = useState(initialQuery);
     const [isDragOver, setIsDragOver] = useState(false);
@@ -90,6 +92,8 @@ const FollowUpSearchBar = React__default.forwardRef(
     const handleDragLeave = () => {
       setIsDragOver(false);
     };
+    const dictating = isDictating(dictation);
+    const errorPlaceholder = !dictating && dictation?.error && !localQuery ? dictation.error : void 0;
     return /* @__PURE__ */ React__default.createElement(
       motion.footer,
       {
@@ -98,11 +102,12 @@ const FollowUpSearchBar = React__default.forwardRef(
         transition: { duration: 0.5 },
         className: styles.followUpSearchBar
       },
-      /* @__PURE__ */ React__default.createElement("div", { className: "container flex items-center justify-center p-3" }, /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement("div", { className: "container flex items-center justify-center p-3 flex-col" }, /* @__PURE__ */ React__default.createElement(
         "div",
         {
           className: cn(
-            "relative flex w-full flex-col rounded bg-card border border-dark-400",
+            "relative flex w-full flex-col rounded-md bg-background",
+            dictating ? "bg-yellowfin-gradient !border-2" : "border border-dark-400",
             isDragOver && enableFileAttachment && "ring-2 ring-primary"
           ),
           onDrop: handleDrop,
@@ -127,7 +132,20 @@ const FollowUpSearchBar = React__default.forwardRef(
             className: "pt-2 px-2"
           }
         ),
-        /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2 px-2" }, enableFileAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        dictating && dictation ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "flex min-h-16 items-center bg-surface px-3 rounded-t-[4px]" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "mr-2 size-5 shrink-0 text-muted-foreground", "aria-hidden": true }), /* @__PURE__ */ React__default.createElement("div", { className: "relative min-w-0 flex-1" }, /* @__PURE__ */ React__default.createElement(
+          Textarea,
+          {
+            ref: setCombinedRef,
+            value: localQuery,
+            readOnly: true,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyPress,
+            placeholder: textConfig.followUpPlaceholder,
+            className: "min-h-11 w-full resize-none border-0 bg-transparent px-0 py-2.5 shadow-none focus:outline-none focus:ring-0 focus-visible:ring-0",
+            rows: 1
+          }
+        ))), /* @__PURE__ */ React__default.createElement(DictationToolbar, { dictation })) : /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2 px-2" }, enableFileAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
           "input",
           {
             type: "file",
@@ -161,12 +179,15 @@ const FollowUpSearchBar = React__default.forwardRef(
             onChange: handleChange,
             onBlur: handleBlur,
             onKeyDown: handleKeyPress,
-            placeholder: textConfig.followUpPlaceholder,
+            placeholder: errorPlaceholder ?? textConfig.followUpPlaceholder,
             disabled,
-            className: "min-h-11 w-full resize-none border-0 shadow-none bg-transparent px-0 py-2.5 focus:outline-none focus:ring-0 focus-visible:ring-0 disabled:opacity-50 disabled:cursor-not-allowed",
+            className: cn(
+              "min-h-11 w-full resize-none border-0 shadow-none bg-transparent px-0 py-2.5 focus:outline-none focus:ring-0 focus-visible:ring-0 disabled:opacity-50 disabled:cursor-not-allowed",
+              errorPlaceholder && (dictation?.errorTone === "warning" ? "placeholder:text-warning" : "placeholder:text-destructive")
+            ),
             rows: 1
           }
-        ), /* @__PURE__ */ React__default.createElement(
+        ), dictation && /* @__PURE__ */ React__default.createElement(DictationMic, { onStart: dictation.start }), /* @__PURE__ */ React__default.createElement(
           Button,
           {
             type: "button",
@@ -180,7 +201,7 @@ const FollowUpSearchBar = React__default.forwardRef(
           },
           isSearching ? /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 sm:size-5 border-2 border-dark/40 !border-t-foreground" }) : /* @__PURE__ */ React__default.createElement(ArrowRight, { className: "size-6" })
         ))
-      ))
+      ), dictation && /* @__PURE__ */ React__default.createElement(DictationCaption, { dictation, hideError: Boolean(errorPlaceholder) }), dictation && /* @__PURE__ */ React__default.createElement(DictationLiveRegion, { dictation }))
     );
   }
 );

package/dist/esm/components/chat-search/PrimarySearch.js

@@ -2,7 +2,9 @@ import React__default, { useRef, useState, useEffect } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { Globe, LockSimple, MagnifyingGlass, Image, ArrowRight, CaretRight } from '@phosphor-icons/react';
 import { getCountry } from 'countries-and-timezones';
+import { isDictating, DictationToolbar, DictationMic, DictationCaption, DictationLiveRegion } from './DictationChrome.js';
 import { Button } from '../ui/button.js';
+import { Textarea } from '../ui/textarea.js';
 import { AttachmentThumbnails } from './AttachmentThumbnails.js';
 import { IncludePageToggle } from './IncludePageToggle.js';
 import { Combobox } from '../combobox/combobox.js';
@@ -35,7 +37,8 @@ const PrimarySearch = React__default.forwardRef(
     includePageEnabled = false,
     includePageLoading = false,
     includePageDisabled = false,
-    onIncludePageToggle
+    onIncludePageToggle,
+    dictation
   }, ref) => {
     const fileInputRef = useRef(null);
     const [showSuggestions, setShowSuggestions] = useState(false);
@@ -124,10 +127,6 @@ const PrimarySearch = React__default.forwardRef(
         onCollectionChange(collection.value);
       }
     };
-    const adjustTextareaHeight = (textarea) => {
-      textarea.style.height = "auto";
-      textarea.style.height = `${textarea.scrollHeight}px`;
-    };
     const handleKeyPress = (e) => {
       if (e.key === "Enter" && !e.shiftKey && !isUploading) {
         e.preventDefault();
@@ -148,7 +147,9 @@ const PrimarySearch = React__default.forwardRef(
         setShowSuggestions(true);
       }
     }, [query]);
-    const shouldShowSuggestions = showSuggestions && query.trim() && autocompleteSuggestions.length > 0;
+    const dictating = isDictating(dictation);
+    const errorPlaceholder = !dictating && dictation?.error && !query ? dictation.error : void 0;
+    const shouldShowSuggestions = !dictating && showSuggestions && query.trim() && autocompleteSuggestions.length > 0;
     const dropdownVariants = {
       hidden: {
         opacity: 0,
@@ -199,8 +200,9 @@ const PrimarySearch = React__default.forwardRef(
       "div",
       {
         className: cn(
-          "relative w-full overflow-hidden bg-background border border-border transition-all",
-          shouldShowSuggestions ? "rounded-t-md" : "rounded-md",
+          "relative w-full overflow-hidden bg-background transition-all",
+          dictating ? "rounded-md bg-yellowfin-gradient !border-2" : "border border-border",
+          !dictating && (shouldShowSuggestions ? "rounded-t-md" : "rounded-md"),
           isDragOver && enableFileAttachment && "ring-2 ring-primary"
         ),
         onDrop: handleDrop,
@@ -225,27 +227,25 @@ const PrimarySearch = React__default.forwardRef(
           className: "pt-3 px-3 bg-card"
         }
       ),
-      /* @__PURE__ */ React__default.createElement("div", { className: "p-3 flex items-center bg-card", "data-name": "search-input" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "h-5 w-5 mr-2 text-muted-foreground", "aria-hidden": true, role: "presentation" }), /* @__PURE__ */ React__default.createElement(
-        "textarea",
+      /* @__PURE__ */ React__default.createElement("div", { className: cn("p-3 flex items-start bg-surface", dictating && "min-h-16"), "data-name": "search-input" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "size-5 mr-2 shrink-0 text-muted-foreground mt-3", "aria-hidden": true, role: "presentation" }), /* @__PURE__ */ React__default.createElement("div", { className: "relative min-w-0 flex-1" }, /* @__PURE__ */ React__default.createElement(
+        Textarea,
         {
+          id: "search-input",
           ref,
           value: query,
-          onChange: (e) => {
-            onQueryChange(e.target.value);
-            adjustTextareaHeight(e.target);
-          },
+          readOnly: dictating,
+          onChange: (e) => onQueryChange(e.target.value),
           onKeyDown: handleKeyPress,
           onFocus: () => setShowSuggestions(true),
-          placeholder: textConfig.searchPlaceholder,
+          placeholder: errorPlaceholder ?? textConfig.searchPlaceholder,
           className: cn(
-            "w-full resize-none !outline-none text-base py-1 min-h-9",
-            "overflow-hidden border-none bg-transparent shadow-none",
-            "placeholder:text-gray-400 text-dark-900 !ring-0"
+            "min-h-11 w-full resize-none border-0 bg-transparent px-0 py-2.5 shadow-none focus:outline-none focus:ring-0 focus-visible:ring-0",
+            errorPlaceholder && (dictation?.errorTone === "warning" ? "placeholder:text-warning" : "placeholder:text-destructive")
           ),
           rows: 1
         }
-      ), isSearching && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center ml-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 border-2 border-t-transparent border-primary" }))),
-      !shouldShowSuggestions && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, enableFileAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      )), isSearching && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center ml-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 border-2 border-t-transparent border-primary" }))),
+      dictating && dictation ? /* @__PURE__ */ React__default.createElement(DictationToolbar, { dictation }) : !shouldShowSuggestions && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, enableFileAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
         "input",
         {
           type: "file",
@@ -312,7 +312,7 @@ const PrimarySearch = React__default.forwardRef(
           disabled: includePageDisabled,
           onToggle: onIncludePageToggle
         }
-      )), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center", "data-name": "search-button" }, /* @__PURE__ */ React__default.createElement(
+      )), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2", "data-name": "search-button" }, dictation && /* @__PURE__ */ React__default.createElement(DictationMic, { onStart: dictation.start }), /* @__PURE__ */ React__default.createElement(
         Button,
         {
           size: "sm",
@@ -337,7 +337,7 @@ const PrimarySearch = React__default.forwardRef(
           }
         )
       )))
-    ), /* @__PURE__ */ React__default.createElement(AnimatePresence, { mode: "wait" }, shouldShowSuggestions && /* @__PURE__ */ React__default.createElement(
+    ), dictation && /* @__PURE__ */ React__default.createElement(DictationCaption, { dictation, hideError: Boolean(errorPlaceholder) }), dictation && /* @__PURE__ */ React__default.createElement(DictationLiveRegion, { dictation }), /* @__PURE__ */ React__default.createElement(AnimatePresence, { mode: "wait" }, shouldShowSuggestions && /* @__PURE__ */ React__default.createElement(
       motion.div,
       {
         variants: dropdownVariants,

package/dist/esm/components/chat-search/hooks/transcriptSession.js

@@ -0,0 +1,42 @@
+const joinText = (left, right) => {
+  if (!left) return right;
+  if (!right) return left;
+  if (/\s$/.test(left) || /^\s/.test(right)) return `${left}${right}`;
+  return `${left} ${right}`;
+};
+const composeQuery = (prefix, session) => joinText(prefix, session.trim());
+const NON_SPEECH_TAG = /\[[^\]]*\]|\([^)]*\)/g;
+const PUNCTUATION = /\p{P}+/gu;
+const FILLER_PHRASES = ["you know", "i mean", "thank you", "thanks for watching"];
+const FILLER_WORDS = /* @__PURE__ */ new Set([
+  "um",
+  "umm",
+  "uh",
+  "uhh",
+  "er",
+  "erm",
+  "ah",
+  "hmm",
+  "hm",
+  "mm",
+  "mhm",
+  "huh",
+  "oh",
+  "okay",
+  "ok",
+  "yeah",
+  "so",
+  "well",
+  "you",
+  "bye"
+]);
+const isMeaningfulTranscript = (text) => {
+  const cleaned = text.replace(NON_SPEECH_TAG, " ").replace(PUNCTUATION, " ").toLowerCase().replace(/\s+/g, " ").trim();
+  const withoutPhrases = FILLER_PHRASES.reduce(
+    (rest, phrase) => rest.replace(new RegExp(`\\b${phrase}\\b`, "g"), " "),
+    cleaned
+  );
+  return withoutPhrases.split(" ").some((word) => word && !FILLER_WORDS.has(word));
+};
+
+export { composeQuery, isMeaningfulTranscript };

package/dist/esm/components/chat-search/hooks/useSearchDictation.js

@@ -0,0 +1,162 @@
+import { useState, useRef, useEffect } from 'react';
+import { useMicrophone, useReducedMotion, useEvent } from '@reactuses/core';
+import { isMeaningfulTranscript, composeQuery } from './transcriptSession.js';
+import { makeRequest } from '../../../lib/fetchClient.js';
+
+const MAX_SESSION_MS = 6e4;
+const BAR_COUNT = 16;
+const MIN_LEVEL = 0.12;
+const MIC_BLOCKED = "Allow microphone access in your browser settings, then try again.";
+const UNAVAILABLE = "Voice input is unavailable right now. You can still type.";
+const TRANSCRIBE_FAILED = "Could not transcribe your recording. Try again or type your question.";
+const NO_SPEECH = "We didn't catch a question. Try again or type it.";
+const MIC_CONSTRAINTS = { channelCount: 1 };
+const FLAT_LEVELS = Array.from({ length: BAR_COUNT }, () => MIN_LEVEL);
+const isPermissionError = (error) => {
+  const name = error?.name;
+  return name === "NotAllowedError" || name === "NotFoundError" || name === "SecurityError";
+};
+const toBarLevel = (level) => Math.min(1, MIN_LEVEL + level * 2.4);
+const fileNameFor = (mediaType) => `dictation.${mediaType.includes("mp4") ? "mp4" : "webm"}`;
+const useSearchDictation = ({
+  endpoint,
+  headers,
+  getText,
+  setText,
+  onSubmit
+}) => {
+  const {
+    isSupported,
+    level,
+    error: micError,
+    start: openMic,
+    stop: closeMic,
+    startRecording,
+    stopRecording
+  } = useMicrophone({ constraints: MIC_CONSTRAINTS });
+  const reducedMotion = useReducedMotion();
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const [errorTone, setErrorTone] = useState(null);
+  const [elapsedSeconds, setElapsedSeconds] = useState(0);
+  const [levels, setLevels] = useState(FLAT_LEVELS);
+  const abortRef = useRef(null);
+  const prefixRef = useRef("");
+  const fail = useEvent((message, tone = "danger") => {
+    setError(message);
+    setErrorTone(tone);
+    setStatus("error");
+  });
+  const cancel = useEvent(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+    closeMic();
+    setText(prefixRef.current);
+    setError(null);
+    setErrorTone(null);
+    setStatus("idle");
+  });
+  const start = useEvent(async () => {
+    const active = status === "connecting" || status === "recording" || status === "transcribing";
+    if (!endpoint || active) return;
+    const abort = new AbortController();
+    abortRef.current = abort;
+    prefixRef.current = getText();
+    setError(null);
+    setErrorTone(null);
+    setElapsedSeconds(0);
+    setLevels(FLAT_LEVELS);
+    setStatus("connecting");
+    try {
+      if (typeof MediaRecorder === "undefined") throw new Error("MediaRecorder is not supported");
+      await openMic();
+      if (abort.signal.aborted) {
+        closeMic();
+        return;
+      }
+      startRecording();
+      setStatus("recording");
+    } catch (caught) {
+      if (abort.signal.aborted) return;
+      closeMic();
+      fail(isPermissionError(caught) ? MIC_BLOCKED : UNAVAILABLE);
+    }
+  });
+  const done = useEvent(async () => {
+    const abort = abortRef.current;
+    if (!endpoint || !abort || status !== "recording") return;
+    setStatus("transcribing");
+    try {
+      const blob = await stopRecording();
+      closeMic();
+      if (abort.signal.aborted) return;
+      if (!blob?.size) return fail(TRANSCRIBE_FAILED);
+      const form = new FormData();
+      form.append("file", blob, fileNameFor(blob.type));
+      const payload = await makeRequest(endpoint, {
+        method: "POST",
+        headers,
+        body: form,
+        retry: { maxRetries: 0 },
+        signal: abort.signal
+      });
+      if (abort.signal.aborted) return;
+      const text = payload.data?.text?.trim() ?? "";
+      if (!isMeaningfulTranscript(text)) return fail(NO_SPEECH, "warning");
+      const query = composeQuery(prefixRef.current, text);
+      setStatus("idle");
+      if (onSubmit) onSubmit(query);
+      else setText(query);
+    } catch {
+      if (!abort.signal.aborted) fail(UNAVAILABLE);
+    } finally {
+      if (abortRef.current === abort) abortRef.current = null;
+    }
+  });
+  useEffect(() => {
+    if (status !== "recording") return;
+    const startedAt = Date.now();
+    const timer = window.setInterval(() => {
+      const elapsed = Date.now() - startedAt;
+      setElapsedSeconds(Math.floor(elapsed / 1e3));
+      if (elapsed >= MAX_SESSION_MS) void done();
+    }, 250);
+    return () => window.clearInterval(timer);
+  }, [status, done]);
+  useEffect(() => {
+    if (status !== "recording" || reducedMotion) return;
+    setLevels((previous) => [...previous.slice(1), toBarLevel(level)]);
+  }, [level, reducedMotion, status]);
+  useEffect(() => {
+    if (!micError || status !== "recording") return;
+    abortRef.current?.abort();
+    fail(UNAVAILABLE);
+  }, [micError, status, fail]);
+  useEffect(() => {
+    if (status !== "connecting" && status !== "recording" && status !== "transcribing") return;
+    const onKey = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        cancel();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [cancel, status]);
+  useEffect(() => () => abortRef.current?.abort(), []);
+  return {
+    available: Boolean(endpoint) && isSupported,
+    status,
+    partial: "",
+    committed: "",
+    error,
+    errorTone,
+    elapsedSeconds,
+    levels,
+    start: () => void start(),
+    done: () => void done(),
+    cancel
+  };
+};
+
+export { useSearchDictation };

package/dist/esm/global.css

@@ -1475,6 +1475,9 @@ video {
 .min-h-11{
   min-height: 2.75rem;
 }
+.min-h-16{
+  min-height: 4rem;
+}
 .min-h-20{
   min-height: 5rem;
 }
@@ -1508,6 +1511,9 @@ video {
 .w-0{
   width: 0px;
 }
+.w-0\.5{
+  width: 0.125rem;
+}
 .w-1{
   width: 0.25rem;
 }
@@ -1939,6 +1945,9 @@ video {
 .gap-\[2px\]{
   gap: 2px;
 }
+.gap-px{
+  gap: 1px;
+}
 .-space-x-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
@@ -2093,6 +2102,10 @@ video {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
 }
+.rounded-b-\[4px\]{
+  border-bottom-right-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
 .rounded-b-lg{
   border-bottom-right-radius: 0.5rem;
   border-bottom-left-radius: 0.5rem;
@@ -2121,6 +2134,10 @@ video {
   border-top-left-radius: 1rem;
   border-top-right-radius: 1rem;
 }
+.rounded-t-\[4px\]{
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
 .rounded-t-lg{
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
@@ -2129,6 +2146,9 @@ video {
   border-top-left-radius: 0.375rem;
   border-top-right-radius: 0.375rem;
 }
+.\!border-2{
+  border-width: 2px !important;
+}
 .border{
   border-width: 1px;
 }
@@ -2392,6 +2412,9 @@ video {
 .bg-primary{
   background-color: var(--bfc-primary);
 }
+.bg-red{
+  background-color: var(--bfc-v2-color-red-700, #c9372c);
+}
 .bg-red-100{
   background-color: var(--bfc-v2-color-red-100, #ffeceb);
 }
@@ -3080,11 +3103,6 @@ video {
 .outline-lime-200{
   outline-color: var(--bfc-v2-color-lime-200, #d6f589);
 }
-.\!ring-0{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-}
 .ring-0{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -3250,6 +3268,9 @@ video {
 .ease-out{
   animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
+.running{
+  animation-play-state: running;
+}
 .\@container{
   container-type: inline-size;
 }
@@ -3331,6 +3352,14 @@ video {
   pointer-events: none;
   border-radius: inherit;
   z-index: 0;
+}
+.bg-yellowfin-gradient{
+  border: 1.2px solid transparent;
+  background: linear-gradient(145.85deg, #1868DB 7.35%, #357DE8 23.69%, #7EE2B8 61.42%, #B4EE2B 82.59%),
+                         linear-gradient(145.85deg, rgba(180, 238, 43, 0.7) 3.02%, rgba(126, 226, 184, 0.7) 24.19%, rgba(53, 125, 232, 0.7) 61.92%, rgba(24, 104, 219, 0.7) 78.26%);
+  transition: all 0.2s ease-in-out;
+  background-origin: border-box;
+  background-clip: content-box, border-box;
 }
   .shimmer {
     animation: shimmer 3s infinite linear;
@@ -3588,14 +3617,12 @@ strong {
   color: var(--bfc-foreground);
 }
 
-.placeholder\:text-gray-400::-moz-placeholder{
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+.placeholder\:text-destructive::-moz-placeholder{
+  color: var(--bfc-destructive-text);
 }
 
-.placeholder\:text-gray-400::placeholder{
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+.placeholder\:text-destructive::placeholder{
+  color: var(--bfc-destructive-text);
 }
 
 .placeholder\:text-muted-foreground::-moz-placeholder{
@@ -3606,6 +3633,14 @@ strong {
   color: var(--bfc-muted-foreground);
 }
 
+.placeholder\:text-warning::-moz-placeholder{
+  color: var(--bfc-warning-text);
+}
+
+.placeholder\:text-warning::placeholder{
+  color: var(--bfc-warning-text);
+}
+
 .after\:absolute::after{
   content: var(--tw-content);
   position: absolute;

package/dist/esm/lib/features.js

@@ -1,5 +1,6 @@
 const Features = {
-  HistoryTab: "enableHistoryTab"
+  HistoryTab: "enableHistoryTab",
+  TranscribeEnabled: "help-center.transcribe.enabled"
 };
 
 export { Features };

package/dist/esm/lib/fetchClient.js

@@ -18,6 +18,11 @@ let globalFallbackConfig = { ...defaultFallbackConfig };
 async function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
+function withoutContentType(headers) {
+  const result = new Headers(headers);
+  result.delete("Content-Type");
+  return result;
+}
 async function makeRequest(url, config = {}) {
   const { retry = {}, headers = {}, body, isStream = false, fallback = {}, ...fetchConfig } = config;
   const retryOptions = {
@@ -29,15 +34,16 @@ async function makeRequest(url, config = {}) {
     ...fallback
   };
   let attempt = 1;
+  const isFormData = typeof FormData !== "undefined" && body instanceof FormData;
   while (true) {
     try {
       const response = await fetch(url, {
         ...fetchConfig,
-        headers: {
+        headers: isFormData ? withoutContentType(headers) : {
           "Content-Type": "application/json",
           ...headers
         },
-        body: body ? JSON.stringify(body) : void 0
+        body: isFormData ? body : body ? JSON.stringify(body) : void 0
       });
       if (response.ok) {
         if (isStream) {

package/dist/lib/features.d.ts

@@ -1,4 +1,5 @@
 export declare const Features: {
     readonly UseSseForAnswers: "use-sse-for-answers";
     readonly HistoryTab: "enableHistoryTab";
+    readonly TranscribeEnabled: "help-center.transcribe.enabled";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brainfish-ai/components",
-  "version": "0.36.1",
+  "version": "0.37.1",
   "description": "Brainfish Components",
   "license": "MIT",
   "main": "./dist/esm/index.js",
@@ -185,6 +185,7 @@
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.21",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@reactuses/core": "^6.6.1",
     "@tanstack/react-table": "^8.21.3",
     "ajv": "^8.20.0",
     "ajv-errors": "^3.0.0",
@@ -224,6 +225,7 @@
     "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.6",
     "y-webrtc": "^10.3.0",
-    "yjs": "^13.6.27"
+    "yjs": "^13.6.27",
+    "zod": "^3.25.76"
   }
 }