ui: use query engine options for recommended questions (#141)

src/app/(main)/page.tsx

@@ -8,7 +8,7 @@ import { useSettingContext } from '@/components/website-setting-provider';
 import { withReCaptcha } from '@/components/security-setting-provider';
 
 export default function Page() {
-  const { loading, ask } = useAsk();
+  const { loading, setEngine, ask, engine } = useAsk();
   const { website: { homepage }, security } = useSettingContext();
 
   return (
@@ -20,7 +20,7 @@ export default function Page() {
         <p className="font-light dark:text-gray-300 text-gray-500 mb-4 w-4/5 md:w-auto text-center">
           {homepage?.description || ''}
         </p>
-        <Ask className="px-4 w-full lg:w-2/3" loading={loading} ask={ask} />
+        <Ask className="px-4 w-full lg:w-2/3" loading={loading} ask={ask} engine={engine} setEngine={setEngine} />
         {homepage?.example_questions && (<ul className="flex gap-2 flex-wrap px-4 w-full lg:w-2/3">
           {homepage.example_questions.map(item => (
             <li key={item.text}>

src/components/ask.tsx

@@ -1,12 +1,11 @@
 import { MessageInput } from '@/components/message-input';
 import { SecuritySettingContext, withReCaptcha } from '@/components/security-setting-provider';
 import { type UseAskReturns } from '@/components/use-ask';
-import { useContext, useRef, useState } from 'react';
+import { useContext, useRef } from 'react';
 
-export function Ask ({ className, loading, ask }: { className?: string } & UseAskReturns) {
+export function Ask ({ className, loading, ask, engine, setEngine }: { className?: string } & UseAskReturns) {
   const ref = useRef<HTMLTextAreaElement>(null);
   const security = useContext(SecuritySettingContext);
-  const [engine, setEngine] = useState<number>();
 
   return (
     <form

src/components/use-ask.ts

@@ -2,13 +2,15 @@ import { __setMessage } from '@/app/(main)/(public)/c/[id]/internal';
 import { handleErrors } from '@/lib/fetch';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
-import { useCallback, useState, useTransition } from 'react';
-import { mutate } from 'swr'
+import { useCallback, useRef, useState, useTransition } from 'react';
+import { mutate } from 'swr';
 
-export function useAsk(onFinish?: () => void) {
+export function useAsk (onFinish?: () => void) {
   const session = useSession();
   const router = useRouter();
   const [loading, setLoading] = useState(false);
+  const [engine, setEngine] = useState<number>();
+  const engineRef = useRef<number>();
   const [transitioning, startTransition] = useTransition();
 
   const ask = useCallback((message: string, options?: {
@@ -22,15 +24,15 @@ export function useAsk(onFinish?: () => void) {
         body: JSON.stringify({
           messages: [],
           name: message,
-          engine: options?.engine,
+          engine: engineRef?.current ?? options?.engine,
         }),
-        headers: {...options?.headers},
+        headers: { ...options?.headers },
       }).then(handleErrors)
         .then(res => res.json())
         .then(res => {
           __setMessage(message);
           startTransition(() => {
-            onFinish?.()
+            onFinish?.();
             router.push(`/c/${encodeURIComponent(res.url_key)}`);
           });
         })
@@ -45,6 +47,11 @@ export function useAsk(onFinish?: () => void) {
 
   return {
     ask,
+    engine,
+    setEngine: (engine: number | undefined) => {
+      engineRef.current = engine;
+      setEngine(engine);
+    },
     loading: disabled,
   };
 }