diff --git a/src/components/Custom/ChatList/hooks/useChat.ts b/src/components/Custom/ChatList/hooks/useChat.ts index 2155d2d..89a2437 100644 --- a/src/components/Custom/ChatList/hooks/useChat.ts +++ b/src/components/Custom/ChatList/hooks/useChat.ts @@ -63,7 +63,7 @@ export function useChat({ api }: UseChatOptions) { ) ) idx += tokenLength; - await wait(500); + await wait(100); } setMessages(prev => diff --git a/src/components/Custom/ChatList/index.less b/src/components/Custom/ChatList/index.less index 7fb4f02..5a465ba 100644 --- a/src/components/Custom/ChatList/index.less +++ b/src/components/Custom/ChatList/index.less @@ -1,3 +1,7 @@ +.chatFoot { + width: 1px; + height: 1px; +} .chatList { padding: 16px; overflow-y: auto; @@ -25,7 +29,7 @@ } .chatItem.left .bubble { - background: #f5f5f5; + background: rgb(232, 232, 232); } .chatItem.right .bubble { diff --git a/src/components/Custom/ChatList/index.tsx b/src/components/Custom/ChatList/index.tsx index e117cbb..cf39ab6 100644 --- a/src/components/Custom/ChatList/index.tsx +++ b/src/components/Custom/ChatList/index.tsx @@ -5,9 +5,10 @@ import { ChatMessage } from './types'; type ChatListProps = { messages: ChatMessage[], + marginBottom?: number } -export function ChatList({ messages }: ChatListProps) { +export function ChatList({ messages, marginBottom = 200}: ChatListProps) { const bottomRef = useRef(null); const listRef = useRef(null); @@ -23,9 +24,9 @@ export function ChatList({ messages }: ChatListProps) { {messages.map(msg => (
-
))} +
diff --git a/src/components/Custom/HeaderModelSelect/index.less b/src/components/Custom/HeaderModelSelect/index.less index e69de29..c45194a 100644 --- a/src/components/Custom/HeaderModelSelect/index.less +++ b/src/components/Custom/HeaderModelSelect/index.less @@ -0,0 +1,3 @@ +.headerLabel { + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/Custom/HeaderModelSelect/index.tsx b/src/components/Custom/HeaderModelSelect/index.tsx index 34722ea..5013230 100644 --- a/src/components/Custom/HeaderModelSelect/index.tsx +++ b/src/components/Custom/HeaderModelSelect/index.tsx @@ -1,7 +1,7 @@ import { Dropdown, Flex } from 'antd'; import { RightOutlined } from '@ant-design/icons'; import type { MenuProps } from 'antd'; -import './index.less'; +import styles from './index.less'; import { useEffect } from 'react'; export type ModelItem = { label: string, key: string } @@ -16,7 +16,7 @@ export type HeaderModelProps = { export default (props: HeaderModelProps) => { const modelsItems: ModelItem[] | any[] = [{ key: 'chatgpt', - label: 'ChatGtp' + label: 'ChatGPT' }] const onClick: MenuProps['onClick'] = e => { @@ -27,10 +27,17 @@ export default (props: HeaderModelProps) => { !props.value && props?.onChange && props.onChange(modelsItems[0]); }, [props.value]) - return - - {props?.value?.label} - - - + return ( +
+ {/* TODO: 样式不生效 */} + + + + {props?.value?.label} + + + + +
+ ) } \ No newline at end of file diff --git a/src/components/Custom/InputBar/index.less b/src/components/Custom/InputBar/index.less index e270692..1fdab88 100644 --- a/src/components/Custom/InputBar/index.less +++ b/src/components/Custom/InputBar/index.less @@ -1,17 +1,11 @@ -.InputBar { - .CenterCard { - width: 70vw; - padding: 18px 18px 0 18px; - background-color: white; - border-radius: 8px; - padding-bottom: 24px, - } +.inputBar { + line-height: 0; +} - .Flex { - flex: 1; - - .ant-form-item { - --ant-form-item-margin-bottom: 0; - } - } +.centerCard { + width: 70vw; + padding: 18px 18px 0 18px; + background-color: white; + border-radius: 8px; + padding-bottom: 24px, } \ No newline at end of file diff --git a/src/components/Custom/InputBar/index.tsx b/src/components/Custom/InputBar/index.tsx index bc51166..337ecbf 100644 --- a/src/components/Custom/InputBar/index.tsx +++ b/src/components/Custom/InputBar/index.tsx @@ -1,8 +1,8 @@ import { ProForm, ProFormTextArea } from '@ant-design/pro-components'; import { useModel, history } from '@umijs/max'; -import { Button, Divider, Dropdown, Flex, message, Tag, theme } from 'antd'; -import React, { useRef, useState } from 'react'; -import './index.less' +import { Button, Divider, Dropdown, Flex, Input, message, Tag, theme } from 'antd'; +import React, { useEffect, useRef, useState } from 'react'; +import styles from './index.less' import { FileSearchOutlined, GlobalOutlined, PlusOutlined } from '@ant-design/icons'; import { TweenOneGroup } from 'rc-tween-one'; @@ -17,12 +17,19 @@ export type InputBarEvent = { defaultValues?: InputBarDefaultValue; } +export type InputBarToolEvent = { + tools: string[]; +} + export type InputBarSubmitHandler = (event: InputBarEvent) => void; export type InputBarProps = { onSubmit?: InputBarSubmitHandler; + onToolsChange?: InputBarToolsOnChangeHandler; } +export type InputBarToolsOnChangeHandler = (event: InputBarToolEvent) => void; + export const InputBarToolItems = [{ key: 'searchWeb', label: '搜索网站', @@ -50,30 +57,9 @@ const tagGroupStyle: React.CSSProperties = { marginTop: 16, }; -const InputBar = (props: InputBarProps) => { - const textAreaRef = useRef(null); +const InputBar: React.FC = (props) => { const [tools, setTools] = useState([]); - const textAreaFieldProps: any = { - ref: textAreaRef, - autoSize: { - minRows: 1, - maxRows: 5, - }, - variant: 'borderless', - onPressEnter: (e: any) => { - const { nativeEvent: { shiftKey, key } } = e; - if (shiftKey && key === "Enter") { - const { current: { resizableTextArea: { textArea } } } = textAreaRef; - e.preventDefault(); - const text = textArea?.value + ""; - textArea.value = ""; - props?.onSubmit && props.onSubmit({ - query: text, - tools: tools?.map((e:any) => e.key), - }) - } - } - } + const [value, setValue] = useState(''); const itemOnClick = ({ key }: any) => { if (key === 'searchKB_add') { @@ -120,19 +106,40 @@ const InputBar = (props: InputBarProps) => { return <> } + useEffect(() => { + props?.onToolsChange && props?.onToolsChange({tools}); + }, [tools]) + return ( -
-
- - - - - -
- -
-
-
+
+
+ + + + + + setValue(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter' && e.shiftKey) { + e.preventDefault(); + if (!value.trim()) return; + + props?.onSubmit?.({ + query: value.trim(), + tools: tools.map((e: any) => e.key), + }); + + setValue(''); // ✅ 绝对不会有循环引用 + } + }} + /> +
diff --git a/src/pages/chat/index.tsx b/src/pages/chat/index.tsx index fa5520f..3eb5106 100644 --- a/src/pages/chat/index.tsx +++ b/src/pages/chat/index.tsx @@ -19,6 +19,7 @@ const footerStyle: React.CSSProperties = { export default () => { const [model, setModel] = useState(undefined); + const [marginBottom, setMarginBottom] = useState(150); const { messages, setMessages, loading, stop, sendMessage } = useChat({ api: '' }); const onSubmit: InputBarSubmitHandler = (e: InputBarEvent) => { sendMessage(e.query); @@ -33,14 +34,14 @@ export default () => { }} footer={[
- + setMarginBottom(e?.tools?.length ? 200 : 150)} />
]} title={ setModel(val)} />} >
- +