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

🔧 chore(frontend): fix formatting issues in multiple files

Browse source 
🚀 feat(frontend): add hover effect to file search icon in InputFileComponent
🚀 feat(frontend): add support for dark mode in alert icons
🚀 feat(frontend): add support for dark mode in dropdown chevron icon
🚀 feat(frontend): add support for dark mode in success alert icon
🚀 feat(frontend): add support for dark mode in notice alert icon
🚀 feat(frontend): add support for dark mode in error alert icon
🚀 feat(frontend): add support for process.env.PORT environment variable to be able to run app on a configurable port
🚀 feat(frontend): add parameter types to GenericNode component
🚀 feat(frontend): add hover effect to external link icon in CodeAreaComponent
🚀 feat(frontend): add hover effect to plus icon in MenuBar component
🚀 feat(frontend): add hover effect to settings icon in MenuBar component
🚀 feat(frontend): add hover effect to undo icon in MenuBar component
🚀 feat(frontend): add hover effect to redo icon in MenuBar component

🎨 style(inputListComponent): add space before self-closing tag to improve readability
🎨 style(promptComponent): add space before self-closing tag to improve readability
🎨 style(ApiModal): fix indentation to improve readability
🎨 style(chatInput): add space before self-closing tag to improve readability
🎨 style(chatMessage): remove unnecessary line breaks to improve readability
🎨 style(fileComponent): add space before self-closing tag to improve readability
🎨 style(chatModal): remove unnecessary line breaks to improve readability
🎨 style(codeAreaModal): fix indentation to improve readability
🎨 style(genericModal): fix indentation to improve readability
🎨 style(DisclosureComponent): add space before self-closing tag to improve readability
🎨 style(extraSidebarComponent): fix indentation to improve readability
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-22 22:49:42 -03:00
commit bc1d6885ed
22 changed files with 74 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -6,7 +6,16 @@ import {
} from "../../utils"; } from "../../utils";
import ParameterComponent from "./components/parameterComponent"; import ParameterComponent from "./components/parameterComponent";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import { useContext, useState, useEffect, useRef, ForwardRefExoticComponent, ComponentType, SVGProps, ReactNode } from "react"; import {
useContext,
useState,
useEffect,
useRef,
ForwardRefExoticComponent,
ComponentType,
SVGProps,
ReactNode,
} from "react";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { PopUpContext } from "../../contexts/popUpContext"; import { PopUpContext } from "../../contexts/popUpContext";

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

@ -1,4 +1,3 @@
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";
@ -30,11 +29,10 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircle <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">
@ -78,11 +76,10 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Info <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">
@ -125,11 +122,10 @@ export default function SingleAlert({
key={dropItem.id} key={dropItem.id}
> >
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CheckCircle2 <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">

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

@ -4,7 +4,7 @@ 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"; import { X, Trash2 } from "lucide-react";
export default function AlertDropdown({}: AlertDropdownType) { export default function AlertDropdown({}: AlertDropdownType) {
const { closePopUp } = useContext(PopUpContext); const { closePopUp } = useContext(PopUpContext);
@ -36,7 +36,7 @@ export default function AlertDropdown({}: AlertDropdownType) {
setTimeout(clearNotificationList, 100); setTimeout(clearNotificationList, 100);
}} }}
> >
<Trash2 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"

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

@ -43,11 +43,10 @@ export default function ErrorAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<XCircle <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">

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

@ -40,11 +40,10 @@ export default function NoticeAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<Info <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>

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

@ -3,7 +3,6 @@ import { useEffect, useState } from "react";
import { SuccessAlertType } from "../../types/alerts"; import { SuccessAlertType } from "../../types/alerts";
import { CheckCircle2 } from "lucide-react"; import { CheckCircle2 } from "lucide-react";
export default function SuccessAlert({ export default function SuccessAlert({
title, title,
id, id,
@ -39,12 +38,10 @@ export default function SuccessAlert({
> >
<div className="flex"> <div className="flex">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<CheckCircle2 <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:text-white/80"> <p className="text-sm font-medium text-green-800 dark:text-white/80">

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

@ -1,4 +1,3 @@
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";

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

@ -69,7 +69,7 @@ export default function CodeAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ExternalLink 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>

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

@ -43,11 +43,10 @@ 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"
} }
> >
<ChevronsUpDown <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>
@ -98,15 +97,14 @@ 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"
)} )}
> >
<Check <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}
</> </>

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

