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

🎨 style(frontend): replace heroicons with lucide-react icons for consistency and smaller bundle size

Browse source 
🐛 fix(chatMessage): replace ChatBubbleOvalLeftEllipsisIcon with MessageCircle icon for consistency and better semantics

🎨 style(frontend): replace heroicons with lucide-react icons for consistency and better performance
🐛 fix(ApiModal): replace CodeBracketSquareIcon with Code2 icon for better semantics and consistency

🎨 style(frontend): replace heroicons with lucide-react icons for consistency and better design

🎨 style(genericModal/index.tsx): replace DocumentTextIcon with FileText icon from lucide-react library
🎨 style(importModal/buttonBox/index.tsx): remove unused imports
🎨 style(DisclosureComponent/index.tsx): replace ChevronRightIcon with ChevronRight icon from lucide-react library
🎨 style(extraSidebarComponent/index.tsx): replace Bars2Icon with Menu icon from lucide-react library
🔥 chore(entities/index.ts): remove unused HomeIcon import from heroicons-react library
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-22 22:43:21 -03:00
commit 0c4e1f11e7
29 changed files with 124 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/frontend/src/alerts/alertDropDown/components/singleAlertComponent/index.tsx
View file

@ -1,13 +1,9 @@
import {
XCircleIcon,
XMarkIcon,
InformationCircleIcon,
CheckCircleIcon,
} from "@heroicons/react/24/outline";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { useState } from "react"; import { useState } from "react";
import { SingleAlertComponentType } from "../../../../types/alerts"; import { SingleAlertComponentType } from "../../../../types/alerts";
import { X, CheckCircle2, Info, XCircle } from "lucide-react";
export default function SingleAlert({ export default function SingleAlert({
dropItem, dropItem,
@ -34,10 +30,11 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircleIcon <XCircle
className="h-5 w-5 text-red-400 dark:text-red-50" className="h-5 w-5 text-red-400 dark:text-red-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80"> <h3 className="text-sm break-words font-medium text-red-800 dark:text-white/80">
@ -70,7 +67,7 @@ export default function SingleAlert({
className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50" className="inline-flex rounded-md bg-red-50 dark:bg-transparent p-1.5 text-red-500 dark:text-red-50"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> <X className="h-5 w-5" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </div>
@ -81,10 +78,11 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<InformationCircleIcon <Info
className="h-5 w-5 text-blue-400 dark:text-blue-50" className="h-5 w-5 text-blue-400 dark:text-blue-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700 dark:text-white/80"> <p className="text-sm text-blue-700 dark:text-white/80">
@ -116,7 +114,7 @@ export default function SingleAlert({
className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50" className="inline-flex rounded-md bg-blue-50 dark:bg-transparent p-1.5 text-blue-500 dark:text-blue-50"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> <X className="h-5 w-5" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </div>
@ -127,10 +125,11 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CheckCircleIcon <CheckCircle2
className="h-5 w-5 text-green-400 dark:text-green-50" className="h-5 w-5 text-green-400 dark:text-green-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<p className="text-sm font-medium text-green-800 dark:bg-white/80"> <p className="text-sm font-medium text-green-800 dark:bg-white/80">
@ -150,7 +149,7 @@ export default function SingleAlert({
className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50" className="inline-flex rounded-md bg-green-50 dark:bg-transparent p-1.5 text-green-500 dark:text-green-50"
> >
<span className="sr-only">Dismiss</span> <span className="sr-only">Dismiss</span>
<XMarkIcon className="h-5 w-5" aria-hidden="true" /> <X className="h-5 w-5" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </div>

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

@ -1,11 +1,11 @@
import { useContext, useEffect, useRef } from "react"; import { useContext, useEffect, useRef } from "react";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { XMarkIcon } from "@heroicons/react/24/solid";
import { TrashIcon } from "@heroicons/react/24/outline";
import SingleAlert from "./components/singleAlertComponent"; import SingleAlert from "./components/singleAlertComponent";
import { AlertDropdownType } from "../../types/alerts"; import { AlertDropdownType } from "../../types/alerts";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { useOnClickOutside } from "../hooks/useOnClickOutside"; import { useOnClickOutside } from "../hooks/useOnClickOutside";
import { X, Trash2 } from "lucide-react";
export default function AlertDropdown({}: AlertDropdownType) { export default function AlertDropdown({}: AlertDropdownType) {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
const componentRef = useRef<HTMLDivElement>(null); const componentRef = useRef<HTMLDivElement>(null);
@ -36,13 +36,13 @@ export default function AlertDropdown({}: AlertDropdownType) {
setTimeout(clearNotificationList, 100); setTimeout(clearNotificationList, 100);
}} }}
> >
<TrashIcon className="w-[1.1rem] h-[1.1rem]" /> <Trash2 className="w-[1.1rem] h-[1.1rem]"/>
</button> </button>
<button <button
className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500" className="text-gray-800 hover:text-red-500 dark:text-gray-200 dark:hover:text-red-500"
onClick={closePopUp} onClick={closePopUp}
> >
<XMarkIcon className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </div>
</div> </div>

11
src/frontend/src/alerts/error/index.tsx
View file

@ -1,7 +1,7 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { XCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { ErrorAlertType } from "../../types/alerts"; import { ErrorAlertType } from "../../types/alerts";
import { XCircle } from "lucide-react";
export default function ErrorAlert({ export default function ErrorAlert({
title, title,
@ -43,10 +43,11 @@ export default function ErrorAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircleIcon <XCircle
className="h-5 w-5 text-red-400 dark:text-red-50" className="h-5 w-5 text-red-400 dark:text-red-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3"> <div className="ml-3">
<h3 className="text-sm font-medium text-red-800 dark:text-white/80"> <h3 className="text-sm font-medium text-red-800 dark:text-white/80">

11
src/frontend/src/alerts/notice/index.tsx
View file

@ -1,8 +1,8 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { NoticeAlertType } from "../../types/alerts"; import { NoticeAlertType } from "../../types/alerts";
import { Info } from "lucide-react";
export default function NoticeAlert({ export default function NoticeAlert({
title, title,
@ -40,10 +40,11 @@ export default function NoticeAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<InformationCircleIcon <Info
className="h-5 w-5 text-blue-400 dark:text-blue-50" className="h-5 w-5 text-blue-400 dark:text-blue-50"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="ml-3 flex-1 md:flex md:justify-between"> <div className="ml-3 flex-1 md:flex md:justify-between">
<p className="text-sm text-blue-700 dark:text-white/80">{title}</p> <p className="text-sm text-blue-700 dark:text-white/80">{title}</p>

13
src/frontend/src/alerts/success/index.tsx
View file

@ -1,7 +1,8 @@
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import { CheckCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { SuccessAlertType } from "../../types/alerts"; import { SuccessAlertType } from "../../types/alerts";
import { CheckCircle2 } from "lucide-react";
export default function SuccessAlert({ export default function SuccessAlert({
title, title,
@ -38,10 +39,12 @@ export default function SuccessAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CheckCircleIcon <CheckCircle2
className="h-5 w-5 text-green-400 dark:text-green-50"
aria-hidden="true" className="h-5 w-5 text-green-400 dark:text-green-50"
/> aria-hidden="true"
/>
</div> </div>
<div className="ml-3"> <div className="ml-3">
<p className="text-sm font-medium text-green-800 dark:text-white/80"> <p className="text-sm font-medium text-green-800 dark:text-white/80">

1
src/frontend/src/components/ExtraSidebarComponent/index.tsx
View file

@ -1,5 +1,4 @@
import { Disclosure } from "@headlessui/react"; import { Disclosure } from "@headlessui/react";
import { ChevronLeftIcon } from "@heroicons/react/24/outline";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { classNames } from "../../utils"; import { classNames } from "../../utils";

9
src/frontend/src/components/chatComponent/chatMessage/index.tsx
View file

@ -1,13 +1,10 @@
import {
ChatBubbleLeftEllipsisIcon,
ChatBubbleOvalLeftEllipsisIcon,
PlusSmallIcon,
} from "@heroicons/react/24/outline";
import { useState } from "react"; import { useState } from "react";
import { ChatMessageType } from "../../../types/chat"; import { ChatMessageType } from "../../../types/chat";
import { nodeColors } from "../../../utils"; import { nodeColors } from "../../../utils";
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
const convert = new Convert({ newline: true }); const convert = new Convert({ newline: true });
import { MessageCircle } from "lucide-react";
export default function ChatMessage({ chat }: { chat: ChatMessageType }) { export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
const [hidden, setHidden] = useState(true); const [hidden, setHidden] = useState(true);
@ -24,7 +21,7 @@ export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute top-2 right-2 cursor-pointer" className="absolute top-2 right-2 cursor-pointer"
> >
<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce" /> <MessageCircle className="w-5 h-5 animate-bounce" />
</div> </div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (

4
src/frontend/src/components/codeAreaComponent/index.tsx
View file

@ -1,10 +1,10 @@
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import CodeAreaModal from "../../modals/codeAreaModal"; import CodeAreaModal from "../../modals/codeAreaModal";
import TextAreaModal from "../../modals/textAreaModal"; import TextAreaModal from "../../modals/textAreaModal";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import { INPUT_STYLE } from "../../constants"; import { INPUT_STYLE } from "../../constants";
import { ExternalLink } from "lucide-react";
export default function CodeAreaComponent({ export default function CodeAreaComponent({
value, value,
@ -69,7 +69,7 @@ export default function CodeAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3" /> <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300 ml-3"/>
)} )}
</button> </button>
</div> </div>

24
src/frontend/src/components/dropdownComponent/index.tsx
View file

@ -1,9 +1,9 @@
import { Listbox, Transition } from "@headlessui/react"; import { Listbox, Transition } from "@headlessui/react";
import { ChevronUpDownIcon, CheckIcon } from "@heroicons/react/24/outline";
import { Fragment, useState } from "react"; import { Fragment, useState } from "react";
import { DropDownComponentType } from "../../types/components"; import { DropDownComponentType } from "../../types/components";
import { classNames } from "../../utils"; import { classNames } from "../../utils";
import { INPUT_STYLE } from "../../constants"; import { INPUT_STYLE } from "../../constants";
import { ChevronsUpDown, Check } from "lucide-react";
export default function Dropdown({ export default function Dropdown({
value, value,
@ -43,10 +43,11 @@ export default function Dropdown({
"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
} }
> >
<ChevronUpDownIcon <ChevronsUpDown
className="h-5 w-5 text-gray-400" className="h-5 w-5 text-gray-400"
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
</Listbox.Button> </Listbox.Button>
@ -97,14 +98,15 @@ export default function Dropdown({
"absolute inset-y-0 right-0 flex items-center pr-4" "absolute inset-y-0 right-0 flex items-center pr-4"
)} )}
> >
<CheckIcon <Check
className={ className={
active active
? "h-5 w-5 dark:text-black text-black" ? "h-5 w-5 dark:text-black text-black"
: "h-5 w-5 dark:text-white text-black" : "h-5 w-5 dark:text-white text-black"
} }
aria-hidden="true" aria-hidden="true"
/> />
</span> </span>
) : null} ) : null}
</> </>

8
src/frontend/src/components/headerComponent/components/menuBar/index.tsx
View file

@ -69,6 +69,8 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
handleAddFlow(); handleAddFlow();
}} }}
className="cursor-pointer"
> >
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
New New
@ -77,6 +79,8 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
openPopUp(<FlowSettingsModal />); openPopUp(<FlowSettingsModal />);
}} }}
className="cursor-pointer"
> >
<Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" /> <Settings2 className="w-4 h-4 mr-2 dark:text-gray-300" />
Settings Settings
@ -85,6 +89,8 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
undo(); undo();
}} }}
className="cursor-pointer"
> >
<Undo className="w-4 h-4 mr-2 dark:text-gray-300" /> <Undo className="w-4 h-4 mr-2 dark:text-gray-300" />
Undo Undo
@ -93,6 +99,8 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
redo(); redo();
}} }}
className="cursor-pointer"
> >
<Redo className="w-4 h-4 mr-2 dark:text-gray-300" /> <Redo className="w-4 h-4 mr-2 dark:text-gray-300" />
Redo Redo

3
src/frontend/src/components/headerComponent/index.tsx
View file

@ -13,6 +13,7 @@ import { Link, useLocation, useParams } from "react-router-dom";
import { USER_PROJECTS_HEADER } from "../../constants"; import { USER_PROJECTS_HEADER } from "../../constants";
import { getRepoStars } from "../../controllers/API"; import { getRepoStars } from "../../controllers/API";
import { Separator } from "../ui/separator"; import { Separator } from "../ui/separator";
import { Bell } from "lucide-react";
export default function Header() { export default function Header() {
const { flows, addFlow, tabId } = useContext(TabsContext); const { flows, addFlow, tabId } = useContext(TabsContext);
@ -134,7 +135,7 @@ export default function Header() {
{notificationCenter && ( {notificationCenter && (
<div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div> <div className="absolute w-1.5 h-1.5 rounded-full bg-destructive right-[3px]"></div>
)} )}
<BellIcon className="h-5 w-5" aria-hidden="true" /> <Bell className="h-5 w-5" aria-hidden="true" />
</button> </button>
</div> </div>
</div> </div>

4
src/frontend/src/components/inputFileComponent/index.tsx
View file

@ -1,8 +1,8 @@
import { DocumentMagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { FileComponentType } from "../../types/components"; import { FileComponentType } from "../../types/components";
import { INPUT_STYLE } from "../../constants"; import { INPUT_STYLE } from "../../constants";
import { FileSearch2 } from "lucide-react";
export default function InputFileComponent({ export default function InputFileComponent({
value, value,
@ -89,7 +89,7 @@ export default function InputFileComponent({
</span> </span>
<button onClick={handleButtonClick}> <button onClick={handleButtonClick}>
{!editNode && ( {!editNode && (
<DocumentMagnifyingGlassIcon className="w-8 h-8 hover:text-ring" /> <FileSearch2 className="w-8 h-8 hover:text-ring" />
)} )}
</button> </button>
</div> </div>

7
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -1,10 +1,11 @@
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components"; import { InputListComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext"; import { TabsContext } from "../../contexts/tabsContext";
import _ from "lodash"; import _ from "lodash";
import { INPUT_STYLE } from "../../constants"; import { INPUT_STYLE } from "../../constants";
import { X, Plus } from "lucide-react";
export default function InputListComponent({ export default function InputListComponent({
value, value,
onChange, onChange,
@ -59,7 +60,7 @@ export default function InputListComponent({
onChange(inputList); onChange(inputList);
}} }}
> >
<PlusIcon className={"w-4 h-4 hover:text-ring"} /> <Plus className={"w-4 h-4 hover:text-ring"}/>
</button> </button>
) : ( ) : (
<button <button
@ -72,7 +73,7 @@ export default function InputListComponent({
onChange(inputList); onChange(inputList);
}} }}
> >
<XMarkIcon className="w-4 h-4 hover:text-red-600" /> <X className="w-4 h-4 hover:text-red-600" />
</button> </button>
)} )}
</div> </div>

4
src/frontend/src/components/promptComponent/index.tsx
View file

@ -1,10 +1,10 @@
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TypeModal } from "../../utils"; import { TypeModal } from "../../utils";
import { INPUT_STYLE } from "../../constants"; import { INPUT_STYLE } from "../../constants";
import { ExternalLink } from "lucide-react";
export default function PromptAreaComponent({ export default function PromptAreaComponent({
value, value,
@ -74,7 +74,7 @@ export default function PromptAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" /> <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300"/>
)} )}
</button> </button>
</div> </div>

5
src/frontend/src/components/textAreaComponent/index.tsx
View file

@ -1,10 +1,11 @@
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
import { useContext, useEffect, useState } from "react"; import { useContext, useEffect, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { TextAreaComponentType } from "../../types/components"; import { TextAreaComponentType } from "../../types/components";
import GenericModal from "../../modals/genericModal"; import GenericModal from "../../modals/genericModal";
import { TypeModal } from "../../utils"; import { TypeModal } from "../../utils";
import { INPUT_STYLE } from "../../constants"; import { INPUT_STYLE } from "../../constants";
import { ExternalLink } from "lucide-react";
export default function TextAreaComponent({ export default function TextAreaComponent({
value, value,
onChange, onChange,
@ -76,7 +77,7 @@ export default function TextAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-gray-300" /> <ExternalLink className="w-6 h-6 hover:text-ring dark:text-gray-300" />
)} )}
</button> </button>
</div> </div>

10
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -1,4 +1,3 @@
import { CodeBracketSquareIcon } from "@heroicons/react/24/outline";
import { useContext, useState } from "react"; import { useContext, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import "ace-builds/src-noconflict/mode-python"; import "ace-builds/src-noconflict/mode-python";
@ -26,7 +25,7 @@ import {
TabsList, TabsList,
TabsTrigger, TabsTrigger,
} from "../../components/ui/tabs"; } from "../../components/ui/tabs";
import { Check, Clipboard } from "lucide-react"; import { Check, Clipboard, Code2 } from "lucide-react";
export default function ApiModal({ flow }: { flow: FlowType }) { export default function ApiModal({ flow }: { flow: FlowType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -88,10 +87,11 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Code</span> <span className="pr-2">Code</span>
<CodeBracketSquareIcon <Code2
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription> <DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader> </DialogHeader>

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

@ -12,7 +12,6 @@ import {
TableRow, TableRow,
} from "../../components/ui/table"; } from "../../components/ui/table";
import ToggleShadComponent from "../../components/toggleShadComponent"; import ToggleShadComponent from "../../components/toggleShadComponent";
import { VariableIcon } from "@heroicons/react/24/outline";
import InputListComponent from "../../components/inputListComponent"; import InputListComponent from "../../components/inputListComponent";
import TextAreaComponent from "../../components/textAreaComponent"; import TextAreaComponent from "../../components/textAreaComponent";
import InputComponent from "../../components/inputComponent"; import InputComponent from "../../components/inputComponent";
@ -33,6 +32,7 @@ import {
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Badge } from "../../components/ui/badge"; import { Badge } from "../../components/ui/badge";
import { Variable } from "lucide-react";
export default function EditNodeModal({ data }: { data: NodeDataType }) { export default function EditNodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -90,9 +90,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<DialogDescription> <DialogDescription>
{data.node?.description} {data.node?.description}
<div className="flex pt-4"> <div className="flex pt-4">
<VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200"> <Variable className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200"></Variable>
&nbsp;
</VariableIcon>
<span className="text-sm font-semibold text-gray-800 dark:text-white"> <span className="text-sm font-semibold text-gray-800 dark:text-white">
Parameters Parameters
</span> </span>

4
src/frontend/src/modals/NodeModal/index.tsx
View file

@ -1,5 +1,4 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
@ -13,6 +12,7 @@ import {
} from "../../utils"; } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ModalField from "./components/ModalField"; import ModalField from "./components/ModalField";
import { X } from "lucide-react";
export default function NodeModal({ data }: { data: NodeDataType }) { export default function NodeModal({ data }: { data: NodeDataType }) {
const [open, setOpen] = useState(true); const [open, setOpen] = useState(true);
@ -70,7 +70,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
}} }}
> >
<span className="sr-only">Close</span> <span className="sr-only">Close</span>
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <X className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="h-full w-full flex flex-col justify-center items-center"> <div className="h-full w-full flex flex-col justify-center items-center">

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

@ -1,8 +1,9 @@
import { LockClosedIcon, PaperAirplaneIcon } from "@heroicons/react/24/outline";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import { TabsContext } from "../../../contexts/tabsContext"; import { TabsContext } from "../../../contexts/tabsContext";
import { INPUT_STYLE } from "../../../constants"; import { INPUT_STYLE } from "../../../constants";
import { Lock, Send } from "lucide-react";
export default function ChatInput({ export default function ChatInput({
lockChat, lockChat,
chatValue, chatValue,
@ -60,14 +61,14 @@ export default function ChatInput({
<div className="absolute bottom-0.5 right-3"> <div className="absolute bottom-0.5 right-3">
<button disabled={lockChat} onClick={() => sendMessage()}> <button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? ( {lockChat ? (
<LockClosedIcon <Lock
className="h-5 w-5 text-gray-500 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 <Send
className="h-5 w-5 text-gray-500 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"
/> />
)} )}
</button> </button>

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

@ -1,10 +1,8 @@
import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
import { useEffect, useRef, 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 AiIconStill from "../../../assets/froze-flow.png";
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";
import rehypeMathjax from "rehype-mathjax"; import rehypeMathjax from "rehype-mathjax";
@ -12,6 +10,7 @@ import remarkGfm from "remark-gfm";
import remarkMath from "remark-math"; import remarkMath from "remark-math";
import { CodeBlock } from "./codeBlock"; import { CodeBlock } from "./codeBlock";
import Convert from "ansi-to-html"; import Convert from "ansi-to-html";
import { User2, MessageCircle } from "lucide-react";
export default function ChatMessage({ export default function ChatMessage({
chat, chat,
@ -62,7 +61,7 @@ export default function ChatMessage({
</div> </div>
)} )}
{chat.isSend && ( {chat.isSend && (
<UserIcon className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" /> <User2 className="w-6 h-6 -mb-1 text-gray-800 dark:text-gray-200" />
)} )}
</div> </div>
{!chat.isSend ? ( {!chat.isSend ? (
@ -73,7 +72,9 @@ export default function ChatMessage({
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute -top-1 -left-2 cursor-pointer" className="absolute -top-1 -left-2 cursor-pointer"
> >
<ChatBubbleOvalLeftEllipsisIcon className="w-5 h-5 animate-bounce dark:text-white" /> <MessageCircle
className="w-5 h-5 animate-bounce dark:text-white"
/>
</div> </div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (

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

@ -1,6 +1,6 @@
import { CloudArrowDownIcon, DocumentIcon } from "@heroicons/react/24/outline";
import * as base64js from "base64-js"; import * as base64js from "base64-js";
import { useState } from "react"; import { useState } from "react";
import { DownloadCloud, File } from "lucide-react";
export default function FileCard({ fileName, content, fileType }) { export default function FileCard({ fileName, content, fileType }) {
const handleDownload = () => { const handleDownload = () => {
@ -43,7 +43,7 @@ export default function FileCard({ fileName, content, fileType }) {
className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300" className="text-gray-500 py-1 px-2 dark:bg-gray-700 dark:text-gray-300"
onClick={handleDownload} onClick={handleDownload}
> >
<CloudArrowDownIcon className="hover:scale-110 w-5 h-5 text-current"></CloudArrowDownIcon> <DownloadCloud className="hover:scale-110 w-5 h-5 text-current"/>
</button> </button>
</div> </div>
)} )}
@ -65,14 +65,14 @@ export default function FileCard({ fileName, content, fileType }) {
className="w-8 h-8" className="w-8 h-8"
/> />
) : ( ) : (
<DocumentIcon className="w-8 h-8" /> <File className="w-8 h-8" />
)} )}
<div className="flex flex-col items-start"> <div className="flex flex-col items-start">
{" "} {" "}
<div className="truncate text-sm text-current">{fileName}</div> <div className="truncate text-sm text-current">{fileName}</div>
<div className="truncate text-xs text-gray-500">{fileType}</div> <div className="truncate text-xs text-gray-500">{fileType}</div>
</div> </div>
<CloudArrowDownIcon className="w-6 h-6 text-current ml-auto" /> <DownloadCloud className="w-6 h-6 text-current ml-auto"/>
</div> </div>
</button> </button>
); );

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

@ -1,13 +1,11 @@
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
import { ChatBubbleOvalLeftEllipsisIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useEffect, useRef, useState } from "react"; import { Fragment, useContext, useEffect, useRef, useState } from "react";
import { FlowType } from "../../types/flow"; import { FlowType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { validateNodes } from "../../utils"; import { validateNodes } from "../../utils";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import ChatMessage from "./chatMessage"; import ChatMessage from "./chatMessage";
import { Eraser } from "lucide-react"; import { X, MessagesSquare, Eraser } from "lucide-react";
import { X } from "lucide-react";
import { sendAllProps } from "../../types/api"; import { sendAllProps } from "../../types/api";
import { ChatMessageType } from "../../types/chat"; import { ChatMessageType } from "../../types/chat";
import ChatInput from "./chatInput"; import ChatInput from "./chatInput";
@ -387,7 +385,7 @@ export default function ChatModal({
<span className="text-base text-gray-500"> <span className="text-base text-gray-500">
Start a conversation and click the agent’s thoughts{" "} Start a conversation and click the agent’s thoughts{" "}
<span> <span>
<ChatBubbleOvalLeftEllipsisIcon className="w-6 h-6 inline animate-bounce " /> <MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 "/>
</span>{" "} </span>{" "}
to inspect the chaining process. to inspect the chaining process.
</span> </span>

9
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -1,4 +1,3 @@
import { XMarkIcon, CommandLineIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import AceEditor from "react-ace"; import AceEditor from "react-ace";
@ -22,6 +21,7 @@ import {
} from "../../components/ui/dialog"; } from "../../components/ui/dialog";
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants"; import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
import { TerminalSquare } from "lucide-react";
export default function CodeAreaModal({ export default function CodeAreaModal({
value, value,
@ -51,10 +51,11 @@ export default function CodeAreaModal({
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span> <span className="pr-2">Edit Code</span>
<CommandLineIcon <TerminalSquare
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>

1
src/frontend/src/modals/exportModal/index.tsx
View file

@ -1,4 +1,3 @@
import { ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import { useContext, useRef, useState } from "react"; import { useContext, useRef, useState } from "react";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";

9
src/frontend/src/modals/genericModal/index.tsx
View file

@ -1,4 +1,3 @@
import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
import { Fragment, useContext, useRef, useState } from "react"; import { Fragment, useContext, useRef, useState } from "react";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";
import { darkContext } from "../../contexts/darkContext"; import { darkContext } from "../../contexts/darkContext";
@ -17,6 +16,7 @@ import {
import { Button } from "../../components/ui/button"; import { Button } from "../../components/ui/button";
import { Textarea } from "../../components/ui/textarea"; import { Textarea } from "../../components/ui/textarea";
import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants"; import { PROMPT_DIALOG_SUBTITLE, TEXT_DIALOG_SUBTITLE } from "../../constants";
import { FileText } from "lucide-react";
export default function GenericModal({ export default function GenericModal({
value, value,
@ -54,10 +54,11 @@ export default function GenericModal({
<DialogHeader> <DialogHeader>
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span> <span className="pr-2">{myModalTitle}</span>
<DocumentTextIcon <FileText
className="h-6 w-6 text-gray-800 pl-1 dark:text-white" className="h-6 w-6 text-gray-800 pl-1 dark:text-white"
aria-hidden="true" aria-hidden="true"
/> />
</DialogTitle> </DialogTitle>
<DialogDescription> <DialogDescription>
{(() => { {(() => {

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

@ -1,7 +1,5 @@
import React, { ReactNode, useEffect, useRef, useState } from "react"; import React, { ReactNode } from "react";
import { DocumentDuplicateIcon } from "@heroicons/react/solid";
import { classNames } from "../../../utils"; import { classNames } from "../../../utils";
import Tooltip from "../../../components/TooltipComponent";
export default function ButtonBox({ export default function ButtonBox({
onClick, onClick,

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

@ -1,4 +1,3 @@
import { ChevronRightIcon } from "@heroicons/react/24/solid";
import { Disclosure } from "@headlessui/react"; import { Disclosure } from "@headlessui/react";
import { DisclosureComponentType } from "../../../../types/components"; import { DisclosureComponentType } from "../../../../types/components";
import { ChevronRight } from "lucide-react"; import { ChevronRight } from "lucide-react";

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

@ -1,4 +1,3 @@
import { Bars2Icon } from "@heroicons/react/24/outline";
import DisclosureComponent from "../DisclosureComponent"; import DisclosureComponent from "../DisclosureComponent";
import { import {
classNames, classNames,
@ -16,9 +15,9 @@ import ExportModal from "../../../../modals/exportModal";
import ApiModal from "../../../../modals/ApiModal"; import ApiModal from "../../../../modals/ApiModal";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { alertContext } from "../../../../contexts/alertContext"; import { alertContext } from "../../../../contexts/alertContext";
import { updateFlowInDatabase } from "../../../../controllers/API";
import { INPUT_STYLE } from "../../../../constants"; import { INPUT_STYLE } from "../../../../constants";
import { Separator } from "../../../../components/ui/separator"; import { Separator } from "../../../../components/ui/separator";
import { Menu } from "lucide-react";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const { data } = useContext(typesContext); const { data } = useContext(typesContext);
@ -186,7 +185,7 @@ export default function ExtraSidebar() {
<span className="text-black dark:text-white w-full pr-1 truncate text-xs"> <span className="text-black dark:text-white w-full pr-1 truncate text-xs">
{t} {t}
</span> </span>
<Bars2Icon className="w-4 h-6 text-gray-400 dark:text-gray-600" /> <Menu className="w-4 h-6 text-gray-400 dark:text-gray-600"/>
</div> </div>
</div> </div>
</div> </div>

2
src/frontend/src/types/entities/index.ts
View file

@ -1,5 +1,3 @@
import { HomeIcon } from "@heroicons/react/24/outline";
export type sidebarNavigationItemType = { export type sidebarNavigationItemType = {
name: string; name: string;
href: string; href: string;