Feat: The chat feature supports streaming output, displaying results one by one. #12490 (#12493)

### What problem does this PR solve?

Feat: The chat feature supports streaming output, displaying results one
by one.

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/hooks/logic-hooks.ts

@@ -274,10 +274,23 @@ export const useSendMessageWithSse = (
                 const val = JSON.parse(value?.data || '');
                 const d = val?.data;
                 if (typeof d !== 'boolean') {
-                  setAnswer({
-                    ...d,
-                    conversationId: body?.conversation_id,
-                    chatBoxId: body.chatBoxId,
+                  setAnswer((prev) => {
+                    let newAnswer = (prev.answer || '') + (d.answer || '');
+
+                    if (d.start_to_think === true) {
+                      newAnswer = newAnswer + '<think>';
+                    }
+
+                    if (d.end_to_think === true) {
+                      newAnswer = newAnswer + '</think>';
+                    }
+
+                    return {
+                      ...d,
+                      answer: newAnswer,
+                      conversationId: body?.conversation_id,
+                      chatBoxId: body.chatBoxId,
+                    };
                   });
                 }
               } catch (e) {

web/src/pages/next-chats/chat/app-settings/chat-settings.tsx

@@ -8,7 +8,7 @@ import {
   setLLMSettingEnabledValues,
 } from '@/utils/form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { omit } from 'lodash';
+import { isEmpty, omit } from 'lodash';
 import { X } from 'lucide-react';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
@@ -33,7 +33,7 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
 
   const form = useForm<FormSchemaType>({
     resolver: zodResolver(formSchema),
-    shouldUnregister: true,
+    shouldUnregister: false,
     defaultValues: {
       name: '',
       icon: '',
@@ -88,7 +88,10 @@ export function ChatSettings({ switchSettingVisible }: ChatSettingsProps) {
       ...data,
       ...llmSettingEnabledValues,
     };
-    form.reset(nextData as FormSchemaType);
+
+    if (!isEmpty(data)) {
+      form.reset(nextData as FormSchemaType);
+    }
   }, [data, form]);
 
   return (

web/src/pages/next-chats/chat/app-settings/dynamic-variable.tsx

@@ -22,6 +22,7 @@ export function DynamicVariableForm() {
   const { fields, remove, append } = useFieldArray({
     name,
     control: form.control,
+    shouldUnregister: false,
   });
 
   const add = useCallback(() => {

web/src/pages/next-chats/chat/app-settings/use-chat-setting-schema.tsx

@@ -24,12 +24,14 @@ export function useChatSettingSchema() {
     system: z.string().min(1, { message: t('systemMessage') }),
     refine_multiturn: z.boolean(),
     use_kg: z.boolean(),
-    parameters: z.array(
-      z.object({
-        key: z.string(),
-        optional: z.boolean(),
-      }),
-    ),
+    parameters: z
+      .array(
+        z.object({
+          key: z.string(),
+          optional: z.boolean(),
+        }),
+      )
+      .optional(),
     tavily_api_key: z.string().optional(),
     reasoning: z.boolean().optional(),
     cross_languages: z.array(z.string()).optional(),

web/vite.config.ts

@@ -59,7 +59,7 @@ export default defineConfig(({ mode, command }) => {
       },
     },
     server: {
-      port: 9222,
+      port: Number(env.PORT) || 9222,
       strictPort: false,
       hmr: {
         overlay: false,