diff --git a/ui/litellm-dashboard/src/components/chat/ChatInputBar.tsx b/ui/litellm-dashboard/src/components/chat/ChatInputBar.tsx new file mode 100644 index 00000000000..ae6cd608604 --- /dev/null +++ b/ui/litellm-dashboard/src/components/chat/ChatInputBar.tsx @@ -0,0 +1,107 @@ +import React, { useState } from "react"; +import { Button, Input, Popover, Tooltip } from "antd"; +import { ApiOutlined, BorderOutlined, PaperClipOutlined, SendOutlined } from "@ant-design/icons"; + +interface Props { + onSend: (text: string) => void; + isStreaming: boolean; + onStop: () => void; + selectedMCPServers: string[]; + onMCPChange: (servers: string[]) => void; + isLoadingModels: boolean; + accessToken: string; +} + +const ChatInputBar: React.FC = ({ + onSend, + isStreaming, + onStop, + selectedMCPServers, + onMCPChange, + isLoadingModels, + accessToken, +}) => { + const [text, setText] = useState(""); + const [mcpPopoverOpen, setMcpPopoverOpen] = useState(false); + + const handleSend = () => { + if (text.trim() === "" || isStreaming || isLoadingModels) return; + onSend(text.trim()); + setText(""); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === "Enter" && !e.shiftKey) { + e.preventDefault(); + handleSend(); + } + }; + + const mcpButtonLabel = + selectedMCPServers.length > 0 + ? `MCP (${selectedMCPServers.length})` + : "MCP"; + + const mcpPopoverContent = ( +
+ {/* MCPConnectPicker - LIT-2170 */} +
+ ); + + return ( +
+ + + + + +
+ ); +}; + +export default ChatInputBar;