chore: init chat params

src/pages/playground/components/dynamic-params.tsx

@@ -18,7 +18,7 @@ type ParamsSettingsProps = {
   ref?: any;
   parametersTitle?: React.ReactNode;
   showModelSelector?: boolean;
-  modelList: Global.BaseOption<string>[];
+  modelList?: Global.BaseOption<string>[];
   onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
   onModelChange?: (model: string) => void;
   paramsConfig?: ParamsSchema[];
@@ -143,27 +143,29 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
                   </span>
                 )}
               </h3>
-              <Form.Item
+              {showModelSelector && (
-                name="model"
+                <Form.Item
-                rules={[
+                  name="model"
-                  {
+                  rules={[
-                    required: true,
+                    {
-                    message: intl.formatMessage(
+                      required: true,
-                      {
+                      message: intl.formatMessage(
-                        id: 'common.form.rule.select'
+                        {
-                      },
+                          id: 'common.form.rule.select'
-                      { name: intl.formatMessage({ id: 'playground.model' }) }
+                        },
-                    )
+                        { name: intl.formatMessage({ id: 'playground.model' }) }
-                  }
+                      )
-                ]}
+                    }
-              >
+                  ]}
-                <SealSelect
+                >
-                  onChange={handleOnModelChange}
+                  <SealSelect
-                  showSearch={true}
+                    onChange={handleOnModelChange}
-                  options={modelList}
+                    showSearch={true}
-                  label={intl.formatMessage({ id: 'playground.model' })}
+                    options={modelList}
-                ></SealSelect>
+                    label={intl.formatMessage({ id: 'playground.model' })}
-              </Form.Item>
+                  ></SealSelect>
+                </Form.Item>
+              )}
             </>
           }
           {renderFields}

src/pages/playground/components/ground-left.tsx

@@ -1,25 +1,26 @@
-import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import { useIntl } from '@umijs/max';
-import { useIntl, useSearchParams } from '@umijs/max';
 import { Spin } from 'antd';
 import classNames from 'classnames';
 import 'overlayscrollbars/overlayscrollbars.css';
 import {
   forwardRef,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
   useState
 } from 'react';
 import { OpenAIViewCode, Roles, generateMessages } from '../config';
+import { ChatParamsConfig } from '../config/params-config';
 import { MessageItem, MessageItemAction } from '../config/types';
+import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
 import useChatCompletion from '../hooks/use-chat-completion';
+import { useInitLLmMeta } from '../hooks/use-init-meta';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
+import DynamicParams from './dynamic-params';
 import MessageInput from './message-input';
 import MessageContent from './multiple-chat/message-content';
 import SystemMessage from './multiple-chat/system-message';
-import ParamsSettings from './params-settings';
 import ReferenceParams from './reference-params';
 import ViewCodeModal from './view-code-modal';
 
