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

feat: Add modals tailwind constants

Browse source
This commit is contained in:
Igor Carvalho 2023-07-06 11:14:48 -03:00
commit 7fc86a52af
16 changed files with 419 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/frontend/src/App.tsx
View file

@ -139,7 +139,7 @@ export default function App() {
</ErrorBoundary> </ErrorBoundary>
<div></div> <div></div>
<div <div
className="fixed bottom-5 left-5 flex flex-col-reverse" className="app-div"
style={{ zIndex: 999 }} style={{ zIndex: 999 }}
> >
{alertsList.map((alert) => ( {alertsList.map((alert) => (

8
src/frontend/src/components/toggleComponent/index.tsx
View file

@ -22,14 +22,14 @@ export default function ToggleComponent({
}} }}
className={classNames( className={classNames(
enabled ? "bg-primary" : "bg-input", enabled ? "bg-primary" : "bg-input",
"relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1" "toggle-component-switch "
)} )}
> >
<span className="sr-only">Use setting</span> <span className="sr-only">Use setting</span>
<span <span
className={classNames( className={classNames(
enabled ? "translate-x-5" : "translate-x-0", enabled ? "translate-x-5" : "translate-x-0",
"pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out", "toggle-component-span",
disabled ? "bg-input " : "bg-background" disabled ? "bg-input " : "bg-background"
)} )}
> >
@ -38,7 +38,7 @@ export default function ToggleComponent({
enabled enabled
? "opacity-0 duration-100 ease-out" ? "opacity-0 duration-100 ease-out"
: "opacity-100 duration-200 ease-in", : "opacity-100 duration-200 ease-in",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" "toggle-component-second-span"
)} )}
aria-hidden="true" aria-hidden="true"
></span> ></span>
@ -47,7 +47,7 @@ export default function ToggleComponent({
enabled enabled
? "opacity-100 duration-200 ease-in" ? "opacity-100 duration-200 ease-in"
: "opacity-0 duration-100 ease-out", : "opacity-0 duration-100 ease-out",
"absolute inset-0 flex h-full w-full items-center justify-center transition-opacity" "toggle-component-second-span"
)} )}
aria-hidden="true" aria-hidden="true"
></span> ></span>

300
src/frontend/src/index.css
View file

@ -592,4 +592,304 @@ The cursor: default; property value restores the browser's default cursor style
.input-file-component { .input-file-component {
@apply flex-max-width items-center @apply flex-max-width items-center
} }
.toggle-component-switch {
@apply relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out
}
.toggle-component-switch:focus {
@apply focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-1
}
.toggle-component-span {
@apply pointer-events-none relative inline-block h-5 w-5 transform rounded-full shadow ring-0 transition duration-200 ease-in-out
}
.toggle-component-second-span {
@apply absolute inset-0 flex h-full w-full items-center justify-center transition-opacity
}
.app-div {
@apply fixed bottom-5 left-5 flex flex-col-reverse
}
.chat-input-modal-txtarea {
@apply form-input block w-full rounded-md border-ring pr-10 custom-scroll sm:text-sm
}
.chat-input-modal-div {
@apply absolute bottom-0.5 right-3
}
.chat-input-modal-lock {
@apply side-bar-button-size animate-pulse text-ring
}
.chat-input-modal-send {
@apply side-bar-button-size text-ring hover:text-muted-foreground
}
.code-block-modal {
@apply flex items-center justify-between px-4 py-1.5
}
.code-block-modal-span {
@apply text-xs lowercase text-background
}
.code-block-modal-button {
@apply flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background
}
.chat-message-modal {
@apply flex-max-width py-2 pl-2
}
.chat-message-modal-div {
@apply my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full
}
.chat-message-modal-img {
@apply absolute scale-150 transition-opacity duration-500
}
.chat-message-modal-display {
@apply flex-max-width items-center text-start
}
.chat-message-modal-text {
@apply relative inline-block w-full text-start text-sm font-normal text-muted-foreground
}
.chat-message-modal-icon-div {
@apply absolute -left-2 -top-1 cursor-pointer
}
.chat-message-modal-thought {
@apply ml-3 inline-block h-full w-[95%] rounded-md border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground chat-message-modal-thought-cursor
}
.chat-message-modal-thought-cursor {
@apply cursor-pointer scrollbar-hide overflow-scroll
}
.chat-message-modal-markdown {
@apply w-full px-4 pb-3 pr-8 pt-3
}
.chat-message-modal-markdown-span {
@apply mt-1 animate-pulse cursor-default
}
.chat-message-modal-alert {
@apply inline-block px-3 text-start text-muted-foreground
}
.file-card-modal-image-div {
@apply absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground
}
.file-card-modal-image-button {
@apply px-2 py-1 text-ring
}
.file-card-modal-button {
@apply flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg
}
.file-card-modal-div {
@apply mr-2 flex-max-width items-center gap-2 text-current
}
.file-card-modal-footer {
@apply flex flex-col items-start
}
.file-card-modal-name {
@apply truncate text-sm text-current
}
.file-card-modal-type {
@apply truncate text-xs text-ring
}
.send-message-modal-transition {
@apply fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm transition-opacity
}
.chat-modal-box {
@apply fixed inset-0 z-10 overflow-y-auto
}
.chat-modal-box-div {
@apply flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0
}
.chat-modal-dialog-panel {
@apply relative flex h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all
}
.chat-modal-dialog-panel-div {
@apply relative w-full p-4
}
.chat-modal-dialog-trash-panel {
@apply absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red
}
.chat-modal-dialog-x-panel {
@apply absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red
}
.chat-modal-dialog-history {
@apply flex-max-width h-full flex-col items-center overflow-scroll border-t bg-background scrollbar-hide
}
.chat-modal-dialog-span-box {
@apply flex-max-width h-full flex-col items-center justify-center text-center align-middle
}
.chat-modal-dialog-desc {
@apply w-2/4 rounded-md border border-input bg-muted px-6 py-8
}
.chat-modal-input-div {
@apply flex-max-width flex-col items-center justify-between border-t bg-background p-3
}
.chat-modal-input {
@apply relative mt-1 w-full rounded-md shadow-sm
}
.code-area-modal-editor-div {
@apply mt-2 flex-max-width h-full
}
.code-area-modal-editor-box {
@apply h-[300px] w-full rounded-lg border-[1px] border-ring custom-scroll
}
.edit-node-modal-variable {
@apply h-5 w-5 stroke-2 pe-1 text-muted-foreground
}
.edit-node-modal-span {
@apply text-sm font-semibold text-primary
}
.edit-node-modal-arrangement {
@apply flex-max-width h-fit max-h-[400px]
}
.edit-node-modal-box {
@apply w-full rounded-lg border-[1px] border-input bg-background
}
.edit-node-modal-table {
@apply flex h-fit flex-col gap-5
}
.edit-node-modal-table-header {
@apply h-10 border-input text-xs font-medium text-ring
}
.edit-node-modal-table-cell {
@apply p-0 text-center text-sm text-foreground truncate sm:px-3
}
.edit-node-modal-second-cell {
@apply w-[300px] p-0 text-center text-xs text-foreground
}
.generic-modal-txtarea-div {
@apply mt-2 flex-max-width h-full
}
.button-box-modal-div {
@apply flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg
}
.dialog-header-modal-div {
@apply absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block
}
.dialog-header-modal-button {
@apply rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
}
.dialog-modal-examples-div {
@apply h-full w-full overflow-y-auto scrollbar-hide
}
.dialog-modal-example-true {
@apply mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto
}
.dialog-modal-example-false {
@apply flex flex-row items-center justify-center
}
.dialog-modal-button-box-div {
@apply flex-max-width h-full items-center justify-evenly
}
.document-icon {
@apply h-10 w-10 flex-shrink-0
}
.loading-component-div {
@apply flex items-center justify-center align-middle
}
.dialog-modal-footer {
@apply mt-2 flex-max-width items-center justify-center
}
.dialog-modal-footer-link {
@apply flex items-center justify-center text-muted-foreground
}
.node-modal-div {
@apply fixed inset-0 bg-ring bg-opacity-75 transition-opacity
}
.node-modal-dialog-arrangement {
@apply fixed inset-0 z-10 overflow-y-auto
}
.node-modal-dialog-div {
@apply flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0
}
.node-modal-dialog-panel {
@apply relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8
}
.node-modal-dialog-panel-div {
@apply absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block
}
.node-modal-dialog-button {
@apply rounded-md text-ring hover:text-accent-foreground
}
.node-modal-dialog-icon-div {
@apply flex-max-width h-full flex-col items-center justify-center
}
.node-modal-icon-arrangement {
@apply z-10 flex-max-width justify-center pb-4 shadow-sm
}
.node-modal-icon {
@apply mt-4 h-10 w-10 rounded p-1
}
.node-modal-title-div {
@apply mt-4 text-center sm:ml-4 sm:text-left
}
.node-modal-title {
@apply text-lg font-medium leading-10 text-foreground
}
.node-modal-template-div {
@apply flex-max-width h-full flex-row items-center justify-center gap-4 bg-input p-4
}
.node-modal-template {
@apply w-full rounded-lg bg-background px-4 shadow sm:p-4
}
.node-modal-template-column {
@apply flex h-full flex-col gap-5
}
.node-modal-button-box {
@apply flex-max-width flex-row-reverse bg-input px-4 pb-3
}
.node-modal-button {
@apply inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring sm:ml-3 sm:w-auto sm:text-sm
}
.node-modal-button:focus {
@apply focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1
}
.prompt-modal-icon-box {
@apply mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10
}
.prompt-modal-icon {
@apply h-6 w-6 text-almost-medium-blue
}
.prompt-modal-txtarea-arrangement {
@apply flex-max-width h-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4
}
.prompt-modal-txtarea-box {
@apply h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6
}
.prompt-modal-txtarea {
@apply form-input h-full w-full rounded-lg border-ring
}
.txtarea-modal-arrangement {
@apply flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4
}
.txtarea-modal-box {
@apply w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6
}
.txtarea-modal-input {
@apply form-input h-full w-full
}
.api-modal-tabs {
@apply w-full h-full overflow-hidden text-center bg-muted rounded-md border
}
.api-modal-tablist-div {
@apply flex items-center justify-between px-2
}
.api-modal-tabs-content {
@apply overflow-hidden w-full h-full px-4 pb-4 -mt-1
}
.api-modal-accordion-display {
@apply flex w-full h-full mt-2
}
.api-modal-table-arrangement {
@apply flex flex-col gap-5 h-fit
}
} }

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

