diff --git a/src/frontend/src/assets/Gooey Ring-5s-271px.svg b/src/frontend/src/assets/Gooey Ring-5s-271px.svg
new file mode 100644
index 000000000..6c3433420
--- /dev/null
+++ b/src/frontend/src/assets/Gooey Ring-5s-271px.svg
@@ -0,0 +1,40 @@
+
+
\ No newline at end of file
diff --git a/src/frontend/src/components/TooltipComponent/index.tsx b/src/frontend/src/components/TooltipComponent/index.tsx
index a111d047b..65c8d0e5f 100644
--- a/src/frontend/src/components/TooltipComponent/index.tsx
+++ b/src/frontend/src/components/TooltipComponent/index.tsx
@@ -1,6 +1,7 @@
import { ReactElement } from "react";
import { LightTooltip } from "../LightTooltipComponent";
+import { TooltipComponentType } from "../../types/components";
-export default function Tooltip({ children, title }:{children:ReactElement,title:string}) {
- return
{children};
+export default function Tooltip({ children, title,placement }:TooltipComponentType) {
+ return
{children};
}
diff --git a/src/frontend/src/components/chatComponent/chatTrigger/index.tsx b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
new file mode 100644
index 000000000..9d5f67e0c
--- /dev/null
+++ b/src/frontend/src/components/chatComponent/chatTrigger/index.tsx
@@ -0,0 +1,37 @@
+import { Transition } from "@headlessui/react";
+import { Bars3CenterLeftIcon, ChatBubbleBottomCenterTextIcon } from "@heroicons/react/24/outline";
+import { nodeColors } from "../../../utils";
+import { PopUpContext } from "../../../contexts/popUpContext";
+import { useContext } from "react";
+import ChatModal from "../../../modals/chatModal";
+
+export default function ChatTrigger({open, setOpen,flow}){
+ const {openPopUp} = useContext(PopUpContext)
+ return(
+
+
+
+
+
)
+}
\ No newline at end of file
diff --git a/src/frontend/src/components/chatComponent/index.tsx b/src/frontend/src/components/chatComponent/index.tsx
index 1febb7539..668a970bd 100644
--- a/src/frontend/src/components/chatComponent/index.tsx
+++ b/src/frontend/src/components/chatComponent/index.tsx
@@ -1,290 +1,32 @@
-import { Transition } from "@headlessui/react";
import {
- Bars3CenterLeftIcon,
- LockClosedIcon,
- PaperAirplaneIcon,
- XMarkIcon,
-} from "@heroicons/react/24/outline";
-import {
- MouseEventHandler,
- useContext,
useEffect,
useRef,
useState,
} from "react";
-import { sendAll } from "../../controllers/API";
-import { alertContext } from "../../contexts/alertContext";
-import { classNames, nodeColors, snakeToNormalCase } from "../../utils";
-import { TabsContext } from "../../contexts/tabsContext";
-import { ChatType } from "../../types/chat";
-import ChatMessage from "./chatMessage";
-import { NodeType } from "../../types/flow";
+
+import { ChatMessageType, ChatType } from "../../types/chat";
+import ChatTrigger from "./chatTrigger";
+import ChatModal from "../../modals/chatModal";
const _ = require("lodash");
-export default function Chat({ flow, reactFlowInstance }: ChatType) {
- const { updateFlow, lockChat, setLockChat, flows, tabIndex } =
- useContext(TabsContext);
- const [saveChat, setSaveChat] = useState(false);
- const [open, setOpen] = useState(true);
- const [chatValue, setChatValue] = useState("");
- const [chatHistory, setChatHistory] = useState(flow.chat);
- const { setErrorData, setNoticeData } = useContext(alertContext);
- const addChatHistory = (
- message: string,
- isSend: boolean,
- thought?: string
- ) => {
- let tabsChange = false;
- setChatHistory((old) => {
- let newChat = _.cloneDeep(old);
- if (JSON.stringify(flow.chat) !== JSON.stringify(old)) {
- tabsChange = true;
- return old;
- }
- if (thought) {
- newChat.push({ message, isSend, thought });
- } else {
- newChat.push({ message, isSend });
- }
- return newChat;
- });
- if (tabsChange) {
- if (thought) {
- updateFlow({
- ..._.cloneDeep(flow),
- chat: [...flow.chat, { isSend, message, thought }],
- });
- } else {
- updateFlow({
- ..._.cloneDeep(flow),
- chat: [...flow.chat, { isSend, message }],
- });
- }
- }
- setSaveChat((chat) => !chat);
- };
+export default function Chat({ flow }: ChatType) {
+ const [open, setOpen] = useState(false);
useEffect(() => {
- updateFlow({ ..._.cloneDeep(flow), chat: chatHistory });
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [saveChat]);
- useEffect(() => {
- setChatHistory(flow.chat);
- }, [flow]);
- useEffect(() => {
- if (ref.current) ref.current.scrollIntoView({ behavior: "smooth" });
- }, [chatHistory]);
-
- function validateNode(n: NodeType): Array
{
- if (!n.data?.node?.template || !Object.keys(n.data.node.template)) {
- setNoticeData({
- title:
- "We've noticed a potential issue with a node in the flow. Please review it and, if necessary, submit a bug report with your exported flow file. Thank you for your help!",
- });
- return [];
- }
-
- const {
- type,
- node: { template },
- } = n.data;
-
- return Object.keys(template).reduce(
- (errors: Array, t) =>
- errors.concat(
- (template[t].required && template[t].show) &&
- (!template[t].value && template[t].value !== false && template[t].value === "") &&
- !reactFlowInstance
- .getEdges()
- .some(
- (e) =>
- e.targetHandle.split("|")[1] === t &&
- e.targetHandle.split("|")[2] === n.id
- )
- ? [
- `${type} is missing ${template.display_name
- ? template.display_name
- : snakeToNormalCase(template[t].name)
- }.`,
- ]
- : []
- ),
- [] as string[]
- );
- }
-
- function validateNodes() {
- return reactFlowInstance
- .getNodes()
- .flatMap((n: NodeType) => validateNode(n));
- }
-
- const ref = useRef(null);
-
- function sendMessage() {
- if (chatValue !== "") {
- let nodeValidationErrors = validateNodes();
- if (nodeValidationErrors.length === 0) {
- setLockChat(true);
- let message = chatValue;
- setChatValue("");
- addChatHistory(message, true);
-
- sendAll({
- ...reactFlowInstance.toObject(),
- message,
- chatHistory,
- name: flow.name,
- description: flow.description,
- })
- .then((r) => {
- addChatHistory(r.data.result, false, r.data.thought);
- setLockChat(false);
- })
- .catch((error) => {
- setErrorData({
- title: error.message ?? "Unknown Error",
- list: [error.response.data.detail],
- });
- setLockChat(false);
- let lastMessage;
- setChatHistory((chatHistory) => {
- let newChat = chatHistory;
-
- lastMessage = newChat.pop().message;
- return newChat;
- });
- setChatValue(lastMessage);
- });
- } else {
- setErrorData({
- title: "Oops! Looks like you missed some required information:",
- list: nodeValidationErrors,
- });
- }
- } else {
- setErrorData({
- title: "Error sending message",
- list: ["The message cannot be empty."],
- });
- }
- }
- function clearChat() {
- setChatHistory([]);
- updateFlow({ ..._.cloneDeep(flow), chat: [] });
- }
-
+ const handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "K" && event.shiftKey && (event.metaKey||event.ctrlKey)) {
+ setOpen(oldState=>!oldState);
+ }
+ };
+ document.addEventListener("keydown", handleKeyDown);
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown);
+ };
+ }, []);
return (
<>
-
-
-
-
{
- setOpen(false);
- }}
- className="flex justify-between cursor-pointer items-center px-5 py-2 border-b dark:border-b-gray-700"
- >
-
-
- Chat
-
-
-
-
- {chatHistory.map((c, i) => (
-
- ))}
-
-
-
-
-
{
- if (event.key === "Enter" && !lockChat) {
- sendMessage();
- }
- }}
- type="text"
- disabled={lockChat}
- value={lockChat ? "Thinking..." : chatValue}
- onChange={(e) => {
- setChatValue(e.target.value);
- }}
- className={classNames(
- lockChat ? "bg-gray-500 text-white" : "dark:bg-gray-700",
- "form-input block w-full rounded-md border-gray-300 dark:border-gray-600 dark:text-white pr-10 sm:text-sm"
- )}
- placeholder={"Send a message..."}
- />
-
-
-
-
-
-
-
-
-
-
-
Loading...
)
diff --git a/src/frontend/src/contexts/index.tsx b/src/frontend/src/contexts/index.tsx
index 310606ea5..06c576b83 100644
--- a/src/frontend/src/contexts/index.tsx
+++ b/src/frontend/src/contexts/index.tsx
@@ -13,12 +13,10 @@ export default function ContextWrapper({ children }: { children: ReactNode }) {