@ -69,8 +69,7 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
handleAddFlow(); handleAddFlow();
}} }}
className="cursor-pointer" className="cursor-pointer"
> >
<Plus className="w-4 h-4 mr-2" /> <Plus className="w-4 h-4 mr-2" />
New New
@ -79,8 +78,7 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
openPopUp(<FlowSettingsModal />); openPopUp(<FlowSettingsModal />);
}} }}
className="cursor-pointer" 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
@ -89,8 +87,7 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
undo(); undo();
}} }}
className="cursor-pointer" 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
@ -99,8 +96,7 @@ export const MenuBar = ({ flows, tabId }) => {
onClick={() => { onClick={() => {
redo(); redo();
}} }}
className="cursor-pointer" 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

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

@ -88,9 +88,7 @@ export default function InputFileComponent({
{myValue !== "" ? myValue : "No file"} {myValue !== "" ? myValue : "No file"}
</span> </span>
<button onClick={handleButtonClick}> <button onClick={handleButtonClick}>
{!editNode && ( {!editNode && <FileSearch2 className="w-8 h-8 hover:text-ring" />}
<FileSearch2 className="w-8 h-8 hover:text-ring" />
)}
</button> </button>
</div> </div>
</div> </div>

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

@ -60,7 +60,7 @@ export default function InputListComponent({
onChange(inputList); onChange(inputList);
}} }}
> >
<Plus className={"w-4 h-4 hover:text-ring"}/> <Plus className={"w-4 h-4 hover:text-ring"} />
</button> </button>
) : ( ) : (
<button <button

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

@ -74,7 +74,7 @@ export default function PromptAreaComponent({
}} }}
> >
{!editNode && ( {!editNode && (
<ExternalLink 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>

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

@ -87,11 +87,10 @@ 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>
<Code2 <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>

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

@ -61,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 ? (
<Lock <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"
/> />
) : ( ) : (
<Send <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>

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

@ -72,9 +72,7 @@ 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"
> >
<MessageCircle <MessageCircle className="w-5 h-5 animate-bounce dark:text-white" />
className="w-5 h-5 animate-bounce dark:text-white"
/>
</div> </div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (

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

@ -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}
> >
<DownloadCloud className="hover:scale-110 w-5 h-5 text-current"/> <DownloadCloud className="hover:scale-110 w-5 h-5 text-current" />
</button> </button>
</div> </div>
)} )}
@ -72,7 +72,7 @@ export default function FileCard({ fileName, content, fileType }) {
<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>
<DownloadCloud className="w-6 h-6 text-current ml-auto"/> <DownloadCloud className="w-6 h-6 text-current ml-auto" />
</div> </div>
</button> </button>
); );

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

@ -385,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>
<MessagesSquare className="w-5 h-5 inline animate-bounce mx-1 "/> <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>

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

@ -52,10 +52,9 @@ export default function CodeAreaModal({
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span> <span className="pr-2">Edit Code</span>
<TerminalSquare <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>

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

@ -55,10 +55,9 @@ export default function GenericModal({
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span> <span className="pr-2">{myModalTitle}</span>
<FileText <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>
{(() => { {(() => {

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

@ -26,7 +26,7 @@ export default function DisclosureComponent({
</button> </button>
))} ))}
<div> <div>
<ChevronRight <ChevronRight
className={`${ className={`${
open || openDisc ? "rotate-90 transform" : "" open || openDisc ? "rotate-90 transform" : ""
} h-4 w-4 text-gray-800 dark:text-white`} } h-4 w-4 text-gray-800 dark:text-white`}

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

@ -17,7 +17,7 @@ import { TabsContext } from "../../../../contexts/tabsContext";
import { alertContext } from "../../../../contexts/alertContext"; import { alertContext } from "../../../../contexts/alertContext";
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"; import { Menu } from "lucide-react";
export default function ExtraSidebar() { export default function ExtraSidebar() {
const { data } = useContext(typesContext); const { data } = useContext(typesContext);
@ -185,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>
<Menu 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>