diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/composer.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/composer.tsx new file mode 100644 index 00000000000..7fde882c75a --- /dev/null +++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/composer.tsx @@ -0,0 +1,69 @@ +"use client"; + +/** + * Composer — textarea + send button at the bottom of the conversation pane. + * + * On submit, POSTs to the followup endpoint and lets the SSE stream + * surface the resulting `user_message` event via the parent's event list. + */ +import { useState } from "react"; +import { Button, Input, message } from "antd"; +import { sendSessionFollowup } from "@/lib/cloud-agents-client"; + +interface ComposerProps { + sessionId: string; + accessToken: string | null; + onSent?: () => void; +} + +export default function Composer({ sessionId, accessToken, onSent }: ComposerProps) { + const [value, setValue] = useState(""); + const [sending, setSending] = useState(false); + + const handleSend = async () => { + const trimmed = value.trim(); + if (!trimmed) return; + setSending(true); + try { + await sendSessionFollowup(accessToken, sessionId, trimmed); + setValue(""); + onSent?.(); + } catch (e) { + const errMsg = e instanceof Error ? e.message : String(e); + message.error(`Send failed: ${errMsg}`); + } finally { + setSending(false); + } + }; + + return ( +