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

changed dark mode classes, added X icon to chat, changed icon of AI

Browse source
This commit is contained in:
Lucas Oliveira 2023-05-11 22:57:01 -03:00
commit 3b68fef647
13 changed files with 110 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/alerts/alertDropDown/index.tsx
View file

@ -24,7 +24,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
return ( return (
<div <div
ref={componentRef} ref={componentRef}
className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[16rem] h-[28rem] flex flex-col" className="z-10 py-3 pb-4 rounded-md bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none overflow-hidden w-[400px] h-[500px] flex flex-col"
> >
<div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200"> <div className="flex pl-3 flex-row justify-between text-md font-medium text-gray-800 dark:text-gray-200">
Notifications Notifications

BIN
src/frontend/src/assets/froze-flow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

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

@ -30,8 +30,8 @@ export default function ChatInput({
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-300 text-black dark:bg-gray-700 dark:text-gray-300" : "bg-gray-200 text-black dark:bg-gray-900 dark:text-gray-300",
"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" "form-input block w-full custom-scroll h-10 rounded-md border-gray-300 dark:border-gray-600 pr-10 sm:text-sm"
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
/> />
@ -39,12 +39,12 @@ export default function ChatInput({
<button disabled={lockChat} onClick={() => sendMessage()}> <button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? ( {lockChat ? (
<LockClosedIcon <LockClosedIcon
className="h-5 w-5 text-gray-400 dark:hover:text-gray-300 animate-pulse" className="h-5 w-5 text-gray-500 dark:hover:text-gray-300 animate-pulse"
aria-hidden="true" aria-hidden="true"
/> />
) : ( ) : (
<PaperAirplaneIcon <PaperAirplaneIcon
className="h-5 w-5 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300" className="h-5 w-5 text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
aria-hidden="true" aria-hidden="true"
/> />
)} )}

3
src/frontend/src/modals/chatModal/chatMessage/codeBlock/index.tsx
View file

@ -47,7 +47,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}; };
return ( return (
<div className="codeblock relative font-sans text-[16px]"> <div className="codeblock font-sans text-[16px]">
<div className="flex items-center justify-between py-1.5 px-4"> <div className="flex items-center justify-between py-1.5 px-4">
<span className="text-xs lowercase text-white">{language}</span> <span className="text-xs lowercase text-white">{language}</span>
@ -69,6 +69,7 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
</div> </div>
<SyntaxHighlighter <SyntaxHighlighter
className=" w-[570px]"
language={language} language={language}
style={oneDark} style={oneDark}
customStyle={{ margin: 0 }} customStyle={{ margin: 0 }}

42
src/frontend/src/modals/chatModal/chatMessage/components/aiLogo/index.tsx Normal file
View file

@ -0,0 +1,42 @@
export default function AiLogo() {
return (
<svg className="scale-150" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" style={{"margin": "auto", "background": "none", "display": "block", "shapeRendering": "auto"}} viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<defs>
<filter id="ldio-978hsxudfzl-filter" x="-100%" y="-100%" width="300%" height="300%" color-interpolation-filters="sRGB">
<feGaussianBlur in="SourceGraphic" stdDeviation="3.6"></feGaussianBlur>
<feComponentTransfer result="cutoff">
<feFuncA type="table" tableValues="0 0 0 0 0 0 1 1 1 1 1"></feFuncA>
</feComponentTransfer>
</filter>
</defs>
<g filter="url(#ldio-978hsxudfzl-filter)"><g transform="translate(50 50)">
<g>
<circle cx="8" cy="0" r="5" fill="#2edbb5">
<animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="5s" repeatCount="indefinite" begin="-0.2s"></animate>
</circle>
<animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="5s" repeatCount="indefinite" begin="0s"></animateTransform>
</g>
</g><g transform="translate(50 50)">
<g>
<circle cx="8" cy="0" r="5" fill="#1d99ff">
<animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="2.5s" repeatCount="indefinite" begin="-0.15000000000000002s"></animate>
</circle>
<animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="2.5s" repeatCount="indefinite" begin="-0.05s"></animateTransform>
</g>
</g><g transform="translate(50 50)">
<g>
<circle cx="8" cy="0" r="5" fill="#4f41ff">
<animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="1.6666666666666665s" repeatCount="indefinite" begin="-0.1s"></animate>
</circle>
<animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="1.6666666666666665s" repeatCount="indefinite" begin="-0.1s"></animateTransform>
</g>
</g><g transform="translate(50 50)">
<g>
<circle cx="8" cy="0" r="5" fill="#8400ff">
<animate attributeName="r" keyTimes="0;0.5;1" values="5.3999999999999995;12.6;5.3999999999999995" dur="1.25s" repeatCount="indefinite" begin="-0.05s"></animate>
</circle>
<animateTransform attributeName="transform" type="rotate" keyTimes="0;1" values="0;360" dur="1.25s" repeatCount="indefinite" begin="-0.15000000000000002s"></animateTransform>
</g>
</g></g></svg>
)
}

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

@ -1,8 +1,9 @@
import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline"; import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useRef, useState } from "react";
import { ChatMessageType } from "../../../types/chat"; import { ChatMessageType } from "../../../types/chat";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg"; import AiIcon from "../../../assets/Gooey Ring-5s-271px.svg";
import AiIconStill from "../../../assets/froze-flow.png"
import { UserIcon } from "@heroicons/react/24/solid"; import { UserIcon } from "@heroicons/react/24/solid";
import FileCard from "../fileComponent"; import FileCard from "../fileComponent";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
@ -13,8 +14,9 @@ import { CodeBlock } from "./codeBlock";
var Convert = require("ansi-to-html"); var Convert = require("ansi-to-html");
var convert = new Convert({ newline: true }); var convert = new Convert({ newline: true });
export default function ChatMessage({ chat }: { chat: ChatMessageType }) { export default function ChatMessage({ chat, lockChat }: { chat: ChatMessageType, lockChat: boolean }) {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const imgRef = useRef(null);
useEffect(() => { useEffect(() => {
setMessage(chat.message); setMessage(chat.message);
}, [chat.message]); }, [chat.message]);
@ -24,22 +26,25 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
className={classNames( className={classNames(
"w-full py-2 pl-2 flex", "w-full py-2 pl-2 flex",
chat.isSend chat.isSend
? "bg-white dark:bg-gray-800 " ? "bg-white dark:bg-gray-900 "
: "bg-gray-200 dark:bg-gray-700" : "bg-gray-200 dark:bg-gray-800"
)} )}
> >
<div <div
className={classNames( className={classNames(
"rounded-full w-8 h-8 flex items-center my-3 justify-center", "rounded-full overflow-hidden w-8 h-8 flex items-center my-3 justify-center",
chat.isSend ? "bg-gray-900" : "bg-gray-200" chat.isSend ? "bg-gray-900" : ""
)} )}
> >
{!chat.isSend && <img className="scale-150" src={AiIcon} />} {!chat.isSend && <div className="relative w-8 h-8">
<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-100" : "opacity-0")} src={AiIcon} />
<img className={"absolute transition-opacity duration-500 scale-150 " + (lockChat ? "opacity-0" : "opacity-100")} src={AiIconStill} />
</div>}
{chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />} {chat.isSend && <UserIcon className="w-6 h-6 -mb-1 text-gray-200" />}
</div> </div>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="w-full text-start flex items-center"> <div className="w-full text-start flex items-center">
<div className="w-full relative text-start inline-block text-gray-600 text-sm font-normal"> <div className="w-full relative text-start inline-block text-gray-600 dark:text-gray-300 text-sm font-normal">
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
@ -51,8 +56,8 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className=" text-start inline-block rounded-md h-full border border-gray-300 className=" text-start inline-block rounded-md text-gray-600 dark:text-gray-200 h-full border border-gray-300 dark:border-gray-500
bg-gray-100 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll" bg-gray-100 dark:bg-gray-800 w-[95%] pb-3 pt-3 px-2 ml-3 cursor-pointer scrollbar-hide overflow-scroll"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: convert.toHtml(chat.thought), __html: convert.toHtml(chat.thought),
}} }}
@ -60,12 +65,12 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
)} )}
{chat.thought && chat.thought !== "" && !hidden && <br></br>} {chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div className="w-full px-4 pb-3 pt-3 pr-8"> <div className="w-full px-4 pb-3 pt-3 pr-8">
<div className="dark:text-white"> <div className="dark:text-white w-full">
<div> <div className="w-full">
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose" className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
components={{ components={{
code({ node, inline, className, children, ...props }) { code({ node, inline, className, children, ...props }) {
if (children.length) { if (children.length) {
@ -128,7 +133,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
<ReactMarkdown <ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]} remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[rehypeMathjax]} rehypePlugins={[rehypeMathjax]}
className="markdown prose" className="markdown prose dark:prose-invert text-gray-600 dark:text-gray-200"
> >
{message} {message}
</ReactMarkdown> </ReactMarkdown>

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

@ -1,5 +1,5 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline"; import { ChatBubbleOvalLeftEllipsisIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useEffect, useRef, useState } from "react"; import { Fragment, useContext, useEffect, useRef, useState } from "react";
import { FlowType, NodeType } from "../../types/flow"; import { FlowType, NodeType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
@ -7,6 +7,7 @@ import { toNormalCase } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage"; import ChatMessage from "./chatMessage";
import { FaEraser } from "react-icons/fa"; import { FaEraser } from "react-icons/fa";
import { HiX } from "react-icons/hi";
import { sendAllProps } from "../../types/api"; import { sendAllProps } from "../../types/api";
import { ChatMessageType, ChatType } from "../../types/chat"; import { ChatMessageType, ChatType } from "../../types/chat";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
@ -353,14 +354,20 @@ export default function ChatModal({
<div className="relative w-full p-4"> <div className="relative w-full p-4">
<button <button
onClick={() => clearChat()} onClick={() => clearChat()}
className="absolute top-2 right-3 hover:text-red-500 dark:text-gray-300 dark:hover:text-red-500 z-30" className="absolute top-2 right-10 hover:text-red-500 text-gray-600 dark:text-gray-300 dark:hover:text-red-500 z-30"
> >
<FaEraser className="w-4 h-4" /> <FaEraser className="w-4 h-4" />
</button> </button>
<button
onClick={() => setModalOpen(false)}
className="absolute top-1.5 right-2 hover:text-red-500 text-gray-600 dark:text-gray-300 dark:hover:text-red-500 z-30"
>
<HiX className="w-5 h-5" />
</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.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => <ChatMessage chat={c} key={i} />) chatHistory.map((c, i) => <ChatMessage lockChat={lockChat} chat={c} key={i} />)
) : ( ) : (
<div className="flex flex-col h-full text-center justify-center w-full items-center align-middle"> <div className="flex flex-col h-full text-center justify-center w-full items-center align-middle">
<span> <span>

6
src/frontend/src/modals/importModal/buttonBox/index.tsx
View file

@ -85,10 +85,10 @@ export default function ButtonBox({
)} )}
> >
<div <div
className={`flex items-center justify-center ${bigCircle} bg-white/30 rounded-full`} className={`flex items-center justify-center ${bigCircle} bg-white/30 dark:bg-white/30 rounded-full`}
> >
<div <div
className={`flex items-center justify-center ${smallCircle} bg-white rounded-full`} className={`flex items-center justify-center ${smallCircle} bg-white dark:bg-white/80 rounded-full`}
> >
<div className={textColor}>{icon}</div> <div className={textColor}>{icon}</div>
</div> </div>
@ -96,7 +96,7 @@ export default function ButtonBox({
<div className="mt-auto mb-auto"> <div className="mt-auto mb-auto">
<h3 <h3
className={classNames( className={classNames(
"font-semibold text-white", "font-semibold text-white dark:text-white/80",
titleFontSize, titleFontSize,
marginTop marginTop
)} )}

18
src/frontend/src/modals/importModal/index.tsx
View file

@ -16,7 +16,7 @@ import { error } from "console";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import LoadingComponent from "../../components/loadingComponent"; import LoadingComponent from "../../components/loadingComponent";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
import { classNames, toNormalCase } from "../../utils"; import { classNames, snakeToSpaces, toNormalCase } from "../../utils";
export default function ImportModal() { export default function ImportModal() {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -140,7 +140,7 @@ export default function ImportModal() {
<div className="flex h-full w-full justify-evenly items-center"> <div className="flex h-full w-full justify-evenly items-center">
<ButtonBox <ButtonBox
size="big" size="big"
bgColor="bg-emerald-500" bgColor="bg-emerald-500 dark:bg-emerald-500/75"
description="Prebuilt Examples" description="Prebuilt Examples"
icon={ icon={
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" /> <DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
@ -149,12 +149,12 @@ export default function ImportModal() {
setShowExamples(true); setShowExamples(true);
handleExamples(); handleExamples();
}} }}
textColor="text-emerald-400" textColor="text-emerald-500 dark:text-emerald-500/75"
title="Examples" title="Examples"
></ButtonBox> ></ButtonBox>
<ButtonBox <ButtonBox
size="big" size="big"
bgColor="bg-blue-500" bgColor="bg-blue-500 dark:bg-blue-500/75"
description="Import from Local" description="Import from Local"
icon={ icon={
<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" /> <ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
@ -163,8 +163,8 @@ export default function ImportModal() {
uploadFlow(); uploadFlow();
setModalOpen(false); setModalOpen(false);
}} }}
textColor="text-blue-500" textColor="text-blue-500 dark:text-blue-500/75"
title="Local file" title="Local File"
></ButtonBox> ></ButtonBox>
</div> </div>
)} )}
@ -181,7 +181,7 @@ export default function ImportModal() {
{" "} {" "}
<ButtonBox <ButtonBox
size="small" size="small"
bgColor="bg-emerald-500" bgColor="bg-emerald-500 dark:bg-emerald-500/75"
description={ description={
example.description ?? "Prebuilt Examples" example.description ?? "Prebuilt Examples"
} }
@ -192,8 +192,8 @@ export default function ImportModal() {
addFlow(example); addFlow(example);
setModalOpen(false); setModalOpen(false);
}} }}
textColor="text-emerald-400" textColor="text-emerald-500 dark:text-emerald-500/75"
title={toNormalCase(example.name)} title={example.name}
></ButtonBox> ></ButtonBox>
</div> </div>
); );

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

@ -25,7 +25,7 @@ export default function TabsManagerComponent() {
useContext(TabsContext); useContext(TabsContext);
const { openPopUp } = useContext(PopUpContext); const { openPopUp } = useContext(PopUpContext);
const { templates } = useContext(typesContext); const { templates } = useContext(typesContext);
const AlertWidth = 256; const AlertWidth = 384;
const { dark, setDark } = useContext(darkContext); const { dark, setDark } = useContext(darkContext);
const { notificationCenter, setNotificationCenter } = const { notificationCenter, setNotificationCenter } =
useContext(alertContext); useContext(alertContext);
@ -71,7 +71,7 @@ export default function TabsManagerComponent() {
</button> </button>
<button <button
onClick={() => openPopUp(<ExportModal />)} onClick={() => openPopUp(<ExportModal />)}
className="flex items-center gap-1 mr-2 text-sm text-gray-600 hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200" className="flex items-center gap-1 pr-2 text-sm text-gray-600 border-gray-400 border-r hover:text-gray-500 dark:text-gray-300 dark:hover:text-gray-200"
> >
Export <ArrowDownTrayIcon className="h-5 w-5" /> Export <ArrowDownTrayIcon className="h-5 w-5" />
</button> </button>
@ -98,7 +98,7 @@ export default function TabsManagerComponent() {
<> <>
<div <div
className="z-10 absolute" className="z-10 absolute"
style={{ top: top + 20, left: left - AlertWidth }} style={{ top: top + 34, left: left - AlertWidth }}
> >
<AlertDropdown /> <AlertDropdown />
</div> </div>

4
src/frontend/src/png.d.ts vendored Normal file
View file

@ -0,0 +1,4 @@
declare module "*.png" {
const content: any;
export default content;
}

8
src/frontend/src/utils.ts
View file

@ -316,6 +316,14 @@ export function toFirstUpperCase(str: string) {
.join(""); .join("");
} }
export function snakeToSpaces(str: string) {
let result = str
.split("_")
.join(" ");
return result
}
export function toNormalCase(str: string) { export function toNormalCase(str: string) {
let result = str let result = str
.split("_") .split("_")

5
src/frontend/tailwind.config.js
View file

@ -57,6 +57,11 @@ module.exports = {
"font-family": "text-security-disc" "font-family": "text-security-disc"
}, },
'.stop': {
'-webkit-animation-play-state': 'paused',
'-moz-animation-play-state': 'paused',
'animation-play-state': 'paused',
},
'.custom-scroll':{ '.custom-scroll':{
'&::-webkit-scrollbar': { '&::-webkit-scrollbar': {
'width': '8px', 'width': '8px',