@ -277,7 +277,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<Tabs <Tabs
value={activeTab} value={activeTab}
className="w-full h-full overflow-hidden text-center bg-muted rounded-md border" className="api-modal-tabs"
onValueChange={(value) => { onValueChange={(value) => {
setActiveTab(value); setActiveTab(value);
if (value === "3") { if (value === "3") {
@ -285,7 +285,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
} }
}} }}
> >
<div className="flex items-center justify-between px-2"> <div className="api-modal-tablist-div">
<TabsList> <TabsList>
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsTrigger key={index} value={index.toString()}> <TabsTrigger key={index} value={index.toString()}>
@ -309,7 +309,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => ( {tabs.map((tab, index) => (
<TabsContent <TabsContent
value={index.toString()} value={index.toString()}
className="overflow-hidden w-full h-full px-4 pb-4 -mt-1" className="api-modal-tabs-content"
key={index} // Remember to add a unique key prop key={index} // Remember to add a unique key prop
> >
{index < 3 ? ( {index < 3 ? (
@ -322,7 +322,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</SyntaxHighlighter> </SyntaxHighlighter>
) : index === 3 ? ( ) : index === 3 ? (
<> <>
<div className="flex w-full h-full mt-2"> <div className="api-modal-according-display">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg bg-muted h-[60vh]", "w-full rounded-lg bg-muted h-[60vh]",
@ -338,7 +338,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
trigger={t["data"]["id"]} trigger={t["data"]["id"]}
open={openAccordion} open={openAccordion}
> >
<div className="flex flex-col gap-5 h-fit"> <div className="api-modal-table-arrangement">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="border-input text-xs font-medium text-ring h-10"> <TableHeader className="border-input text-xs font-medium text-ring h-10">
<TableRow className="dark:border-b-muted"> <TableRow className="dark:border-b-muted">

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

@ -90,27 +90,27 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
<DialogDescription> <DialogDescription>
{data.node?.description} {data.node?.description}
<div className="flex pt-3"> <div className="flex pt-3">
<Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable> <Variable className="edit-node-modal-variable "></Variable>
<span className="text-sm font-semibold text-primary"> <span className="edit-node-modal-span">
Parameters Parameters
</span> </span>
</div> </div>
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<div className="flex h-fit max-h-[400px] w-full"> <div className="edit-node-modal-arrangement">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg border-[1px] border-input bg-background", "edit-node-modal-box",
nodeLength > limitScrollFieldsModal nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll" ? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
{nodeLength > 0 && ( {nodeLength > 0 && (
<div className="flex h-fit flex-col gap-5"> <div className="edit-node-modal-table">
<Table className="table-fixed bg-muted outline-1"> <Table className="table-fixed bg-muted outline-1">
<TableHeader className="h-10 border-input text-xs font-medium text-ring"> <TableHeader className="edit-node-modal-table-header">
<TableRow className=""> <TableRow className="">
<TableHead className="h-7 text-center">PARAM</TableHead> <TableHead className="h-7 text-center">PARAM</TableHead>
<TableHead className="h-7 p-0 text-center"> <TableHead className="h-7 p-0 text-center">

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

@ -45,11 +45,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-ring bg-opacity-75 transition-opacity" /> <div className="node-modal-div" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="node-modal-dialog-arrangement">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="node-modal-dialog-div">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -59,11 +59,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8"> <Dialog.Panel className="node-modal-dialog-panel">
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block"> <div className=" node-modal-dialog-panel-div">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-accent-foreground" className="node-modal-dialog-button"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
@ -72,30 +72,30 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<X className="h-6 w-6" aria-hidden="true" /> <X className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="node-modal-dialog-icon-div">
<div className="z-10 flex w-full justify-center pb-4 shadow-sm"> <div className="node-modal-icon-arrangement">
<Icon <Icon
strokeWidth={1.5} strokeWidth={1.5}
className="mt-4 h-10 w-10 rounded p-1" className="node-modal-icon"
style={{ style={{
color: color:
nodeColors[types[data.type]] ?? nodeColors.unknown, nodeColors[types[data.type]] ?? nodeColors.unknown,
}} }}
/> />
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="node-modal-title-div">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium leading-10 text-foreground" className="node-modal-title"
> >
{data.type} {data.type}
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4"> <div className="node-modal-template-div">
<div className="flex h-[445px] w-full"> <div className="flex-max-width h-[445px]">
<div <div
className={classNames( className={classNames(
"w-full rounded-lg bg-background px-4 shadow sm:p-4", "node-modal-template",
Object.keys(data.node.template).filter( Object.keys(data.node.template).filter(
(t) => (t) =>
t.charAt(0) !== "_" && t.charAt(0) !== "_" &&
@ -106,7 +106,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
: "overflow-hidden" : "overflow-hidden"
)} )}
> >
<div className="flex h-full flex-col gap-5"> <div className="node-modal-template-column">
{Object.keys(data.node.template) {Object.keys(data.node.template)
.filter( .filter(
(t) => (t) =>
@ -144,10 +144,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
</div> </div>
</div> </div>
</div> </div>
<div className="flex w-full flex-row-reverse bg-input px-4 pb-3"> <div className="node-modal-button-box">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-status-red px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm" className="node-modal-button"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}

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

@ -52,21 +52,21 @@ export default function ChatInput({
lockChat lockChat
? " bg-input text-foreground " ? " bg-input text-foreground "
: " bg-background text-foreground ", : " bg-background text-foreground ",
"form-input block w-full rounded-md border-ring pr-10 custom-scroll sm:text-sm" + "chat-input-modal-txtarea" +
" input-primary " " input-primary "
)} )}
placeholder={"Send a message..."} placeholder={"Send a message..."}
/> />
<div className="absolute bottom-0.5 right-3"> <div className="chat-input-modal-div">
<button disabled={lockChat} onClick={() => sendMessage()}> <button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? ( {lockChat ? (
<Lock <Lock
className="h-5 w-5 animate-pulse text-ring" className="chat-input-modal-lock"
aria-hidden="true" aria-hidden="true"
/> />
) : ( ) : (
<Send <Send
className="h-5 w-5 text-ring hover:text-muted-foreground " className="chat-input-modal-send "
aria-hidden="true" aria-hidden="true"
/> />
)} )}

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

@ -48,19 +48,19 @@ export const CodeBlock: FC<Props> = memo(({ language, value }) => {
}; };
return ( return (
<div className="codeblock font-sans text-[16px]"> <div className="codeblock font-sans text-[16px]">
<div className="flex items-center justify-between px-4 py-1.5"> <div className="code-block-modal">
<span className="text-xs lowercase text-background">{language}</span> <span className="code-block-modal-span">{language}</span>
<div className="flex items-center"> <div className="flex items-center">
<button <button
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background" className="code-block-modal-button"
onClick={copyToClipboard} onClick={copyToClipboard}
> >
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />} {isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
{isCopied ? "Copied!" : "Copy code"} {isCopied ? "Copied!" : "Copy code"}
</button> </button>
<button <button
className="flex items-center rounded bg-none p-1 text-xs text-background" className="code-block-modal-button"
onClick={downloadAsFile} onClick={downloadAsFile}
> >
<IconDownload size={18} /> <IconDownload size={18} />

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

@ -31,27 +31,27 @@ export default function ChatMessage({
return ( return (
<div <div
className={classNames( className={classNames(
"flex w-full py-2 pl-2", "chat-message-modal",
chat.isSend ? "bg-background " : "bg-input" chat.isSend ? "bg-background " : "bg-input"
)} )}
> >
<div <div
className={classNames( className={classNames(
"my-3 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full" "chat-message-modal-div"
)} )}
> >
{!chat.isSend && ( {!chat.isSend && (
<div className="relative h-8 w-8"> <div className="relative h-8 w-8">
<img <img
className={ className={
"absolute scale-150 transition-opacity duration-500 " + "chat-message-modal-img " +
(lockChat ? "opacity-100" : "opacity-0") (lockChat ? "opacity-100" : "opacity-0")
} }
src={lastMessage ? AiIcon : AiIconStill} src={lastMessage ? AiIcon : AiIconStill}
/> />
<img <img
className={ className={
"absolute scale-150 transition-opacity duration-500 " + "chat-message-modal-img " +
(lockChat ? "opacity-0" : "opacity-100") (lockChat ? "opacity-0" : "opacity-100")
} }
src={AiIconStill} src={AiIconStill}
@ -61,12 +61,12 @@ export default function ChatMessage({
{chat.isSend && <User2 className="-mb-1 h-6 w-6 text-primary " />} {chat.isSend && <User2 className="-mb-1 h-6 w-6 text-primary " />}
</div> </div>
{!chat.isSend ? ( {!chat.isSend ? (
<div className="flex w-full items-center text-start"> <div className="chat-message-modal-display">
<div className="relative inline-block w-full text-start text-sm font-normal text-muted-foreground"> <div className="chat-message-modal-text">
{hidden && chat.thought && chat.thought !== "" && ( {hidden && chat.thought && chat.thought !== "" && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className="absolute -left-2 -top-1 cursor-pointer" className="chat-message-modal-icon-div"
> >
<MessageCircle className="h-5 w-5 animate-bounce " /> <MessageCircle className="h-5 w-5 animate-bounce " />
</div> </div>
@ -74,15 +74,14 @@ export default function ChatMessage({
{chat.thought && chat.thought !== "" && !hidden && ( {chat.thought && chat.thought !== "" && !hidden && (
<div <div
onClick={() => setHidden((prev) => !prev)} onClick={() => setHidden((prev) => !prev)}
className=" ml-3 inline-block h-full w-[95%] cursor-pointer overflow-scroll rounded-md className=" chat-message-modal-thought"
border border-ring bg-muted px-2 pb-3 pt-3 text-start text-muted-foreground scrollbar-hide"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(convert.toHtml(chat.thought)), __html: DOMPurify.sanitize(convert.toHtml(chat.thought)),
}} }}
></div> ></div>
)} )}
{chat.thought && chat.thought !== "" && !hidden && <br></br>} {chat.thought && chat.thought !== "" && !hidden && <br></br>}
<div className="w-full px-4 pb-3 pr-8 pt-3"> <div className="chat-message-modal-markdown">
<div className="w-full"> <div className="w-full">
<div className="w-full"> <div className="w-full">
<ReactMarkdown <ReactMarkdown
@ -94,7 +93,7 @@ export default function ChatMessage({
if (children.length) { if (children.length) {
if (children[0] == "▍") { if (children[0] == "▍") {
return ( return (
<span className="mt-1 animate-pulse cursor-default"> <span className="chat-message-modal-markdown-span">
▍ ▍
</span> </span>
); );
@ -147,7 +146,7 @@ export default function ChatMessage({
</div> </div>
) : ( ) : (
<div className="flex w-full items-center"> <div className="flex w-full items-center">
<div className="inline-block px-3 text-start text-muted-foreground "> <div className="chat-message-modal-alert ">
{message.split("\n").map((line, index) => ( {message.split("\n").map((line, index) => (
<span key={index} className="text-muted-foreground "> <span key={index} className="text-muted-foreground ">
{line} {line}

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

@ -37,9 +37,9 @@ export default function FileCard({ fileName, content, fileType }) {
/> />
{isHovered && ( {isHovered && (
<div <div
className={`absolute right-0 top-0 rounded-bl-lg bg-muted px-1 text-sm font-bold text-foreground `} className={`file-card-modal-image-div `}
> >
<button className="px-2 py-1 text-ring " onClick={handleDownload}> <button className="file-card-modal-image-button " onClick={handleDownload}>
<DownloadCloud className="h-5 w-5 text-current hover:scale-110" /> <DownloadCloud className="h-5 w-5 text-current hover:scale-110" />
</button> </button>
</div> </div>
@ -51,9 +51,9 @@ export default function FileCard({ fileName, content, fileType }) {
return ( return (
<button <button
onClick={handleDownload} onClick={handleDownload}
className="flex w-1/2 items-center justify-between rounded border border-ring bg-muted px-2 py-2 text-foreground shadow hover:drop-shadow-lg" className="file-card-modal-button"
> >
<div className="mr-2 flex w-full items-center gap-2 text-current"> <div className="file-card-modal-div">
{" "} {" "}
{fileType === "image" ? ( {fileType === "image" ? (
<img <img
@ -64,10 +64,10 @@ export default function FileCard({ fileName, content, fileType }) {
) : ( ) : (
<File className="h-8 w-8" /> <File className="h-8 w-8" />
)} )}
<div className="flex flex-col items-start"> <div className="file-card-modal-footer">
{" "} {" "}
<div className="truncate text-sm text-current">{fileName}</div> <div className="file-card-modal-name">{fileName}</div>
<div className="truncate text-xs text-ring">{fileType}</div> <div className="file-card-modal-type">{fileType}</div>
</div> </div>
<DownloadCloud className="ml-auto h-6 w-6 text-current" /> <DownloadCloud className="ml-auto h-6 w-6 text-current" />
</div> </div>

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

@ -333,11 +333,11 @@ export default function ChatModal({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-black bg-opacity-80 backdrop-blur-sm transition-opacity" /> <div className="send-message-modal-transition" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="chat-modal-box">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="chat-modal-box-div">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -347,24 +347,24 @@ export default function ChatModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className=" relative flex h-[95%] w-[690px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl drop-shadow-2xl transition-all"> <Dialog.Panel className=" chat-modal-dialog-panel">
<div className="relative w-full p-4"> <div className="chat-modal-dialog-panel-div">
<button <button
onClick={() => clearChat()} onClick={() => clearChat()}
className="absolute right-10 top-2 z-30 text-muted-foreground hover:text-status-red" className="chat-modal-dialog-trash-panel"
> >
<Eraser className="h-4 w-4" /> <Eraser className="h-4 w-4" />
</button> </button>
<button <button
onClick={() => setModalOpen(false)} onClick={() => setModalOpen(false)}
className="absolute right-2 top-1.5 z-30 text-muted-foreground hover:text-status-red" className="chat-modal-dialog-x-panel"
> >
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </div>
<div <div
ref={messagesRef} ref={messagesRef}
className="flex h-full w-full flex-col items-center overflow-scroll border-t bg-background scrollbar-hide" className="chat-modal-dialog-history"
> >
{chatHistory.length > 0 ? ( {chatHistory.length > 0 ? (
chatHistory.map((c, i) => ( chatHistory.map((c, i) => (
@ -376,7 +376,7 @@ export default function ChatModal({
/> />
)) ))
) : ( ) : (
<div className="flex h-full w-full flex-col items-center justify-center text-center align-middle"> <div className="chat-modal-dialog-span-box">
<span> <span>
👋{" "} 👋{" "}
<span className="text-lg text-muted-foreground"> <span className="text-lg text-muted-foreground">
@ -384,7 +384,7 @@ export default function ChatModal({
</span> </span>
</span> </span>
<br /> <br />
<div className="w-2/4 rounded-md border border-input bg-muted px-6 py-8"> <div className="chat-modal-dialog-desc">
<span className="text-base text-ring"> <span className="text-base text-ring">
Start a conversation and click the agent’s thoughts{" "} Start a conversation and click the agent’s thoughts{" "}
<span> <span>
@ -397,8 +397,8 @@ export default function ChatModal({
)} )}
<div ref={ref}></div> <div ref={ref}></div>
</div> </div>
<div className="flex w-full flex-col items-center justify-between border-t bg-background p-3"> <div className="chat-modal-input-div">
<div className="relative mt-1 w-full rounded-md shadow-sm"> <div className="chat-modal-input">
<ChatInput <ChatInput
chatValue={chatValue} chatValue={chatValue}
lockChat={lockChat} lockChat={lockChat}

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

@ -61,7 +61,7 @@ export default function CodeAreaModal({
<DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription> <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
</DialogHeader> </DialogHeader>
<div className="mt-2 flex h-full w-full"> <div className="code-area-modal-editor-div">
<AceEditor <AceEditor
value={code} value={code}
mode="python" mode="python"

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

@ -77,7 +77,7 @@ export default function ButtonBox({
<button disabled={deactivate} onClick={onClick}> <button disabled={deactivate} onClick={onClick}>
<div <div
className={classNames( className={classNames(
"flex transform flex-col items-center justify-center rounded-lg border border-ring text-center shadow hover:scale-105 hover:shadow-lg", "button-box-modal-div",
bgColor, bgColor,
height, height,
width, width,

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

@ -76,10 +76,10 @@ export default function ImportModal() {
<DialogTitle className="flex items-center"> <DialogTitle className="flex items-center">
{showExamples && ( {showExamples && (
<> <>
<div className="absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block"> <div className="dialog-header-modal-div">
<button <button
type="button" type="button"
className="rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" className="dialog-header-modal-button disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
onClick={() => { onClick={() => {
setShowExamples(false); setShowExamples(false);
}} }}
@ -106,20 +106,20 @@ export default function ImportModal() {
<div <div
className={classNames( className={classNames(
"h-full w-full overflow-y-auto scrollbar-hide", "dialog-modal-examples-div",
showExamples && !loadingExamples showExamples && !loadingExamples
? "start mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto" ? "dialog-modal-example-true"
: "flex flex-row items-center justify-center" : "dialog-modal-example-false"
)} )}
> >
{!showExamples && ( {!showExamples && (
<div className="flex h-full w-full items-center justify-evenly"> <div className="dialog-modal-button-box-div">
<ButtonBox <ButtonBox
size="big" size="big"
bgColor="bg-medium-emerald " bgColor="bg-medium-emerald "
description="Prebuilt Examples" description="Prebuilt Examples"
icon={ icon={
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" /> <DocumentDuplicateIcon className="document-icon" />
} }
onClick={() => { onClick={() => {
setShowExamples(true); setShowExamples(true);
@ -133,7 +133,7 @@ export default function ImportModal() {
bgColor="bg-almost-dark-blue " bgColor="bg-almost-dark-blue "
description="Import from Local" description="Import from Local"
icon={ icon={
<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" /> <ComputerDesktopIcon className="document-icon" />
} }
onClick={() => { onClick={() => {
uploadFlow(); uploadFlow();
@ -145,7 +145,7 @@ export default function ImportModal() {
</div> </div>
)} )}
{showExamples && loadingExamples && ( {showExamples && loadingExamples && (
<div className="flex items-center justify-center align-middle"> <div className="loading-component-div">
<LoadingComponent remSize={30} /> <LoadingComponent remSize={30} />
</div> </div>
)} )}
@ -175,11 +175,11 @@ export default function ImportModal() {
</div> </div>
<DialogFooter> <DialogFooter>
<div className="mt-2 flex w-full items-center justify-center"> <div className="dialog-modal-footer">
<a <a
href="https://github.com/logspace-ai/langflow_examples" href="https://github.com/logspace-ai/langflow_examples"
target="_blank" target="_blank"
className="flex items-center justify-center text-muted-foreground " className="dialog-modal-footer-link "
rel="noreferrer" rel="noreferrer"
> >
<svg <svg

36
src/frontend/src/modals/promptModal/index.tsx
View file

@ -44,11 +44,11 @@ export default function PromptAreaModal({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-ring bg-opacity-75 transition-opacity" /> <div className="node-modal-div" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="node-modal-dialog-arrangement">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="node-modal-dialog-div">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -58,11 +58,11 @@ export default function PromptAreaModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8"> <Dialog.Panel className="node-modal-dialog-panel">
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block"> <div className=" node-modal-dialog-panel-div ">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-accent-foreground" className="node-modal-dialog-button"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
@ -71,29 +71,29 @@ export default function PromptAreaModal({
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="node-modal-dialog-icon-div">
<div className="z-10 flex w-full justify-center pb-4 shadow-sm"> <div className="node-modal-icon-arrangement">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10"> <div className="prompt-modal-icon-box">
<DocumentTextIcon <DocumentTextIcon
className="h-6 w-6 text-almost-medium-blue" className="prompt-modal-icon"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="node-modal-title-div ">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium leading-10 text-foreground" className="node-modal-title"
> >
Edit Prompt Edit Prompt
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="flex h-full w-full flex-row items-center justify-center gap-4 overflow-auto bg-accent p-4"> <div className="prompt-modal-txtarea-arrangement">
<div className="flex h-full w-full"> <div className="flex-max-width h-full">
<div className="h-full w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6"> <div className="prompt-modal-txtarea-box">
<textarea <textarea
ref={ref} ref={ref}
className="form-input h-full w-full rounded-lg border-ring" className="prompt-modal-txtarea"
value={myValue} value={myValue}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);
@ -103,10 +103,10 @@ export default function PromptAreaModal({
</div> </div>
</div> </div>
</div> </div>
<div className="flex w-full flex-row-reverse bg-input px-4 pb-3"> <div className="node-modal-button-box">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm" className="node-modal-button"
onClick={() => { onClick={() => {
checkPrompt(myValue) checkPrompt(myValue)
.then((apiReturn) => { .then((apiReturn) => {

34
src/frontend/src/modals/textAreaModal/index.tsx
View file

@ -43,11 +43,11 @@ export default function TextAreaModal({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-ring bg-opacity-75 transition-opacity" /> <div className="node-modal-div" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto"> <div className="node-modal-dialog-arrangement">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"> <div className="node-modal-dialog-div">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -57,11 +57,11 @@ export default function TextAreaModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative flex h-[600px] w-[700px] transform flex-col justify-between overflow-hidden rounded-lg bg-background text-left shadow-xl transition-all sm:my-8"> <Dialog.Panel className="node-modal-dialog-panel">
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block"> <div className=" node-modal-dialog-panel-div">
<button <button
type="button" type="button"
className="rounded-md text-ring hover:text-accent-foreground" className="node-modal-dialog-button"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}
@ -70,29 +70,29 @@ export default function TextAreaModal({
<XMarkIcon className="h-6 w-6" aria-hidden="true" /> <XMarkIcon className="h-6 w-6" aria-hidden="true" />
</button> </button>
</div> </div>
<div className="flex h-full w-full flex-col items-center justify-center"> <div className="node-modal-dialog-icon-div">
<div className="z-10 flex w-full justify-center pb-4 shadow-sm"> <div className="node-modal-icon-arrangement">
<div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-almost-light-blue sm:mx-0 sm:h-10 sm:w-10"> <div className="prompt-modal-icon-box">
<ClipboardDocumentListIcon <ClipboardDocumentListIcon
className="h-6 w-6 text-almost-medium-blue" className="prompt-modal-icon"
aria-hidden="true" aria-hidden="true"
/> />
</div> </div>
<div className="mt-4 text-center sm:ml-4 sm:text-left"> <div className="node-modal-title-div">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium leading-10 text-foreground" className="node-modal-title"
> >
Edit text Edit text
</Dialog.Title> </Dialog.Title>
</div> </div>
</div> </div>
<div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4"> <div className="txtarea-modal-arrangement">
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="w-full overflow-hidden rounded-lg bg-background px-4 py-5 shadow sm:p-6"> <div className="txtarea-modal-box">
<textarea <textarea
ref={ref} ref={ref}
className="form-input h-full w-full form-primary" className="txtarea-modal-input"
value={myValue} value={myValue}
onChange={(e) => { onChange={(e) => {
setMyValue(e.target.value); setMyValue(e.target.value);
@ -102,10 +102,10 @@ export default function TextAreaModal({
</div> </div>
</div> </div>
</div> </div>
<div className="flex w-full flex-row-reverse bg-input px-4 pb-3"> <div className="node-modal-button-box">
<button <button
type="button" type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-background shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-ring focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm" className="node-modal-button"
onClick={() => { onClick={() => {
setModalOpen(false); setModalOpen(false);
}} }}