feat: Add Citations and Attributions to Agent Node (#18558)

Co-authored-by: oneness0 <2902216407@qq.com>
Co-authored-by: Novice <novice12185727@gmail.com>

web/app/components/base/chat/chat/question.tsx

@@ -117,7 +117,7 @@ const Question: FC<QuestionProps> = ({
         </div>
         <div
           ref={contentRef}
-          className='bg-background-gradient-bg-fill-chat-bubble-bg-3 w-full rounded-2xl px-4 py-3 text-sm text-text-primary'
+          className='w-full rounded-2xl bg-background-gradient-bg-fill-chat-bubble-bg-3 px-4 py-3 text-sm text-text-primary'
           style={theme?.chatBubbleColorStyle ? CssTransform(theme.chatBubbleColorStyle) : {}}
         >
           {

web/app/components/header/account-setting/model-provider-page/declarations.ts

@@ -21,6 +21,7 @@ export enum FormTypeEnum {
   toolSelector = 'tool-selector',
   multiToolSelector = 'array[tools]',
   appSelector = 'app-selector',
+  any = 'any',
   object = 'object',
   array = 'array',
   dynamicSelect = 'dynamic-select',

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -21,6 +21,7 @@ import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/mo
 import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import RadioE from '@/app/components/base/radio/ui'
 import type {
   NodeOutPutVar,
@@ -412,6 +413,38 @@ function Form<
       )
     }
 
+    if (formSchema.type === FormTypeEnum.any) {
+      const {
+        variable, label, required, scope,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'system-sm-semibold flex items-center py-2 text-text-secondary')}>
+            {label[language] || label.en_US}
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
+            {tooltipContent}
+          </div>
+          <VarReferencePicker
+            zIndex={1001}
+            readonly={false}
+            isShowNodeName
+            nodeId={nodeId || ''}
+            value={value[variable] || []}
+            onChange={item => handleFormChange(variable, item as any)}
+            filterVar={(varPayload) => {
+              if (!scope) return true
+              return scope.split('&').includes(varPayload.type)
+            }}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
+    }
+
     // @ts-expect-error it work
     if (!Object.values(FormTypeEnum).includes(formSchema.type))
       return customRenderField?.(formSchema as CustomFormSchema, filteredProps)

web/app/components/header/account-setting/model-provider-page/provider-added-card/model-list-item.tsx

@@ -48,7 +48,7 @@ const ModelListItem = ({ model, provider, isConfigurable, onConfig, onModifyLoad
     <div
       key={model.model}
       className={classNames(
-        'group flex items-center pl-2 pr-2.5 h-8 rounded-lg',
+        'group flex h-8 items-center rounded-lg pl-2 pr-2.5',
         isConfigurable && 'hover:bg-components-panel-on-panel-item-bg-hover',
         model.deprecated && 'opacity-60',
       )}

web/app/components/workflow/nodes/agent/use-config.ts

@@ -13,8 +13,8 @@ import type { Memory, Var } from '../../types'
 import { VarType as VarKindType } from '../../types'
 import useAvailableVarList from '../_base/hooks/use-available-var-list'
 import produce from 'immer'
-import { isSupportMCP } from '@/utils/plugin-version-feature'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { isSupportMCP } from '@/utils/plugin-version-feature'
 import { generateAgentToolValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
 
 export type StrategyStatus = {
@@ -95,11 +95,20 @@ const useConfig = (id: string, payload: AgentNodeType) => {
     )
     return res
   }, [inputs.agent_parameters, currentStrategy?.parameters])
+
+  const getParamVarType = useCallback((paramName: string) => {
+    const isVariable = currentStrategy?.parameters.some(
+      param => param.name === paramName && param.type === FormTypeEnum.any,
+    )
+    if (isVariable) return VarType.variable
+    return VarType.constant
+  }, [currentStrategy?.parameters])
+
   const onFormChange = (value: Record<string, any>) => {
     const res: ToolVarInputs = {}
     Object.entries(value).forEach(([key, val]) => {
       res[key] = {
-        type: VarType.constant,
+        type: getParamVarType(key),
         value: val,
       }
     })