{alertsList.map((alert) => (
diff --git a/src/frontend/src/components/toggleComponent/index.tsx b/src/frontend/src/components/toggleComponent/index.tsx
index 760d8957b..c7b72a025 100644
--- a/src/frontend/src/components/toggleComponent/index.tsx
+++ b/src/frontend/src/components/toggleComponent/index.tsx
@@ -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 "
)}
>
Use setting
@@ -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"
>
@@ -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"
>
diff --git a/src/frontend/src/index.css b/src/frontend/src/index.css
index 9420df398..1e57d5d67 100644
--- a/src/frontend/src/index.css
+++ b/src/frontend/src/index.css
@@ -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
+ }
+
+
}
\ No newline at end of file
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index cd20b0621..082016f7e 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -276,7 +276,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{
setActiveTab(value);
if (value === "3") {
@@ -284,7 +284,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
}
}}
>
-
+
{tabs.map((tab, index) => (
@@ -308,7 +308,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => (
{index < 3 ? (
@@ -321,7 +321,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
) : index === 3 ? (
<>
-
+
-
+
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index ad072fec1..875c54186 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -90,27 +90,27 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) {
{data.node?.description}
-
-
+
+
Parameters
-
+
limitScrollFieldsModal
? "overflow-scroll overflow-x-hidden custom-scroll"
: "overflow-hidden",
)}
>
{nodeLength > 0 && (
-
+
-
+
PARAM
diff --git a/src/frontend/src/modals/NodeModal/index.tsx b/src/frontend/src/modals/NodeModal/index.tsx
index 6244532f1..d61d25c38 100644
--- a/src/frontend/src/modals/NodeModal/index.tsx
+++ b/src/frontend/src/modals/NodeModal/index.tsx
@@ -45,11 +45,11 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
-
+
-
-
+
+
-
-
+
+
-
-
+
+
-
-
-
+
+
t.charAt(0) !== "_" &&
@@ -106,7 +106,7 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
: "overflow-hidden",
)}
>
-
+
{Object.keys(data.node.template)
.filter(
(t) =>
@@ -144,10 +144,10 @@ export default function NodeModal({ data }: { data: NodeDataType }) {
-
+