Feature：Add voice dialogue functionality to the agent application (#11668)

### What problem does this PR solve?

Feature：Add voice dialogue functionality to the agent application

### Type of change

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

web/src/pages/agent/chat/use-send-agent-message.ts

@@ -50,10 +50,13 @@ export function findMessageFromList(eventList: IEventList) {
 
   let startIndex = -1;
   let endIndex = -1;
-
+  let audioBinary = undefined;
   messageEventList.forEach((x, idx) => {
     const { data } = x;
-    const { content, start_to_think, end_to_think } = data;
+    const { content, start_to_think, end_to_think, audio_binary } = data;
+    if (audio_binary) {
+      audioBinary = audio_binary;
+    }
     if (start_to_think === true) {
       nextContent += '<think>' + content;
       startIndex = idx;
@@ -82,6 +85,7 @@ export function findMessageFromList(eventList: IEventList) {
   return {
     id: eventList[0]?.message_id,
     content: nextContent,
+    audio_binary: audioBinary,
     attachment: workflowFinished?.data?.outputs?.attachment || {},
   };
 }
@@ -393,12 +397,15 @@ export const useSendAgentMessage = ({
   }, [sendMessageInTaskMode]);
 
   useEffect(() => {
-    const { content, id, attachment } = findMessageFromList(answerList);
+    const { content, id, attachment, audio_binary } =
+      findMessageFromList(answerList);
     const inputAnswer = findInputFromList(answerList);
     const answer = content || getLatestError(answerList);
+
     if (answerList.length > 0) {
       addNewestOneAnswer({
         answer: answer ?? '',
+        audio_binary: audio_binary,
         attachment: attachment as IAttachment,
         id: id,
         ...inputAnswer,

web/src/pages/agent/form/message-form/index.tsx

@@ -9,6 +9,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { RAGFlowSelect } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { X } from 'lucide-react';
 import { memo } from 'react';
@@ -36,12 +37,14 @@ function MessageForm({ node }: INextOperatorForm) {
       )
       .optional(),
     output_format: z.string().optional(),
+    auto_play: z.boolean().optional(),
   });
 
   const form = useForm({
     defaultValues: {
       ...values,
       output_format: values.output_format,
+      auto_play: values.auto_play,
     },
     resolver: zodResolver(FormSchema),
   });
@@ -56,40 +59,6 @@ function MessageForm({ node }: INextOperatorForm) {
   return (
     <Form {...form}>
       <FormWrapper>
-        <FormContainer>
-          <FormItem>
-            <FormLabel tooltip={t('flow.downloadFileTypeTip')}>
-              {t('flow.downloadFileType')}
-            </FormLabel>
-            <FormField
-              control={form.control}
-              name={`output_format`}
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormControl>
-                    <RAGFlowSelect
-                      options={Object.keys(ExportFileType).map(
-                        (key: string) => {
-                          return {
-                            value:
-                              ExportFileType[
-                                key as keyof typeof ExportFileType
-                              ],
-                            label: key,
-                          };
-                        },
-                      )}
-                      {...field}
-                      onValueChange={field.onChange}
-                      placeholder={t('common.selectPlaceholder')}
-                      allowClear
-                    ></RAGFlowSelect>
-                  </FormControl>
-                </FormItem>
-              )}
-            />
-          </FormItem>
-        </FormContainer>
         <FormContainer>
           <FormItem>
             <FormLabel tooltip={t('flow.msgTip')}>{t('flow.msg')}</FormLabel>
@@ -132,6 +101,57 @@ function MessageForm({ node }: INextOperatorForm) {
             <FormMessage />
           </FormItem>
         </FormContainer>
+        <FormContainer>
+          <FormItem>
+            <FormLabel tooltip={t('flow.downloadFileTypeTip')}>
+              {t('flow.downloadFileType')}
+            </FormLabel>
+            <FormField
+              control={form.control}
+              name={`output_format`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <RAGFlowSelect
+                      options={Object.keys(ExportFileType).map(
+                        (key: string) => {
+                          return {
+                            value:
+                              ExportFileType[
+                                key as keyof typeof ExportFileType
+                              ],
+                            label: key,
+                          };
+                        },
+                      )}
+                      {...field}
+                      onValueChange={field.onChange}
+                      placeholder={t('common.selectPlaceholder')}
+                      allowClear
+                    ></RAGFlowSelect>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </FormItem>
+          <FormItem>
+            <FormLabel>{t('flow.autoPlay')}</FormLabel>
+            <FormField
+              control={form.control}
+              name={`auto_play`}
+              render={({ field }) => (
+                <FormItem className="flex-1">
+                  <FormControl>
+                    <Switch
+                      checked={field.value}
+                      onCheckedChange={field.onChange}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </FormItem>
+        </FormContainer>
       </FormWrapper>
     </Form>
   );

web/src/pages/dataset/testing/index.tsx

@@ -40,7 +40,7 @@ export default function RetrievalTesting() {
                 <Plus /> Add New Test
               </Button> */}
             </div>
-            <div className="h-[calc(100vh-241px)] overflow-auto scrollbar-thin">
+            <div className="h-[calc(100vh-241px)] overflow-auto scrollbar-thin px-1">
               <TestingForm
                 loading={loading}
                 setValues={setValues}

web/src/pages/dataset/testing/testing-result.tsx

@@ -100,9 +100,9 @@ export function TestingResult({
         </>
       )}
       {!data.chunks?.length && !loading && (
-        <div className="flex justify-center items-center w-full h-[calc(100vh-241px)]">
+        <div className="flex justify-center items-center w-full h-[calc(100vh-280px)]">
           <div>
-            <Empty type={EmptyType.SearchData}>
+            <Empty type={EmptyType.SearchData} iconWidth={80}>
               {data.isRuned && (
                 <div className="text-text-secondary">
                   {t('knowledgeDetails.noTestResultsForRuned')}