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

ui refactor

Browse source
This commit is contained in:
anovazzi1 2023-03-07 01:00:54 -03:00
commit 6c04009ac1
13 changed files with 88 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

4
langflow/frontend/src/App.tsx
View file

@ -95,7 +95,8 @@ useEffect(() => {
</div>
</main>
</div>
<div className="flex z-50 flex-col-reverse fixed bottom-5 left-5">
<div></div>
<div className="flex z-40 flex-col-reverse fixed bottom-5 left-5">
{alertsList.map((alert) => (
<div key={alert.id}>
{alert.type === "error" ? (
@ -125,6 +126,7 @@ useEffect(() => {
</div>
))}
</div>
<a target={"_blank"} href="https://logspace.ai/" className="absolute bottom-1 left-1 text-gray-500 text-xs cursor-pointer font-sans tracking-wide">Created by Logspace</a>
</div>
);
}

8
langflow/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -20,21 +20,21 @@ export default function AlertDropdown({}: AlertDropdownType) {
return (
<div className="z-10 py-2 pb-4 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[14rem] h-[28rem] flex flex-col">
<div className="z-10 py-3 pb-4 rounded-md bg-white ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col">
<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800">
Notifications
<div className="flex gap-3 pr-2 ">
<div className="flex gap-2 pr-3 ">
<button
className="hover:text-red-500"
onClick={() => {closePopUp(); setTimeout(clearNotificationList, 100)}}
>
<TrashIcon className="w-5 h-5" />
<TrashIcon className="w-[1.1rem] h-[1.1rem]" />
</button>
<button
className="hover:text-red-500"
onClick={closePopUp}
>
<XMarkIcon className="h-6 w-6" />
<XMarkIcon className="h-5 w-5" />
</button>
</div>
</div>

6
langflow/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -17,12 +17,12 @@ export default function ExtraSidebar() {
<>
<aside
className={` ${
isStackedOpen ? "w-60" : "w-0 "
isStackedOpen ? "w-52" : "w-0 "
} flex-shrink-0 flex overflow-hidden flex-col border-r dark:border-r-gray-700 transition-all duration-500`}
>
<div className="w-60 dark:bg-gray-800 border dark:border-gray-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
<div className="w-52 dark:bg-gray-800 border dark:border-gray-700 overflow-y-auto scrollbar-hide h-full flex flex-col items-start">
<div className="flex pt-1 px-4 justify-between align-middle w-full">
<span className="text-gray-900 dark:text-white text-lg ml-2 font-medium ">
<span className="text-gray-900 dark:text-white py-[2px] font-medium ">
{extraNavigation.title}
</span>
</div>

49
langflow/frontend/src/components/chatComponent/chatMessage/index.tsx Normal file
View file

@ -0,0 +1,49 @@
import { ChatBubbleLeftEllipsisIcon, ChatBubbleOvalLeftEllipsisIcon, PlusSmallIcon } from "@heroicons/react/24/outline";
import { useState } from "react";
import { ChatMessageType } from "../../../types/chat";
import { nodeColors } from "../../../utils";
export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
const [hidden, setHidden] = useState(true);
return (
<div>
{!chat.isSend ? (
<div className="w-full text-start">
<div
style={{ backgroundColor: nodeColors["chat"] }}
className=" relative text-start inline-block text-white rounded-xl overflow-hidden w-fit max-w-[280px] text-sm font-normal rounded-tl-none"
>
{hidden && chat.thought && chat.thought !== "" && (
<div
onClick={() => setHidden((prev) => !prev)}
className="absolute top-2 right-2 cursor-pointer"
>
<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" />
</div>
)}
{chat.thought && chat.thought !== "" && !hidden && (
<div
onClick={() => setHidden((prev) => !prev)}
style={{ backgroundColor: nodeColors["thought"] }}
className=" text-start inline-block w-full pb-3 pt-3 px-5 cursor-pointer"
dangerouslySetInnerHTML={{
__html: chat.thought.replace(/\n/g, "<br />"),
}}
></div>
)}
{chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div className="w-full rounded-b-md px-4 pb-3 pt-3 pr-8" style={{ backgroundColor: nodeColors["chat"] }}>
{chat.message}
</div>
</div>
</div>
) : (
<div className="w-full text-end">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
{chat.message}
</div>
</div>
)}
</div>
);
}

49
langflow/frontend/src/components/chatComponent/index.tsx
View file

@ -11,6 +11,7 @@ import { alertContext } from "../../contexts/alertContext";
import { classNames, nodeColors } from "../../utils";
import { TabsContext } from "../../contexts/tabsContext";
import { ChatType } from "../../types/chat";
import ChatMessage from "./chatMessage";
const _ = require("lodash");
@ -25,12 +26,12 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
const addChatHistory = (
message: string,
isSend: boolean,
thinking?: string
thought?: string
) => {
setChatHistory((old) => {
let newChat = _.cloneDeep(old);
if (thinking) {
newChat.push({ message, isSend, thinking });
if (thought) {
newChat.push({ message, isSend, thought });
} else {
newChat.push({ message, isSend });
}
@ -88,7 +89,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
sendAll({ ...reactFlowInstance.toObject(), message, chatHistory })
.then((r) => {
console.log(r.data);
addChatHistory(r.data.result, false);
addChatHistory(r.data.result, false,r.data.thought);
setLockChat(false);
})
.catch((error) => {
@ -121,7 +122,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<div className="w-[340px] absolute bottom-0 right-6">
<div className="w-[340px] absolute bottom-0 right-1">
<div className="border dark:border-gray-700 h-full rounded-xl rounded-b-none bg-white dark:bg-gray-800 shadow">
<div
onClick={() => {
@ -139,33 +140,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
</div>
<div className="w-full h-[400px] flex gap-3 mb-auto overflow-y-auto scrollbar-hide flex-col bg-gray-50 dark:bg-gray-900 p-3 py-5">
{chatHistory.map((c, i) => (
<div key={i}>
{!c.isSend ? (
<div className="w-full text-start">
<div
style={{ backgroundColor: nodeColors["chat"] }}
className="text-start inline-block text-white rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm font-normal rounded-tl-none"
>
{(c.thinking && c.thinking!=="") && (
<div
style={{ backgroundColor: nodeColors["thought"] }}
className="rounded text-start inline-block w-full text-gray-700 mb-1"
>
teste
</div>
)}
{(c.thinking && c.thinking!=="") && <br></br>}
{c.message}
</div>
</div>
) : (
<div className="w-full text-end">
<div className="text-start inline-block rounded-xl p-3 overflow-hidden w-fit max-w-[280px] px-5 text-sm text-black dark:text-white dark:bg-gray-700 bg-gray-200 font-normal rounded-tr-none">
{c.message}
</div>
</div>
)}
</div>
<ChatMessage chat={c} key={i}/>
))}
<div ref={ref}></div>
</div>
@ -179,7 +154,7 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
}}
type="text"
disabled={lockChat}
value={chatValue}
value={lockChat?"please wait for the response": chatValue}
onChange={(e) => {
setChatValue(e.target.value);
}}
@ -187,13 +162,13 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
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={lockChat?"please wait for the response":"Send a message..."}
placeholder={"Send a message..."}
/>
<div className="absolute inset-y-0 right-0 flex items-center pr-3">
<button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? (
<LockClosedIcon
className="h-5 w-5 text-gray-400 dark:hover:text-gray-300"
className="h-5 w-5 text-gray-400 dark:hover:text-gray-300 animate-pulse"
aria-hidden="true"
/>
) : (
@ -219,14 +194,14 @@ export default function Chat({ flow, reactFlowInstance }: ChatType) {
leaveFrom="translate-y-0"
leaveTo="translate-y-96"
>
<div className="absolute bottom-0 right-6">
<div className="absolute bottom-0 right-1">
<div className="border flex justify-center align-center py-1 px-3 rounded-xl rounded-b-none bg-white dark:bg-gray-800 dark:border-gray-600 dark:text-white shadow">
<button
onClick={() => {
setOpen(true);
}}
>
<div className="flex gap-3 text-lg font-medium items-center">
<div className="flex gap-3 items-center">
<Bars3CenterLeftIcon
className="h-6 w-6 mt-1"
style={{ color: nodeColors["chat"] }}

8
langflow/frontend/src/modals/textAreaModal/index.tsx
View file

@ -59,17 +59,17 @@ export default function TextAreaModal({value, setValue}:{setValue:(value:string)
</button>
</div>
<div className="h-full w-full flex flex-col justify-center items-center">
<div className="flex w-full pb-6 z-10 justify-center shadow-sm">
<div className="mx-auto mt-8 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
<div className="flex w-full pb-4 z-10 justify-center shadow-sm">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
<ClipboardDocumentListIcon
className="h-6 w-6 text-blue-600"
aria-hidden="true"
/>
</div>
<div className="mt-10 text-center sm:ml-4 sm:text-left">
<div className="mt-4 text-center sm:ml-4 sm:text-left">
<Dialog.Title
as="h3"
className="text-lg font-medium dark:text-white leading-6 text-gray-900"
className="text-lg font-medium dark:text-white leading-10 text-gray-900"
>
Edit text
</Dialog.Title>

4
langflow/frontend/src/pages/FlowPage/components/DisclosureComponent/index.tsx
View file

@ -1,6 +1,6 @@
import {
ChevronRightIcon,
} from "@heroicons/react/24/outline";
} from "@heroicons/react/24/solid";
import { Disclosure } from "@headlessui/react";
import { DisclosureComponentType } from "../../../../types/components";
@ -31,7 +31,7 @@ export default function DisclosureComponent({
<ChevronRightIcon
className={`${
open ? "rotate-90 transform" : ""
} h-5 w-5 text-gray-800 dark:text-white`}
} h-4 w-4 text-gray-800 dark:text-white`}
/>
</Disclosure.Button>
</div>

6
langflow/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx
View file

@ -71,9 +71,9 @@ export default function ExtraSidebar() {
})
}
>
<div className="flex w-full justify-between text-sm px-4 py-3 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border-2">
<span className="text-black dark:text-white w-36 truncate">{t}</span>
<Bars2Icon className="w-6 h-6 text-gray-400 dark:text-gray-600" />
<div className="flex w-full justify-between text-sm px-3 py-1 items-center border-dashed border-gray-400 dark:border-gray-600 border-l-0 rounded-md rounded-l-none border">
<span className="text-black dark:text-white w-36 truncate text-xs">{t}</span>
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" />
</div>
</div>
</div>

2
langflow/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx
View file

@ -12,7 +12,7 @@ import { alertContext } from "../../../../contexts/alertContext";
export default function TabsManagerComponent() {
const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
const { openPopUp } = useContext(PopUpContext);
const AlertWidth = 224
const AlertWidth = 256
const { dark, setDark } = useContext(darkContext);
const {notificationCenter, setNotificationCenter} = useContext(alertContext)
useEffect(() => {

2
langflow/frontend/src/pages/FlowPage/index.tsx
View file

@ -60,7 +60,7 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
setNodes(flow?.data?.nodes ?? []);
setEdges(flow?.data?.edges ?? []);
if (reactFlowInstance) {
setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 1 });
setViewport(flow?.data?.viewport ?? { x: 1, y: 0, zoom: 0.5 });
}
}, [flow, reactFlowInstance, setEdges, setNodes, setViewport]);
//set extra sidebar

3
langflow/frontend/src/types/chat/index.ts
View file

@ -1,4 +1,5 @@
import { ReactFlowInstance } from 'reactflow';
import { FlowType } from "../flow";
export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance}
export type ChatType = {flow:FlowType,reactFlowInstance:ReactFlowInstance}
export type ChatMessageType = { message: string; isSend: boolean, thought?:string }

3
langflow/frontend/src/types/flow/index.ts
View file

@ -1,3 +1,4 @@
import { ChatMessageType } from './../chat/index';
import { APIClassType } from '../api/index';
import { ReactFlowJsonObject, XYPosition } from "reactflow";
@ -5,7 +6,7 @@ export type FlowType = {
name: string;
id: string;
data: ReactFlowJsonObject;
chat: Array<{ message: string; isSend: boolean, thinking?:string }>;
chat: Array<ChatMessageType>;
};
export type NodeType = {id:string,type:string,position:XYPosition,data:NodeDataType}
export type NodeDataType = {type:string,node?:APIClassType,id:string,value:any}

4
langflow/frontend/src/utils.ts
View file

@ -68,8 +68,8 @@ export const nodeColors: {[char: string]: string} = {
tools: "#FF3434",
memories: "#FF9135",
advanced: "#000000",
chat: "#2563EB",
thought:"#7EC1FF"
chat: "#454173",
thought:"#272541"
};
export const nodeNames:{[char: string]: string} = {