@@ -32,21 +33,16 @@ interface MessageProps {
 const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
   const intl = useIntl();
-  const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
-  const [parameters, setParams] = useState<any>({});
   const [systemMessage, setSystemMessage] = useState('');
   const [show, setShow] = useState(false);
   const [collapse, setCollapse] = useState(false);
   const scroller = useRef<any>(null);
-  const paramsRef = useRef<any>(null);
   const [actions, setActions] = useState<MessageItemAction[]>([
     'upload',
     'delete',
     'copy'
   ]);
 
-  const { initialize: innitializeParams } = useOverlayScroller();
   const {
     submitMessage,
     handleStopConversation,
@@ -57,6 +53,24 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     messageList,
     loading
   } = useChatCompletion(scroller);
+  const {
+    handleOnValuesChange,
+    formRef,
+    paramsRef,
+    paramsConfig,
+    initialValues,
+    parameters
+  } = useInitLLmMeta(
+    { modelList, isChat: true },
+    {
+      defaultValues: {
+        ...llmInitialValues,
+        model: modelList[0]?.value
+      },
+      defaultParamsConfig: ChatParamsConfig,
+      metaKeys: LLM_METAKEYS
+    }
+  );
 
   useImperativeHandle(ref, () => {
     return {
@@ -93,8 +107,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     setShow(false);
   };
 
-  const handleSelectModel = () => {};
-
   const handleOnCheck = (e: any) => {
     const checked = e.target.checked;
     if (checked) {
@@ -104,12 +116,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
   };
 
-  useEffect(() => {
-    if (paramsRef.current) {
-      innitializeParams(paramsRef.current);
-    }
-  }, [innitializeParams]);
-
   return (
     <div className="ground-left-wrapper">
       <div className="ground-left">
@@ -176,7 +182,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
             addMessage={handleAddNewMessage}
             handleAbortFetch={handleStopConversation}
             clearAll={handleClear}
-            setModelSelections={handleSelectModel}
           />
         </div>
       </div>
@@ -187,11 +192,13 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         ref={paramsRef}
       >
         <div className="box">
-          <ParamsSettings
+          <DynamicParams
-            setParams={setParams}
+            ref={formRef}
-            params={parameters}
+            onValuesChange={handleOnValuesChange}
-            selectedModel={selectModel}
+            paramsConfig={paramsConfig}
+            initialValues={initialValues}
             modelList={modelList}
+            showModelSelector={true}
           />
         </div>
       </div>

src/pages/playground/components/multiple-chat/index.tsx

@@ -28,13 +28,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
   const [modelSelections, setModelSelections] = useState<ModelSelectionItem[]>(
     []
   );
-  const [globalParams, setGlobalParams] = useState<Record<string, any>>({
+  const [globalParams, setGlobalParams] = useState<Record<string, any>>({});
-    seed: null,
-    stop: null,
-    temperature: 1,
-    top_p: 1,
-    max_tokens: 1024
-  });
   const [spans, setSpans] = useState<{
     span: number;
     count: number;

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -23,10 +23,13 @@ import React, {
 import 'simplebar-react/dist/simplebar.min.css';
 import { OpenAIViewCode, Roles, generateMessages } from '../../config';
 import CompareContext from '../../config/compare-context';
+import { ChatParamsConfig } from '../../config/params-config';
 import { MessageItem, ModelSelectionItem } from '../../config/types';
+import { LLM_METAKEYS, llmInitialValues } from '../../hooks/config';
 import useChatCompletion from '../../hooks/use-chat-completion';
+import { useInitLLmMeta } from '../../hooks/use-init-meta';
 import '../../style/model-item.less';
-import ParamsSettings from '../params-settings';
+import DynamicParams from '../dynamic-params';
 import ReferenceParams from '../reference-params';
 import ViewCodeModal from '../view-code-modal';
 import MessageContent from './message-content';
@@ -39,287 +42,300 @@ interface ModelItemProps {
   ref: any;
 }
 
-const ModelItem: React.FC<ModelItemProps> = forwardRef(
+const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
-  ({ model, modelList, instanceId }, ref) => {
+  const { modelList, model, instanceId } = props;
-    const {
+  const {
-      globalParams,
+    globalParams,
-      setGlobalParams,
+    setGlobalParams,
-      setLoadingStatus,
+    setLoadingStatus,
-      handleDeleteModel,
+    handleDeleteModel,
-      handleApplySystemChangeToAll,
+    handleApplySystemChangeToAll,
-      modelFullList,
+    modelFullList,
-      actions
+    actions
-    } = useContext(CompareContext);
+  } = useContext(CompareContext);
-    const intl = useIntl();
+  const {
-    const isApplyToAllModels = useRef(false);
+    handleOnValuesChange,
-    const [systemMessage, setSystemMessage] = useState<string>('');
+    handleOnModelChange,
-    const [params, setParams] = useState<Record<string, any>>({
+    setParams,
+    setInitialValues,
+    formRef,
+    paramsConfig,
+    initialValues,
+    parameters
+  } = useInitLLmMeta(props, {
+    defaultValues: {
+      ...llmInitialValues,
       model: model
+    },
+    defaultParamsConfig: ChatParamsConfig,
+    metaKeys: LLM_METAKEYS
+  });
+  const intl = useIntl();
+  const isApplyToAllModels = useRef(false);
+  const [systemMessage, setSystemMessage] = useState<string>('');
+  const [show, setShow] = useState(false);
+  const scroller = useRef<any>(null);
+
+  const {
+    submitMessage,
+    handleAddNewMessage,
+    handleClear,
+    setMessageList,
+    handleStopConversation,
+    tokenResult,
+    messageList,
+    loading
+  } = useChatCompletion(scroller);
+
+  const viewCodeMessage = useMemo(() => {
+    return generateMessages([
+      { role: Roles.System, content: systemMessage },
+      ...messageList
+    ]);
+  }, [messageList, systemMessage]);
+
+  const abortFetch = () => {
+    handleStopConversation();
+    setLoadingStatus(instanceId, false);
+  };
+
+  const handleDelete = () => {
+    handleDeleteModel(instanceId);
+  };
+
+  const handleSubmit = (currentMessage: Omit<MessageItem, 'uid'>) => {
+    const currentMsg =
+      currentMessage.content || currentMessage.imgs?.length
+        ? currentMessage
+        : undefined;
+
+    submitMessage({
+      system: systemMessage
+        ? { role: Roles.System, content: systemMessage }
+        : undefined,
+      current: currentMsg,
+      parameters: parameters
     });
-    const [show, setShow] = useState(false);
+  };
-    const scroller = useRef<any>(null);
 
-    const {
+  const handleApplyToAllModels = (e: any) => {
-      submitMessage,
+    isApplyToAllModels.current = e.target.checked;
-      handleAddNewMessage,
+    if (e.target.checked) {
-      handleClear,
+      setGlobalParams({
-      setMessageList,
+        ..._.omit(parameters, 'model')
-      handleStopConversation,
-      tokenResult,
-      messageList,
-      loading
-    } = useChatCompletion(scroller);
-
-    const viewCodeMessage = useMemo(() => {
-      return generateMessages([
-        { role: Roles.System, content: systemMessage },
-        ...messageList
-      ]);
-    }, [messageList, systemMessage]);
-
-    const abortFetch = () => {
-      handleStopConversation();
-      setLoadingStatus(instanceId, false);
-    };
-
-    const handleDelete = () => {
-      handleDeleteModel(instanceId);
-    };
-
-    const handleSubmit = (currentMessage: Omit<MessageItem, 'uid'>) => {
-      const currentMsg =
-        currentMessage.content || currentMessage.imgs?.length
-          ? currentMessage
-          : undefined;
-
-      submitMessage({
-        system: systemMessage
-          ? { role: Roles.System, content: systemMessage }
-          : undefined,
-        current: currentMsg,
-        parameters: params
       });
-    };
+    }
+  };
 
-    const handleApplyToAllModels = (e: any) => {
+  const OnValuesChange = useCallback(
-      isApplyToAllModels.current = e.target.checked;
+    (changeValues: any, allValues: Record<string, any>) => {
-      if (e.target.checked) {
+      handleOnValuesChange(changeValues, {
+        ...allValues,
+        model: parameters.model
+      });
+      if (isApplyToAllModels.current) {
         setGlobalParams({
-          ..._.omit(params, 'model')
+          ...allValues
         });
       }
-    };
+    },
+    [parameters, isApplyToAllModels.current]
+  );
 
-    const handleOnValuesChange = useCallback(
+  const handleCloseViewCode = () => {
-      (changeValues: any, allValues: Record<string, any>) => {
+    setShow(false);
-        if (isApplyToAllModels.current) {
+  };
-          setParams({
+
-            ...params,
+  const onModelChange = (value: string) => {
-            ...allValues
+    handleOnModelChange(value);
-          });
+    handleClear();
-          setGlobalParams({
+  };
-            ...allValues
+
-          });
+  const actionItems = useMemo(() => {
-        } else {
+    const list = [
-          setParams({
+      {
-            ...params,
+        label: intl.formatMessage({ id: 'common.button.clear' }),
-            ...changeValues
+        key: 'clear',
-          });
+        icon: <ClearOutlined />,
+        danger: false,
+        onClick: () => {
+          setMessageList([]);
+          setSystemMessage('');
         }
       },
-      [params, isApplyToAllModels.current]
+      {
-    );
+        label: intl.formatMessage({ id: 'playground.viewcode' }),
-
+        key: 'viewcode',
-    const handleCloseViewCode = () => {
+        icon: <IconFont type="icon-code" />,
-      setShow(false);
+        onClick: () => {
-    };
+          setShow(true);
-
-    const handleModelChange = (value: string) => {
-      setParams({
-        ...params,
-        model: value
-      });
-      handleClear();
-    };
-
-    const actionItems = useMemo(() => {
-      const list = [
-        {
-          label: intl.formatMessage({ id: 'common.button.clear' }),
-          key: 'clear',
-          icon: <ClearOutlined />,
-          danger: false,
-          onClick: () => {
-            setMessageList([]);
-            setSystemMessage('');
-          }
-        },
-        {
-          label: intl.formatMessage({ id: 'playground.viewcode' }),
-          key: 'viewcode',
-          icon: <IconFont type="icon-code" />,
-          onClick: () => {
-            setShow(true);
-          }
         }
-      ];
-
-      if (modelList.length > 2) {
-        list.push({
-          label: intl.formatMessage({ id: 'common.button.delete' }),
-          key: 'delete',
-          icon: <DeleteOutlined />,
-          danger: true,
-          onClick: () => {
-            handleDelete();
-          }
-        });
       }
-      return list;
+    ];
-    }, [modelList, intl]);
 
-    useEffect(() => {
+    if (modelList.length > 2) {
-      setParams({
+      list.push({
-        ...params,
+        label: intl.formatMessage({ id: 'common.button.delete' }),
-        ...globalParams
+        key: 'delete',
+        icon: <DeleteOutlined />,
+        danger: true,
+        onClick: () => {
+          handleDelete();
+        }
       });
-    }, [globalParams]);
+    }
+    return list;
+  }, [modelList, intl]);
 
-    useEffect(() => {
+  useEffect(() => {
-      setLoadingStatus(instanceId, loading);
+    setParams((prev: any) => {
-      return () => {
-        setLoadingStatus(instanceId, false);
-      };
-    }, [loading]);
-
-    useImperativeHandle(ref, () => {
       return {
-        submit: handleSubmit,
+        ...prev,
-        abortFetch,
+        ...globalParams
-        addNewMessage: handleAddNewMessage,
-        clear: handleClear,
-        setSystemMessage,
-        loading
       };
     });
+    setInitialValues((prev: any) => {
+      return {
+        ...prev,
+        ...globalParams
+      };
+    });
+  }, [globalParams]);
 
-    return (
+  useEffect(() => {
-      <div className="model-item">
+    setLoadingStatus(instanceId, loading);
-        <div className="header">
+    return () => {
-          <span className="title">
+      setLoadingStatus(instanceId, false);
-            <Select
+    };
-              style={{ width: '100%' }}
+  }, [loading]);
-              variant="borderless"
+
-              options={modelFullList}
+  useImperativeHandle(ref, () => {
-              onChange={handleModelChange}
+    return {
-              value={params.model}
+      submit: handleSubmit,
-              labelRender={(data) => {
+      abortFetch,
-                return (
+      addNewMessage: handleAddNewMessage,
-                  <AutoTooltip
+      clear: handleClear,
-                    ghost
+      setSystemMessage,
-                    tooltipProps={{
+      loading
-                      placement: 'right'
+    };
-                    }}
+  });
-                    minWidth={60}
+
-                    maxWidth={180}
+  return (
-                  >
+    <div className="model-item">
-                    {data.label}
+      <div className="header">
-                  </AutoTooltip>
+        <span className="title">
-                );
+          <Select
-              }}
+            style={{ width: '100%' }}
-              optionRender={(data) => {
+            variant="borderless"
-                return (
+            options={modelFullList}
-                  <AutoTooltip
+            onChange={onModelChange}
-                    ghost
+            value={parameters.model}
-                    tooltipProps={{
+            labelRender={(data) => {
-                      placement: 'right'
+              return (
-                    }}
+                <AutoTooltip
-                    minWidth={60}
+                  ghost
-                    maxWidth={180}
+                  tooltipProps={{
-                  >
+                    placement: 'right'
-                    {data.label}
+                  }}
-                  </AutoTooltip>
+                  minWidth={60}
-                );
+                  maxWidth={180}
-              }}
+                >
-            ></Select>
+                  {data.label}
-          </span>
+                </AutoTooltip>
-          <ReferenceParams usage={tokenResult} scaleable></ReferenceParams>
+              );
-          <span className="action">
+            }}
-            <Dropdown
+            optionRender={(data) => {
-              menu={{
+              return (
-                items: actionItems
+                <AutoTooltip
-              }}
+                  ghost
-              placement="bottomRight"
+                  tooltipProps={{
-            >
+                    placement: 'right'
-              <Button
+                  }}
-                type="text"
+                  minWidth={60}
-                icon={<MoreOutlined style={{ fontSize: '14px' }} />}
+                  maxWidth={180}
-                size="small"
+                >
-              ></Button>
+                  {data.label}
-            </Dropdown>
+                </AutoTooltip>
-            <Popover
+              );
-              placement="bottomRight"
+            }}
-              content={
+          ></Select>
-                <ParamsSettings
+        </span>
-                  showModelSelector={false}
+        <ReferenceParams usage={tokenResult} scaleable></ReferenceParams>
-                  setParams={setParams}
+        <span className="action">
-                  modelList={modelList}
+          <Dropdown
-                  globalParams={globalParams}
+            menu={{
-                  selectedModel={params.model}
+              items: actionItems
-                  onValuesChange={handleOnValuesChange}
+            }}
-                />
+            placement="bottomRight"
-              }
+          >
-              trigger={['click']}
+            <Button
-              arrow={false}
+              type="text"
-              fresh={true}
+              icon={<MoreOutlined style={{ fontSize: '14px' }} />}
-              title={
+              size="small"
-                <div>
+            ></Button>
-                  <Checkbox onChange={handleApplyToAllModels}>
+          </Dropdown>
-                    {intl.formatMessage({
+          <Popover
-                      id: 'playground.compare.applytoall'
+            placement="bottomRight"
-                    })}
+            overlayInnerStyle={{ width: 384 }}
-                  </Checkbox>
+            content={
-                </div>
+              <DynamicParams
-              }
+                ref={formRef}
-            >
+                onValuesChange={OnValuesChange}
-              <Button
+                paramsConfig={paramsConfig}
-                type="text"
+                initialValues={initialValues}
-                icon={<SettingOutlined />}
+                showModelSelector={false}
-                size="small"
+              />
-              ></Button>
+            }
-            </Popover>
+            trigger={['click']}
-          </span>
+            arrow={false}
-        </div>
+            fresh={true}
-        <SystemMessage
+            title={
-          showApplyToAll={true}
+              <div>
-          systemMessage={systemMessage}
+                <Checkbox onChange={handleApplyToAllModels}>
-          applyToAll={handleApplySystemChangeToAll}
+                  {intl.formatMessage({
-          setSystemMessage={setSystemMessage}
+                    id: 'playground.compare.applytoall'
-        ></SystemMessage>
+                  })}
-        <div className="content" ref={scroller}>
+                </Checkbox>
-          <div>
+              </div>
-            <MessageContent
+            }
-              messageList={messageList}
+          >
-              setMessageList={setMessageList}
+            <Button
-              actions={actions}
+              type="text"
-              editable={true}
+              icon={<SettingOutlined />}
-            />
+              size="small"
-            <Spin spinning={loading} size="small" style={{ width: '100%' }} />
+            ></Button>
-          </div>
+          </Popover>
-        </div>
+        </span>
-        <ViewCodeModal
-          {...OpenAIViewCode.chat}
-          open={show}
-          payload={{
-            messages: viewCodeMessage
-          }}
-          parameters={params}
-          onCancel={handleCloseViewCode}
-          title={intl.formatMessage({ id: 'playground.viewcode' })}
-        ></ViewCodeModal>
       </div>
-    );
+      <SystemMessage
-  }
+        showApplyToAll={true}
-);
+        systemMessage={systemMessage}
+        applyToAll={handleApplySystemChangeToAll}
+        setSystemMessage={setSystemMessage}
+      ></SystemMessage>
+      <div className="content" ref={scroller}>
+        <div>
+          <MessageContent
+            messageList={messageList}
+            setMessageList={setMessageList}
+            actions={actions}
+            editable={true}
+          />
+          <Spin spinning={loading} size="small" style={{ width: '100%' }} />
+        </div>
+      </div>
+      <ViewCodeModal
+        {...OpenAIViewCode.chat}
+        open={show}
+        payload={{
+          messages: viewCodeMessage
+        }}
+        parameters={parameters}
+        onCancel={handleCloseViewCode}
+        title={intl.formatMessage({ id: 'playground.viewcode' })}
+      ></ViewCodeModal>
+    </div>
+  );
+});
 
 export default React.memo(ModelItem);

src/pages/playground/hooks/config.ts

@@ -23,7 +23,7 @@ export const llmInitialValues = {
   stop: null,
   temperature: 1,
   top_p: 1,
-  max_tokens: 1024
+  max_tokens: null
 };
 
 export const advancedFieldsDefaultValus = {

src/pages/playground/hooks/use-init-meta.ts

@@ -28,7 +28,9 @@ import {
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
+  model?: string;
   loaded?: boolean;
+  isChat?: boolean;
   ref?: any;
 }
 
@@ -43,7 +45,7 @@ export const useInitLLmMeta = (
   props: MessageProps,
   options: InitMetaOptions
 ) => {
-  const { modelList } = props;
+  const { modelList, model, isChat } = props;
   const {
     metaKeys = {},
     defaultValues = {},
@@ -51,7 +53,9 @@ export const useInitLLmMeta = (
   } = options;
   const formRef = useRef<any>(null);
   const [searchParams] = useSearchParams();
-  const defaultModel = searchParams.get('model') || modelList?.[0]?.value || '';
+  const defaultModel =
+    searchParams.get('model') ||
+    (isChat ? model ?? modelList?.[0]?.value : model);
   const [modelMeta, setModelMeta] = useState<any>({});
   const [initialValues, setInitialValues] = useState<any>({
     ...defaultValues,
@@ -103,18 +107,12 @@ export const useInitLLmMeta = (
     return fields?.join(',');
   }, [paramsConfig]);
 
-  const handleOnValuesChange = useCallback(
-    (changeValues: Record<string, any>, allValues: Record<string, any>) => {
-      setParams(allValues);
-    },
-    []
-  );
-
   const handleOnModelChange = useCallback(
     (val: string) => {
       if (!val) return;
       const model = modelList.find((item) => item.value === val);
       const { form: initialData, meta } = extractLLMMeta(model?.meta);
+
       setModelMeta(meta || {});
       setInitialValues({
         ...initialData,
@@ -124,8 +122,31 @@ export const useInitLLmMeta = (
         ...initialData,
         model: val
       });
+      const config = defaultParamsConfig.map((item) => {
+        return {
+          ...item,
+          attrs:
+            item.name === 'max_tokens'
+              ? { ...item.attrs, max: meta.max_tokens || 16 * 1024 }
+              : {
+                  ...item.attrs
+                }
+        };
+      });
+      setParamsConfig(config);
     },
-    [modelList]
+    [modelList, defaultParamsConfig]
+  );
+
+  const handleOnValuesChange = useCallback(
+    (changeValues: Record<string, any>, allValues: Record<string, any>) => {
+      if (changeValues.model) {
+        handleOnModelChange(changeValues.model);
+        return;
+      }
+      setParams(allValues);
+    },
+    [handleOnModelChange]
   );
 
   useEffect(() => {
@@ -138,7 +159,7 @@ export const useInitLLmMeta = (
     if (paramsRef.current) {
       innitializeParams(paramsRef.current);
     }
-  }, [paramsRef.current, innitializeParams]);
+  }, [innitializeParams]);
 
   return {
     extractLLMMeta,