Untitled
unknown
plain_text
a month ago
5.2 kB
5
Indexable
<StickToBottom className="relative h-screen flex-1 overflow-hidden"> <StickyToBottomContent className={cn( " inset-0 overflow-y-scroll [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 [&::-webkit-scrollbar-track]:bg-transparent", !chatStarted && "flex flex-col items-stretch", chatStarted && "grid grid-rows-[1fr_auto]", )} contentClassName="pt-8 pb-32 max-w-3xl mx-auto flex flex-col gap-4 w-full" content={ <> {messages .filter((m) => !m.id?.startsWith(DO_NOT_RENDER_ID_PREFIX)) .map((message, index) => message.type === "human" ? ( <HumanMessage key={message.id || `${message.type}-${index}`} message={message} isLoading={isLoading} /> ) : ( <AssistantMessage key={message.id || `${message.type}-${index}`} message={message} isLoading={isLoading} handleRegenerate={handleRegenerate} hideToolCalls={hideToolCalls} /> ), )} {/* {interrupt && Array.isArray(interrupt.value) && <ThreadView interrupt={interrupt.value[0] ?? {}} />} */} {isLoading && !firstTokenReceived && ( <AssistantMessageLoading /> )} </> } footer={ <div className="absolute bottom-0 w-full z-50 left-0 right-0"> <div className=" flex flex-col justify-center pt-2 items-center gap-3 px-4 bg-white"> {!chatStarted && ( <div className="flex gap-3 w-full justify-center items-center"> <LangGraphLogoSVG className="flex-shrink-0 h-8" /> <h1 className="text-2xl font-semibold tracking-tight"> Agent Chat </h1> </div> )} <ScrollToBottom className="absolute bottom-full -translate-x-1/2 mb-4 animate-in fade-in-0 zoom-in-95" /> <div className="bg-muted rounded-2xl border shadow-xs mx-auto mb-2 w-full max-w-3xl relative z-10"> <form // onSubmit={handleSubmit} className="grid grid-rows-[1fr_auto] gap-2 max-w-3xl mx-auto" > <textarea value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey && !e.metaKey) { e.preventDefault(); const el = e.target as HTMLElement | undefined; const form = el?.closest("form"); handleSubmit(e); } }} placeholder="Type your message..." className="p-3.5 pb-0 border-none bg-transparent field-sizing-content shadow-none ring-0 outline-none focus:outline-none focus:ring-0 resize-none" /> <div className="flex items-center justify-between p-2 pt-4"> <div> <div className="flex items-center space-x-2"> <Switch id="render-tool-calls" className="bg-black" checked={hideToolCalls} onCheckedChange={(checked) => setHideToolCalls(checked)} /> <Label htmlFor="render-tool-calls" className="text-sm text-gray-600" > Hide Tool Calls </Label> </div> </div> {stream.isLoading ? ( <Button key="stop" onClick={() => stream.stop()}> <LoaderCircle className="w-4 h-4 animate-spin" /> Cancel </Button> ) : ( <Button //type="submit" onClick={handleSubmit} className="transition-al shadow-md" disabled={isLoading || !input.trim()} > Send </Button> )} </div> </form> </div> </div> </div> } /> </StickToBottom>
Editor is loading...
Leave a Comment