69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
import { Button, Flex, Input, Select } from "antd";
|
|
|
|
interface ChatInputAreaProps {
|
|
displayModelId: null | string;
|
|
input: string;
|
|
isLoading: boolean;
|
|
modelOptions: Array<{ label: string; value: string }>;
|
|
onInputChange: (value: string) => void;
|
|
onModelChange: (value: string) => void;
|
|
onSend: () => void;
|
|
onStop: () => void;
|
|
}
|
|
|
|
export function ChatInputArea({
|
|
displayModelId,
|
|
input,
|
|
isLoading,
|
|
modelOptions,
|
|
onInputChange,
|
|
onModelChange,
|
|
onSend,
|
|
onStop,
|
|
}: ChatInputAreaProps) {
|
|
return (
|
|
<div className="chat-input-area">
|
|
<Input.TextArea
|
|
autoSize={{ maxRows: 6, minRows: 1 }}
|
|
className="chat-textarea"
|
|
disabled={isLoading}
|
|
onChange={(e) => onInputChange(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
void onSend();
|
|
}
|
|
}}
|
|
placeholder="输入消息..."
|
|
value={input}
|
|
/>
|
|
<Flex align="center" gap={8} justify="space-between">
|
|
<Select
|
|
className="chat-model-select"
|
|
disabled={isLoading}
|
|
onChange={onModelChange}
|
|
options={modelOptions}
|
|
placeholder="选择模型"
|
|
value={displayModelId}
|
|
/>
|
|
<Flex align="center" gap={8}>
|
|
{isLoading ? (
|
|
<Button
|
|
danger
|
|
onClick={() => {
|
|
onStop?.();
|
|
}}
|
|
>
|
|
停止
|
|
</Button>
|
|
) : (
|
|
<Button onClick={() => void onSend()} type="primary">
|
|
发送
|
|
</Button>
|
|
)}
|
|
</Flex>
|
|
</Flex>
|
|
</div>
|
|
);
|
|
}
|