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

UI adjusts

Browse source
This commit is contained in:
Cristhian Zanforlin Lousa 2023-06-14 00:01:55 -03:00
commit 72e290c8b7
16 changed files with 54 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -21,10 +21,7 @@ export default function ExtraSidebar() {
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-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 px-4 justify-between align-middle w-full">
<span className="text-gray-900 dark:text-white py-[2px] font-medium "></span>
</div>
<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 bg-white">
<div className="flex flex-grow flex-col w-full">
{extraNavigation.options ? (
<div className="p-4">

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

@ -40,7 +40,7 @@ export default function CodeAreaComponent({
}}
className={
editNode
? "h-7 truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
? "truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}

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

@ -50,8 +50,8 @@ export default function FloatComponent({
value={myValue}
className={
editNode
? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
}
placeholder={

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

@ -49,8 +49,8 @@ export default function InputComponent({
disabled ? " bg-gray-200 dark:bg-gray-700" : "",
password && !pwdVisible && myValue !== "" ? "password" : "",
editNode
? "border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
: "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
? "border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200 text-center"
: "ring-offset-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
password && editNode ? "pr-8" : "pr-3"
)}
placeholder={password && editNode ? "Key" : "Type something..."}

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

@ -22,7 +22,7 @@ export default function InputListComponent({
<div
className={
(disabled ? "pointer-events-none cursor-not-allowed" : "") +
"flex flex-col gap-3"
"flex flex-col gap-3 py-2"
}
>
{inputList.map((i, idx) => (
@ -32,8 +32,8 @@ export default function InputListComponent({
value={i}
className={
editNode
? "h-7 truncate cursor-pointer text-center placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
? "border-[1px] truncate cursor-pointer text-center placeholder:text-center text-gray-500 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "block w-full form-input rounded-md border-gray-300 shadow-sm focus:border-gray-500 focus:ring-gray-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "") +
"focus:placeholder-transparent"
}
@ -58,7 +58,13 @@ export default function InputListComponent({
onChange(inputList);
}}
>
<PlusIcon className="w-4 h-4 hover:text-blue-600" />
<PlusIcon
className={
editNode
? "w-4 h-4 hover:text-black"
: "w-4 h-4 hover:text-blue-600"
}
/>
</button>
) : (
<button

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

@ -64,7 +64,7 @@ export default function IntComponent({
value={myValue}
className={
editNode
? "focus:placeholder-transparent text-center placeholder:text-center border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
? "focus:placeholder-transparent text-center placeholder:text-center border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "focus:placeholder-transparent block w-full form-input dark:bg-gray-900 dark:border-gray-600 dark:text-gray-300 rounded-md border-gray-300 shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 sm:text-sm" +
(disabled ? " bg-gray-200 dark:bg-gray-700" : "")
}

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

@ -7,7 +7,7 @@ export default function LoadingComponent({ remSize }: LoadingComponentProps) {
<div role="status" className="w-min m-auto">
<svg
aria-hidden="true"
className={`w-${remSize} h-${remSize} mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600`}
className={`w-${remSize} h-${remSize} mr-2 text-muted animate-spin dark:text-gray-600 fill-blue-600`}
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"

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

@ -45,7 +45,7 @@ export default function PromptAreaComponent({
}}
className={
editNode
? "h-7 cursor-pointer truncate placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
? "cursor-pointer truncate placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}

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

@ -27,7 +27,13 @@ export default function TextAreaComponent({
return (
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
<div className="w-full flex items-center gap-3">
<div
className={
editNode
? "w-full flex items-center"
: "w-full flex items-center gap-3"
}
>
<span
onClick={() => {
openPopUp(
@ -45,7 +51,7 @@ export default function TextAreaComponent({
}}
className={
editNode
? "h-7 truncate cursor-pointer placeholder:text-center text-gray-500 border-0 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
? "truncate cursor-pointer placeholder:text-center text-gray-500 border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-gray-900 dark:text-gray-300 dark:border-gray-600 rounded-md border-gray-300 shadow-sm sm:text-sm focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
: "truncate block w-full text-gray-500 dark:text-gray-100 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
(disabled ? " bg-gray-200" : "")
}

7
src/frontend/src/constants.tsx
View file

@ -46,3 +46,10 @@ export const TEXT_DIALOG_SUBTITLE = "Edit your text.";
*/
export const IMPORT_DIALOG_SUBTITLE =
"Upload a JSON file or select from the available community examples.";
/**
* The base text for subtitle of code dialog
* @constant
*/
export const EXPORT_CODE_DIALOG =
"Generate the code to integrate your flow into an external application.";

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

@ -24,6 +24,7 @@ import {
DialogTrigger,
} from "../../components/ui/dialog";
import { Button } from "../../components/ui/button";
import { EXPORT_CODE_DIALOG } from "../../constants";
export default function ApiModal({ flowName }) {
const [open, setOpen] = useState(true);
@ -90,7 +91,7 @@ flow("Hey, have you heard of LangFlow?")`;
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[570px] bg-muted">
<DialogContent className="lg:max-w-[800px] sm:max-w-[600px] h-[580px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Code</span>
@ -99,9 +100,7 @@ flow("Hey, have you heard of LangFlow?")`;
aria-hidden="true"
/>
</DialogTitle>
<DialogDescription>
Export your flow to use it with this code.
</DialogDescription>
<DialogDescription>{EXPORT_CODE_DIALOG}</DialogDescription>
</DialogHeader>
<div className="flex flex-col h-full w-full ">
@ -113,18 +112,18 @@ flow("Hey, have you heard of LangFlow?")`;
setActiveTab(index);
}}
className={
"p-2 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
"p-1.5 rounded-t-lg w-44 border border-b-0 border-gray-300 dark:border-gray-700 dark:text-gray-300 -mr-px flex justify-center items-center gap-4 " +
(activeTab === index
? " bg-white dark:bg-gray-800"
: "bg-gray-100 dark:bg-gray-900")
}
>
{tab.name}
<img src={tab.image} className="w-6" />
<img src={tab.image} className="w-[23px]" />
</button>
))}
</div>
<div className="overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg shadow bg-white dark:bg-gray-800">
<div className=" overflow-hidden px-4 sm:p-4 sm:pb-0 sm:pt-0 w-full h-full rounded-lg border-muted border-[1px] bg-gray-50 dark:bg-gray-800">
<div className="items-center mb-2">
<div className="float-right">
<button

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

@ -92,7 +92,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px] bg-muted ">
<DialogContent className="lg:max-w-[700px] ">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Node</span>
@ -103,7 +103,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
</DialogTitle>
<DialogDescription>
{EDIT_DIALOG_SUBTITLE}
<div className="flex pt-3">
<div className="flex pt-4">
<VariableIcon className="w-5 h-5 pe-1 text-gray-700 stroke-2 dark:text-slate-200">
&nbsp;
</VariableIcon>
@ -117,7 +117,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<div className="flex w-full max-h-[350px] h-fit">
<div
className={classNames(
"w-full rounded-lg bg-white dark:bg-gray-800 shadow",
"w-full rounded-lg bg-white dark:bg-gray-800 border-[1px] border-gray-200",
nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden"
@ -125,9 +125,9 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
>
{nodeLength > 0 && (
<div className="flex flex-col gap-5 h-fit">
<Table className="table-fixed">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium">
<TableRow>
<Table className="table-fixed bg-gray-50 outline-1">
<TableHeader className="border-gray-200 text-gray-500 text-xs font-medium h-10">
<TableRow className="dark:border-b-muted">
<TableHead className="h-7 text-center">PARAM</TableHead>
<TableHead className="p-0 h-7 text-center">
VALUE
@ -150,7 +150,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
data.node.template[t].type === "int")
)
.map((n, i) => (
<TableRow key={i} className="h-8">
<TableRow key={i} className="h-10 dark:border-b-muted">
<TableCell className="p-0 text-center text-gray-900 text-xs dark:text-gray-300 text-sm">
{data.node.template[n].name
? data.node.template[n].name

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

@ -47,7 +47,7 @@ export default function CodeAreaModal({
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px] h-[500px] bg-muted">
<DialogContent className="lg:max-w-[700px] h-[500px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Edit Code</span>
@ -73,7 +73,7 @@ export default function CodeAreaModal({
onChange={(value) => {
setCode(value);
}}
className="w-full rounded-lg h-[300px] custom-scroll"
className="w-full rounded-lg h-[300px] custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
/>
</div>

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

@ -44,7 +44,7 @@ export default function ExportModal() {
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="lg:max-w-[600px] h-[420px] bg-muted">
<DialogContent className="lg:max-w-[600px] h-[420px] ">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">Export</span>

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

@ -50,7 +50,7 @@ export default function GenericModal({
return (
<Dialog open={true} onOpenChange={setModalOpen}>
<DialogTrigger></DialogTrigger>
<DialogContent className="lg:max-w-[700px] bg-muted">
<DialogContent className="lg:max-w-[700px]">
<DialogHeader>
<DialogTitle className="flex items-center">
<span className="pr-2">{myModalTitle}</span>

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

@ -68,8 +68,8 @@ export default function ImportModal() {
<DialogContent
className={classNames(
showExamples
? "lg:max-w-[650px] h-[600px] bg-muted"
: "lg:max-w-[650px] h-[450px] bg-muted"
? "lg:max-w-[650px] h-[600px]"
: "lg:max-w-[650px] h-[450px]"
)}
>
<DialogHeader>
@ -176,7 +176,7 @@ export default function ImportModal() {
</div>
<DialogFooter>
<div className="bg-muted w-full flex items-center justify-center mt-2">
<div className="w-full flex items-center justify-center mt-2">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"