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

chat modal messages firts version finished

Browse source
This commit is contained in:
anovazzi1 2023-04-24 22:04:25 -03:00
commit 68870301f3
2 changed files with 72 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/frontend/src/modals/chatModal/chatMessage/index.tsx Normal file
View file

@ -0,0 +1,69 @@
import {
ChatBubbleLeftEllipsisIcon,
ChatBubbleOvalLeftEllipsisIcon,
PlusSmallIcon,
} from "@heroicons/react/24/outline";
import { useState } from "react";
import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils";
import { UserIcon } from "@heroicons/react/24/solid";
var Convert = require("ansi-to-html");
var convert = new Convert({ newline: true });
export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
const [hidden, setHidden] = useState(true);
return (
<div
className={classNames(
"w-full py-2 pl-2 flex",
chat.isSend ? "bg-white" : "bg-gray-200"
)}
>
<div
className={classNames(
"rounded-full w-8 h-8 flex items-center my-3 justify-center bg-black"
)}
>
{!chat.isSend && <span>🦜</span>}
{chat.isSend && <UserIcon className="text-white w-5 h-5" />}
</div>
{!chat.isSend ? (
<div className="w-full text-start flex items-center">
<div
className=" relative text-start inline-block text-gray-600 text-sm font-normal"
>
{hidden && chat.thought && chat.thought !== "" && (
<div
onClick={() => setHidden((prev) => !prev)}
className="absolute -top-1 -left-2 cursor-pointer"
>
<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
</div>
)}
{chat.thought && chat.thought !== "" && !hidden && (
<div
onClick={() => setHidden((prev) => !prev)}
className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
dangerouslySetInnerHTML={{
__html: convert.toHtml(chat.thought),
}}
></div>
)}
{chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div
className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8"
>
{chat.message}
</div>
</div>
</div>
) : (
<div className="w-full flex items-center">
<div className="text-start inline-block px-3 text-sm text-gray-600 dark:text-white dark:bg-gray-700">
{chat.message}
</div>
</div>
)}
</div>
);
}

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

@ -13,7 +13,7 @@ import { alertContext } from "../../contexts/alertContext";
import { classNames, snakeToNormalCase } from "../../utils";
import { sendAll } from "../../controllers/API";
import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "../../components/chatComponent/chatMessage";
import ChatMessage from "./chatMessage";
const _ = require("lodash");
export default function ChatModal({ flow }) {
@ -212,8 +212,8 @@ export default function ChatModal({ flow }) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
<div className="w-full h-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3 overflow-scroll scrollbar-hide">
<Dialog.Panel className=" drop-shadow-2xl relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
<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) => (
<ChatMessage chat={c} key={i} />
))}