chat ui allow pasting in content

This commit is contained in:
Ishaan Jaff 2025-04-11 18:35:46 -07:00
parent 1a15e09da3
commit f3237c615e

View file

@ -23,7 +23,7 @@ import {
Divider, Divider,
} from "@tremor/react"; } from "@tremor/react";
import { message, Select, Spin, Typography, Tooltip } from "antd"; import { message, Select, Spin, Typography, Tooltip, Input } from "antd";
import { makeOpenAIChatCompletionRequest } from "./chat_ui/llm_calls/chat_completion"; import { makeOpenAIChatCompletionRequest } from "./chat_ui/llm_calls/chat_completion";
import { makeOpenAIImageGenerationRequest } from "./chat_ui/llm_calls/image_generation"; import { makeOpenAIImageGenerationRequest } from "./chat_ui/llm_calls/image_generation";
import { fetchAvailableModels, ModelGroup } from "./chat_ui/llm_calls/fetch_models"; import { fetchAvailableModels, ModelGroup } from "./chat_ui/llm_calls/fetch_models";
@ -47,6 +47,8 @@ import {
TagsOutlined TagsOutlined
} from "@ant-design/icons"; } from "@ant-design/icons";
const { TextArea } = Input;
interface ChatUIProps { interface ChatUIProps {
accessToken: string | null; accessToken: string | null;
token: string | null; token: string | null;
@ -190,10 +192,12 @@ const ChatUI: React.FC<ChatUIProps> = ({
]); ]);
}; };
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (event.key === 'Enter') { if (event.key === 'Enter' && !event.shiftKey) {
event.preventDefault(); // Prevent default to avoid newline
handleSendMessage(); handleSendMessage();
} }
// If Shift+Enter is pressed, the default behavior (inserting a newline) will occur
}; };
const handleCancelRequest = () => { const handleCancelRequest = () => {
@ -502,18 +506,19 @@ const ChatUI: React.FC<ChatUIProps> = ({
<div className="p-4 border-t border-gray-200 bg-white"> <div className="p-4 border-t border-gray-200 bg-white">
<div className="flex items-center"> <div className="flex items-center">
<TextInput <TextArea
type="text"
value={inputMessage} value={inputMessage}
onChange={(e) => setInputMessage(e.target.value)} onChange={(e) => setInputMessage(e.target.value)}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder={ placeholder={
endpointType === EndpointType.CHAT endpointType === EndpointType.CHAT
? "Type your message..." ? "Type your message... (Shift+Enter for new line)"
: "Describe the image you want to generate..." : "Describe the image you want to generate..."
} }
disabled={isLoading} disabled={isLoading}
className="flex-1" className="flex-1"
autoSize={{ minRows: 1, maxRows: 6 }}
style={{ resize: 'none', paddingRight: '10px', paddingLeft: '10px' }}
/> />
{isLoading ? ( {isLoading ? (
<Button <Button