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

Add modals tailwind constants (#620)

Browse source 
Improves code verbosity and organization of Tailwind classes.
This commit is contained in:
anovazzi1 2023-07-06 11:51:47 -03:00 • committed by GitHub
commit 8f1b188775
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 429 additions and 121 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>
<div></div>
<div
className="fixed bottom-5 left-5 flex flex-col-reverse"
className="app-div"
style={{ zIndex: 999 }}
>
{alertsList.map((alert) => (

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

@ -22,14 +22,14 @@ export default function ToggleComponent({
}}
className={classNames(
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={classNames(
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"
)}
>
@ -38,7 +38,7 @@ export default function ToggleComponent({
enabled
? "opacity-0 duration-100 ease-out"
: "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"
></span>
@ -47,7 +47,7 @@ export default function ToggleComponent({
enabled
? "opacity-100 duration-200 ease-in"
: "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"
></span>

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

@ -557,8 +557,17 @@ The cursor: default; property value restores the browser's default cursor style
.header-end-display {
@apply ml-auto mr-2 flex items-center gap-5
}
.header-github-link-box {
@apply border border-input h-9 px-3 pr-0 rounded-md inline-flex shadow-sm items-center justify-center
}
.header-github-link {
@apply inline-flex h-9 items-center justify-center rounded-md border border-input px-3 pr-0 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
@apply text-sm font-medium disabled:opacity-50 disabled:pointer-events-none ring-offset-background text-muted-foreground header-github-link-box
}
.header-github-link:focus-visible {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
}
.header-github-link:hover {
@apply hover:bg-accent hover:text-accent-foreground
}
.header-github-display {
@apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm
@ -592,4 +601,304 @@ The cursor: default; property value restores the browser's default cursor style
.input-file-component {
@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

@ -276,7 +276,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
<Tabs
value={activeTab}
className="h-full w-full overflow-hidden rounded-md border bg-muted text-center"
className="api-modal-tabs"
onValueChange={(value) => {
setActiveTab(value);
if (value === "3") {
@ -284,7 +284,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
}
}}
>
<div className="flex items-center justify-between px-2">
<div className="api-modal-tablist-div">
<TabsList>
{tabs.map((tab, index) => (
<TabsTrigger key={index} value={index.toString()}>
@ -308,7 +308,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => (
<TabsContent
value={index.toString()}
className="-mt-1 h-full w-full overflow-hidden px-4 pb-4"
className="api-modal-tabs-content"
key={index} // Remember to add a unique key prop
>
{index < 3 ? (
@ -321,7 +321,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
</SyntaxHighlighter>
) : index === 3 ? (
<>
<div className="mt-2 flex h-full w-full">
<div className="api-modal-according-display">
<div
className={classNames(
"h-[60vh] w-full rounded-lg bg-muted",
@ -337,7 +337,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
trigger={t["data"]["id"]}
open={openAccordion}
>
<div className="flex h-fit flex-col gap-5">
<div className="api-modal-table-arrangement">
<Table className="table-fixed bg-muted outline-1">
<TableHeader className="h-10 border-input text-xs font-medium text-ring">
<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>
{data.node?.description}
<div className="flex pt-3">
<Variable className="h-5 w-5 stroke-2 pe-1 text-muted-foreground "></Variable>
<span className="text-sm font-semibold text-primary">
<Variable className="edit-node-modal-variable "></Variable>
<span className="edit-node-modal-span">
Parameters
</span>
</div>
</DialogDescription>
</DialogHeader>
<div className="flex h-fit max-h-[400px] w-full">
<div className="edit-node-modal-arrangement">
<div
className={classNames(
"w-full rounded-lg border-[1px] border-input bg-background",
"edit-node-modal-box",
nodeLength > limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden",
)}
>
{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">
<TableHeader className="h-10 border-input text-xs font-medium text-ring">
<TableHeader className="edit-node-modal-table-header">
<TableRow className="">
<TableHead className="h-7 text-center">PARAM</TableHead>
<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"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-ring bg-opacity-75 transition-opacity" />
<div className="node-modal-div" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<div className="node-modal-dialog-arrangement">
<div className="node-modal-dialog-div">
<Transition.Child
as={Fragment}
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"
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">
<div className=" absolute right-0 top-0 z-50 hidden pr-4 pt-4 sm:block">
<Dialog.Panel className="node-modal-dialog-panel">
<div className=" node-modal-dialog-panel-div">
<button
type="button"
className="rounded-md text-ring hover:text-accent-foreground"
className="node-modal-dialog-button"
onClick={() => {
setModalOpen(false);
}}
@ -72,30 +72,30 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
<X className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="flex h-full w-full flex-col items-center justify-center">
<div className="z-10 flex w-full justify-center pb-4 shadow-sm">
<div className="node-modal-dialog-icon-div">
<div className="node-modal-icon-arrangement">
<Icon
strokeWidth={1.5}
className="mt-4 h-10 w-10 rounded p-1"
className="node-modal-icon"
style={{
color:
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
as="h3"
className="text-lg font-medium leading-10 text-foreground"
className="node-modal-title"
>
{data.type}
</Dialog.Title>
</div>
</div>
<div className="flex h-full w-full flex-row items-center justify-center gap-4 bg-input p-4">
<div className="flex h-[445px] w-full">
<div className="node-modal-template-div">
<div className="flex-max-width h-[445px]">
<div
className={classNames(
"w-full rounded-lg bg-background px-4 shadow sm:p-4",
"node-modal-template",
Object.keys(data.node.template).filter(
(t) =>
t.charAt(0) !== "_" &&
@ -106,7 +106,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
: "overflow-hidden",
)}
>
<div className="flex h-full flex-col gap-5">
<div className="node-modal-template-column">
{Object.keys(data.node.template)
.filter(
(t) =>
@ -144,10 +144,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
</div>
</div>
</div>
<div className="flex w-full flex-row-reverse bg-input px-4 pb-3">
<div className="node-modal-button-box">
<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={() => {
setModalOpen(false);
}}

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

@ -51,21 +51,21 @@ export default function ChatInput({
lockChat
? " bg-input 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 "
)}
placeholder={"Send a message..."}
/>
<div className="absolute bottom-0.5 right-3">
<div className="chat-input-modal-div">
<button disabled={lockChat} onClick={() => sendMessage()}>
{lockChat ? (
<Lock
className="h-5 w-5 animate-pulse text-ring"
className="chat-input-modal-lock"
aria-hidden="true"
/>
) : (
<Send
className="h-5 w-5 text-ring hover:text-muted-foreground "
className="chat-input-modal-send "
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 (
<div className="codeblock font-sans text-[16px]">
<div className="flex items-center justify-between px-4 py-1.5">
<span className="text-xs lowercase text-background">{language}</span>
<div className="code-block-modal">
<span className="code-block-modal-span">{language}</span>
<div className="flex items-center">
<button
className="flex items-center gap-1.5 rounded bg-none p-1 text-xs text-background"
className="code-block-modal-button"
onClick={copyToClipboard}
>
{isCopied ? <IconCheck size={18} /> : <IconClipboard size={18} />}
{isCopied ? "Copied!" : "Copy code"}
</button>
<button
className="flex items-center rounded bg-none p-1 text-xs text-background"
className="code-block-modal-button"
onClick={downloadAsFile}
>
<IconDownload size={18} />

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

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

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

@ -37,9 +37,9 @@ export default function FileCard({ fileName, content, fileType }) {
/>
{isHovered && (
<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" />
</button>
</div>
@ -51,9 +51,9 @@ export default function FileCard({ fileName, content, fileType }) {
return (
<button
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" ? (
<img
@ -64,10 +64,10 @@ export default function FileCard({ fileName, content, fileType }) {
) : (
<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="truncate text-xs text-ring">{fileType}</div>
<div className="file-card-modal-name">{fileName}</div>
<div className="file-card-modal-type">{fileType}</div>
</div>
<DownloadCloud className="ml-auto h-6 w-6 text-current" />
</div>

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

@ -333,11 +333,11 @@ export default function ChatModal({
leaveFrom="opacity-100"
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>
<div className="fixed inset-0 z-10 overflow-y-auto">
<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 className="chat-modal-box-div">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
@ -347,24 +347,24 @@ export default function ChatModal({
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
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">
<div className="relative w-full p-4">
<Dialog.Panel className=" chat-modal-dialog-panel">
<div className="chat-modal-dialog-panel-div">
<button
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" />
</button>
<button
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" />
</button>
</div>
<div
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.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 className="text-lg text-muted-foreground">
@ -384,7 +384,7 @@ export default function ChatModal({
</span>
</span>
<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">
Start a conversation and click the agent’s thoughts{" "}
<span>
@ -397,8 +397,8 @@ export default function ChatModal({
)}
<div ref={ref}></div>
</div>
<div className="flex w-full flex-col items-center justify-between border-t bg-background p-3">
<div className="relative mt-1 w-full rounded-md shadow-sm">
<div className="chat-modal-input-div">
<div className="chat-modal-input">
<ChatInput
chatValue={chatValue}
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>
</DialogHeader>
<div className="mt-2 flex h-full w-full">
<div className="code-area-modal-editor-div">
<AceEditor
value={code}
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}>
<div
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,
height,
width,

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

@ -71,10 +71,10 @@ export default function ImportModal() {
<DialogTitle className="flex items-center">
{showExamples && (
<>
<div className="absolute left-0 top-2 z-50 hidden pl-4 pt-4 sm:block">
<div className="dialog-header-modal-div">
<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={() => {
setShowExamples(false);
}}
@ -101,20 +101,20 @@ export default function ImportModal() {
<div
className={classNames(
"h-full w-full overflow-y-auto scrollbar-hide",
"dialog-modal-examples-div",
showExamples && !loadingExamples
? "start mx-auto flex flex-row flex-wrap items-start justify-center overflow-auto"
: "flex flex-row items-center justify-center"
? "dialog-modal-example-true"
: "dialog-modal-example-false"
)}
>
{!showExamples && (
<div className="flex h-full w-full items-center justify-evenly">
<div className="dialog-modal-button-box-div">
<ButtonBox
size="big"
bgColor="bg-medium-emerald "
description="Prebuilt Examples"
icon={
<DocumentDuplicateIcon className="h-10 w-10 flex-shrink-0" />
<DocumentDuplicateIcon className="document-icon" />
}
onClick={() => {
setShowExamples(true);
@ -128,7 +128,7 @@ export default function ImportModal() {
bgColor="bg-almost-dark-blue "
description="Import from Local"
icon={
<ComputerDesktopIcon className="h-10 w-10 flex-shrink-0" />
<ComputerDesktopIcon className="document-icon" />
}
onClick={() => {
uploadFlow();
@ -140,7 +140,7 @@ export default function ImportModal() {
</div>
)}
{showExamples && loadingExamples && (
<div className="flex items-center justify-center align-middle">
<div className="loading-component-div">
<LoadingComponent remSize={30} />
</div>
)}
@ -173,11 +173,11 @@ export default function ImportModal() {
</div>
<DialogFooter>
<div className="mt-2 flex w-full items-center justify-center">
<div className="dialog-modal-footer">
<a
href="https://github.com/logspace-ai/langflow_examples"
target="_blank"
className="flex items-center justify-center text-muted-foreground "
className="dialog-modal-footer-link "
rel="noreferrer"
>
<svg

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

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

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

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