diff --git a/src/components/Custom/HeaderModelSelect/index.less b/src/components/Custom/HeaderModelSelect/index.less new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Custom/HeaderModelSelect/index.tsx b/src/components/Custom/HeaderModelSelect/index.tsx new file mode 100644 index 0000000..34722ea --- /dev/null +++ b/src/components/Custom/HeaderModelSelect/index.tsx @@ -0,0 +1,36 @@ +import { Dropdown, Flex } from 'antd'; +import { RightOutlined } from '@ant-design/icons'; +import type { MenuProps } from 'antd'; +import './index.less'; +import { useEffect } from 'react'; + +export type ModelItem = { label: string, key: string } + +export type HeaderModelChangeHandler = (value: ModelItem) => void + +export type HeaderModelProps = { + value?: ModelItem, + onChange?: HeaderModelChangeHandler, +} + +export default (props: HeaderModelProps) => { + const modelsItems: ModelItem[] | any[] = [{ + key: 'chatgpt', + label: 'ChatGtp' + }] + + const onClick: MenuProps['onClick'] = e => { + props.onChange && props.onChange(modelsItems?.find(o => o.key === e.key)) + } + + useEffect(() => { + !props.value && props?.onChange && props.onChange(modelsItems[0]); + }, [props.value]) + + return + + {props?.value?.label} + + + +} \ No newline at end of file diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index bf21a56..2c0d6ad 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -1,10 +1,12 @@ import { PageContainer, ProForm, ProFormTextArea } from '@ant-design/pro-components'; import { useModel } from '@umijs/max'; -import { Button, Divider, Dropdown, Flex, message, Space, Tag, theme } from 'antd'; -import React, { useEffect, useRef, useState } from 'react'; +import { Button, Divider, Dropdown, Flex, message, Tag, theme } from 'antd'; +import React, { useRef, useState } from 'react'; import './Welcome.less' -import { FileSearchOutlined, GlobalOutlined, PlusOutlined, RightOutlined } from '@ant-design/icons'; +import { FileSearchOutlined, GlobalOutlined, PlusOutlined } from '@ant-design/icons'; import { TweenOneGroup } from 'rc-tween-one'; +import HeaderModelSelect from '@/components/Custom/HeaderModelSelect'; +import type { ModelItem } from '@/components/Custom/HeaderModelSelect'; const tagGroupStyle: React.CSSProperties = { display: 'flex', @@ -15,17 +17,13 @@ const tagGroupStyle: React.CSSProperties = { marginTop: 16, }; -type ModelItem = { - label: string, - key: string -} const Welcome: React.FC = () => { const { token } = theme.useToken(); const { initialState } = useModel('@@initialState'); const textAreaRef = useRef(null); const [tools, setTools] = useState([]); - const [model, setModel] = useState(null); + const [model, setModel] = useState(undefined); const textAreaFieldProps: any = { ref: textAreaRef, autoSize: { @@ -83,11 +81,6 @@ const Welcome: React.FC = () => { } } - const modelsItems:ModelItem[]|any[] = [{ - key: 'chatgpt', - label: 'ChatGtp' - }] - const Tags = () => { if (tools?.length) { return (<> @@ -113,21 +106,8 @@ const Welcome: React.FC = () => { return <> } - const Title = () => ( - - - {model?.label} - - - - ) - - useEffect(() => { - setModel(modelsItems[0]); - }, []) - return ( - } className='WelcomePage'> + setModel(e)}/>} className='WelcomePage'>