From 7fc86a52af3916f811328ac297c5f934ecbe06c4 Mon Sep 17 00:00:00 2001 From: Igor Carvalho Date: Thu, 6 Jul 2023 11:14:48 -0300 Subject: [PATCH 1/2] feat: Add modals tailwind constants --- src/frontend/src/App.tsx | 2 +- .../src/components/toggleComponent/index.tsx | 8 +- src/frontend/src/index.css | 300 ++++++++++++++++++ src/frontend/src/modals/ApiModal/index.tsx | 10 +- .../src/modals/EditNodeModal/index.tsx | 12 +- src/frontend/src/modals/NodeModal/index.tsx | 34 +- .../src/modals/chatModal/chatInput/index.tsx | 8 +- .../chatModal/chatMessage/codeBlock/index.tsx | 8 +- .../modals/chatModal/chatMessage/index.tsx | 23 +- .../modals/chatModal/fileComponent/index.tsx | 14 +- src/frontend/src/modals/chatModal/index.tsx | 24 +- .../src/modals/codeAreaModal/index.tsx | 2 +- .../modals/importModal/buttonBox/index.tsx | 2 +- src/frontend/src/modals/importModal/index.tsx | 22 +- src/frontend/src/modals/promptModal/index.tsx | 36 +-- .../src/modals/textAreaModal/index.tsx | 34 +- 16 files changed, 419 insertions(+), 120 deletions(-) diff --git a/src/frontend/src/App.tsx b/src/frontend/src/App.tsx index f4df0f00b..4497c9af0 100644 --- a/src/frontend/src/App.tsx +++ b/src/frontend/src/App.tsx @@ -139,7 +139,7 @@ export default function App() {
{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 1582cc137..e116b2c17 100644 --- a/src/frontend/src/index.css +++ b/src/frontend/src/index.css @@ -592,4 +592,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 d069763ff..e5015bc46 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -277,7 +277,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { { setActiveTab(value); if (value === "3") { @@ -285,7 +285,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { } }} > -
+
{tabs.map((tab, index) => ( @@ -309,7 +309,7 @@ export default function ApiModal({ flow }: { flow: FlowType }) { {tabs.map((tab, index) => ( {index < 3 ? ( @@ -322,7 +322,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 1d0d912eb..f0337f71c 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 83b672adf..3cc9c354a 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" > -
+
-
-
+
+
- -
+ +
-
-
+
+
-
+
{data.type}
-
-
+
+
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 }) {
-
+
@@ -51,9 +51,9 @@ export default function FileCard({ fileName, content, fileType }) { return (
{chatHistory.length > 0 ? ( chatHistory.map((c, i) => ( @@ -376,7 +376,7 @@ export default function ChatModal({ /> )) ) : ( -
+
👋{" "} @@ -384,7 +384,7 @@ export default function ChatModal({
-
+
Start a conversation and click the agent’s thoughts{" "} @@ -397,8 +397,8 @@ export default function ChatModal({ )}
-
-
+
+
{CODE_PROMPT_DIALOG_SUBTITLE} -
+
{showExamples && ( <> -
+
-
-
-
+
+
+
-
+
Edit Prompt
-
-
-
+
+
+