Feat: Add Yahoo Finance Operator #3221 (#9088)

### What problem does this PR solve?

Feat: Add Yahoo Finance Operator #3221

### Type of change


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

web/src/pages/agent/canvas/node/dropdown/next-step-dropdown.tsx

@@ -103,6 +103,7 @@ function AccordionOperators() {
               Operator.TavilyExtract,
               Operator.ExeSQL,
               Operator.Google,
+              Operator.YahooFinance,
             ]}
           ></OperatorItemList>
         </AccordionContent>

web/src/pages/agent/constant.tsx

@@ -464,13 +464,19 @@ export const initialWenCaiValues = {
 export const initialAkShareValues = { top_n: 10, ...initialQueryBaseValues };
 
 export const initialYahooFinanceValues = {
+  stock_code: '',
   info: true,
   history: false,
   financials: false,
   balance_sheet: false,
   cash_flow_statement: false,
   news: true,
-  ...initialQueryBaseValues,
+  outputs: {
+    report: {
+      value: '',
+      type: 'string',
+    },
+  },
 };
 
 export const initialJin10Values = {

web/src/pages/agent/form/tool-form/constant.tsx

@@ -8,12 +8,12 @@ import GithubForm from '../github-form';
 import GoogleScholarForm from '../google-scholar-form';
 import PubMedForm from '../pubmed-form';
 import WikipediaForm from '../wikipedia-form';
-import YahooFinanceForm from '../yahoo-finance-form';
 import BingForm from './bing-form';
 import CrawlerForm from './crawler-form';
 import ExeSQLForm from './exesql-form';
 import RetrievalForm from './retrieval-form';
 import TavilyForm from './tavily-form';
+import YahooFinanceForm from './yahoo-finance-form';
 
 export const ToolFormConfigMap = {
   [Operator.Retrieval]: RetrievalForm,

web/src/pages/agent/form/tool-form/yahoo-finance-form/index.tsx

@@ -0,0 +1,40 @@
+import { FormContainer } from '@/components/form-container';
+import { Form } from '@/components/ui/form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { memo } from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { FormWrapper } from '../../components/form-wrapper';
+import {
+  YahooFinanceFormPartialSchema,
+  YahooFinanceFormWidgets,
+} from '../../yahoo-finance-form';
+import { useValues } from '../use-values';
+import { useWatchFormChange } from '../use-watch-change';
+
+const FormSchema = z.object({
+  ...YahooFinanceFormPartialSchema,
+});
+
+function YahooFinanceForm() {
+  const values = useValues();
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues: values,
+    resolver: zodResolver(FormSchema),
+  });
+
+  useWatchFormChange(form);
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <YahooFinanceFormWidgets></YahooFinanceFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+    </Form>
+  );
+}
+
+export default memo(YahooFinanceForm);

web/src/pages/agent/form/yahoo-finance-form/index.tsx

@@ -1,38 +1,127 @@
+import { FormContainer } from '@/components/form-container';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Switch } from '@/components/ui/switch';
 import { useTranslate } from '@/hooks/common-hooks';
-import { Form, Switch } from 'antd';
-import { IOperatorForm } from '../../interface';
-import DynamicInputVariable from '../components/dynamic-input-variable';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ReactNode } from 'react';
+import { useForm, useFormContext } from 'react-hook-form';
+import { z } from 'zod';
+import { initialYahooFinanceValues } from '../../constant';
+import { useFormValues } from '../../hooks/use-form-values';
+import { INextOperatorForm } from '../../interface';
+import { buildOutputList } from '../../utils/build-output-list';
+import { FormWrapper } from '../components/form-wrapper';
+import { Output } from '../components/output';
 
-const YahooFinanceForm = ({ onValuesChange, form, node }: IOperatorForm) => {
-  const { t } = useTranslate('flow');
+export const YahooFinanceFormPartialSchema = {
+  info: z.boolean(),
+  history: z.boolean(),
+  financials: z.boolean(),
+  balance_sheet: z.boolean(),
+  cash_flow_statement: z.boolean(),
+  news: z.boolean(),
+};
+
+const FormSchema = z.object({
+  stock_code: z.string(),
+  ...YahooFinanceFormPartialSchema,
+});
+
+interface SwitchFormFieldProps {
+  name: string;
+  label: ReactNode;
+}
+function SwitchFormField({ name, label }: SwitchFormFieldProps) {
+  const form = useFormContext();
 
   return (
-    <Form
-      name="basic"
-      autoComplete="off"
-      form={form}
-      onValuesChange={onValuesChange}
-      layout={'vertical'}
-    >
-      <DynamicInputVariable node={node}></DynamicInputVariable>
-      <Form.Item label={t('info')} name={'info'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('history')} name={'history'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('financials')} name={'financials'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('balanceSheet')} name={'balance_sheet'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('cashFlowStatement')} name={'cash_flow_statement'}>
-        <Switch></Switch>
-      </Form.Item>
-      <Form.Item label={t('news')} name={'news'}>
-        <Switch></Switch>
-      </Form.Item>
+    <FormField
+      control={form.control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <FormControl>
+            <Switch
+              checked={field.value}
+              onCheckedChange={field.onChange}
+            ></Switch>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}
+
+export function YahooFinanceFormWidgets() {
+  const { t } = useTranslate('flow');
+  return (
+    <>
+      <SwitchFormField name="info" label={t('info')}></SwitchFormField>
+      <SwitchFormField name="history" label={t('history')}></SwitchFormField>
+      <SwitchFormField
+        name="financials"
+        label={t('financials')}
+      ></SwitchFormField>
+      <SwitchFormField
+        name="balance_sheet"
+        label={t('balanceSheet')}
+      ></SwitchFormField>
+
+      <SwitchFormField
+        name="cash_flow_statement"
+        label={t('cashFlowStatement')}
+      ></SwitchFormField>
+
+      <SwitchFormField name="news" label={t('news')}></SwitchFormField>
+    </>
+  );
+}
+
+const outputList = buildOutputList(initialYahooFinanceValues.outputs);
+
+const YahooFinanceForm = ({ node }: INextOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const defaultValues = useFormValues(initialYahooFinanceValues, node);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    defaultValues,
+    resolver: zodResolver(FormSchema),
+  });
+
+  return (
+    <Form {...form}>
+      <FormWrapper>
+        <FormContainer>
+          <FormField
+            control={form.control}
+            name={`stock_code`}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{t('stockCode')}</FormLabel>
+                <FormControl>
+                  <Input {...field}></Input>
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <YahooFinanceFormWidgets></YahooFinanceFormWidgets>
+        </FormContainer>
+      </FormWrapper>
+      <div className="p-5">
+        <Output list={outputList}></Output>
+      </div>
     </Form>
   );
 };

web/src/pages/agent/hooks/use-agent-tool-initial-values.ts

@@ -24,6 +24,8 @@ export function useAgentToolInitialValues() {
           return omit(initialValues, 'sql');
         case Operator.Bing:
           return omit(initialValues, 'query');
+        case Operator.YahooFinance:
+          return omit(initialValues, 'stock_code');
 
         default:
           return initialValues;