jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/websocket' into chat_and_cache

Browse source
This commit is contained in:
Gabriel Almeida 2023-04-26 00:51:19 -03:00
commit 0ef4572917
3 changed files with 42 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/frontend/src/modals/chatModal/chatInput/index.tsx
View file

@ -24,16 +24,14 @@ export default function ChatInput({
}} }}
ref={inputRef} ref={inputRef}
disabled={lockChat} disabled={lockChat}
style={{minHeight: "40px", maxHeight: "100px", resize: "none" }} style={{resize: "none" }}
value={lockChat ? "Thinking..." : chatValue} value={lockChat ? "Thinking..." : chatValue}
onChange={(e) => { onChange={(e) => {
inputRef.current.style.height = "auto";
inputRef.current.style.height = inputRef.current.scrollHeight + "px";
setChatValue(e.target.value); setChatValue(e.target.value);
}} }}
className={classNames( className={classNames(
lockChat ? "bg-gray-500 text-white" : "dark:bg-gray-700", lockChat ? "bg-gray-500 text-white" : "dark:bg-gray-700",
"form-input block w-full custom-scroll rounded-md border-gray-300 dark:border-gray-600 dark:text-white pr-10 sm:text-sm" "form-input block w-full custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600 dark:text-white pr-10 sm:text-sm"
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
/> />

6
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -53,11 +53,11 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
{chat.message} {chat.message}
{chat.files && ( {chat.files && (
<div className="my-2 w-full"> <div className="my-2 w-full">
{chat.files.map((file) => { {chat.files.map((file,index) => {
return ( return (
<div className="my-2 w-full"> <div key={index} className="my-2 w-full">
<FileCard <FileCard
fileName={"File"} fileName={"Generated File"}
fileType={file.type} fileType={file.type}
content={file.data} content={file.data}
/> />

55
src/frontend/src/modals/chatModal/index.tsx
View file

@ -1,5 +1,9 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline"; import {
ChatBubbleOvalLeftEllipsisIcon,
LockClosedIcon,
PaperAirplaneIcon,
} from "@heroicons/react/24/outline";
import { Fragment, useContext, useEffect, useRef, useState } from "react"; import { Fragment, useContext, useEffect, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { FlowType, NodeType } from "../../types/flow"; import { FlowType, NodeType } from "../../types/flow";
@ -49,8 +53,8 @@ export default function ChatModal({
return newChat; return newChat;
}); });
}; };
function connectWS(){ function connectWS() {
const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`); const newWs = new WebSocket(`ws://127.0.0.1:5003/chat/${flow.id}`);
newWs.onopen = () => { newWs.onopen = () => {
console.log("WebSocket connection established!"); console.log("WebSocket connection established!");
@ -111,30 +115,27 @@ export default function ChatModal({
console.log(data); console.log(data);
} }
} catch (error) { } catch (error) {
setErrorData({title:event.data}) setErrorData({ title: event.data });
if(newWs.readyState===newWs.CLOSED){ if (newWs.readyState === newWs.CLOSED) {
window.alert(error) window.alert(error);
} }
} }
}; };
newWs.onclose = (_) => { newWs.onclose = (_) => {
if(open){ if (open) {
setLockChat(false); setLockChat(false);
setTimeout(() => { setTimeout(() => {
connectWS() connectWS();
}, 100); }, 100);
} }
}; };
setWs(newWs); setWs(newWs);
return newWs return newWs;
} }
useEffect(() => { useEffect(() => {
let newWs = connectWS() let newWs = connectWS();
return () => { return () => {
newWs.close(); newWs.close();
}; };
@ -288,9 +289,25 @@ export default function ChatModal({
</button> </button>
</div> </div>
<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide"> <div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center overflow-scroll scrollbar-hide">
{chatHistory.map((c, i) => ( {chatHistory.length > 0 ? (
<ChatMessage chat={c} key={i} /> chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />)
))} ) : (
<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle ">
<span>
👋 <span className="text-gray-600 text-lg">LangFlow Chat</span>
</span>
<br />
<div className="bg-gray-100 rounded-md w-2/4 px-6 py-8 border border-gray-200">
<span className="text-base text-gray-500">
Start a conversation and click the agent’s thoughts{" "}
<span>
<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " />
</span>{" "}
to inspect the chaining process.
</span>
</div>
</div>
)}
<div ref={ref}></div> <div ref={ref}></div>
</div> </div>
<div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3"> <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">