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

create message to display while chat is empty

Browse source
This commit is contained in:
anovazzi1 2023-04-26 00:41:48 -03:00
commit 395edf5d17
1 changed files with 36 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

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">