Styling InputBar for Preview

dust-tt · Mar 7, 2024 · 1f62f44 · 1f62f44
1 parent e40e453
commit 1f62f44
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 16 deletions.
diff --git a/front/components/assistant/TryAssistant.tsx b/front/components/assistant/TryAssistant.tsx
@@ -149,18 +149,17 @@ export function TryAssistant({
             </div>
           )}
 
-          <div className="absolute bottom-4 w-full">
-            <div className="">
-              <AssistantInputBar
-                owner={owner}
-                onSubmit={handleSubmit}
-                stickyMentions={stickyMentions}
-                conversationId={conversation?.sId || null}
-                additionalAgentConfiguration={assistant}
-                hideQuickActions
-                disableAutoFocus
-              />
-            </div>
+          <div className="absolute bottom-0 w-full">
+            <AssistantInputBar
+              owner={owner}
+              onSubmit={handleSubmit}
+              stickyMentions={stickyMentions}
+              conversationId={conversation?.sId || null}
+              additionalAgentConfiguration={assistant}
+              hideQuickActions
+              disableAutoFocus
+              isFloating={false}
+            />
           </div>
         </GenerationContextProvider>
       </div>

diff --git a/front/components/assistant/conversation/input_bar/InputBar.tsx b/front/components/assistant/conversation/input_bar/InputBar.tsx
@@ -48,6 +48,7 @@ export function AssistantInputBar({
   additionalAgentConfiguration,
   hideQuickActions,
   disableAutoFocus = false,
+  isFloating = true,
 }: {
   owner: WorkspaceType;
   onSubmit: (
@@ -60,6 +61,7 @@ export function AssistantInputBar({
   additionalAgentConfiguration?: LightAgentConfigurationType;
   hideQuickActions: boolean;
   disableAutoFocus: boolean;
+  isFloating?: boolean;
 }) {
   const { mutate } = useSWRConfig();
 
@@ -261,14 +263,18 @@ export function AssistantInputBar({
         </div>
       )}
 
-      <div className="flex flex-1 px-0 sm:px-4">
+      <div
+        className={classNames("flex flex-1 px-0", isFloating ? "sm:px-4" : "")}
+      >
         <div className="flex w-full flex-1 flex-col items-end self-stretch sm:flex-row">
           <div
             className={classNames(
               "relative flex w-full flex-1 flex-col items-stretch gap-0 self-stretch pl-4 sm:flex-row",
               "border-struture-200 border-t bg-white/90 backdrop-blur focus-within:border-structure-300",
               "transition-all duration-300",
-              "sm:rounded-3xl sm:border-b sm:border-l sm:border-r sm:border-element-500 sm:focus-within:border-action-300 sm:focus-within:shadow-md sm:focus-within:ring-1",
+              isFloating
+                ? "sm:rounded-3xl sm:border-b sm:border-l sm:border-r sm:border-element-500 sm:focus-within:border-action-300 sm:focus-within:shadow-md sm:focus-within:ring-1"
+                : "",
               isAnimating ? "animate-shake" : ""
             )}
           >

diff --git a/front/components/assistant/conversation/input_bar/InputBarContainer.tsx b/front/components/assistant/conversation/input_bar/InputBarContainer.tsx
@@ -95,7 +95,10 @@ const InputBarContainer = ({
   );
 
   return (
-    <div className="relative flex flex-1 flex-col sm:flex-row">
+    <div
+      id="InputBarContainer"
+      className="relative flex flex-1 flex-col sm:flex-row"
+    >
       <EditorContent
         editor={editor}
         className={classNames(

diff --git a/front/components/assistant_builder/AssistantBuilder.tsx b/front/components/assistant_builder/AssistantBuilder.tsx
@@ -519,7 +519,7 @@ export default function AssistantBuilder({
           rightPanel={
             <div
               className={classNames(
-                "flex h-full w-full rounded-xl border border-structure-100 bg-structure-50 transition-all",
+                "flex h-full w-full overflow-hidden rounded-xl border border-structure-200 bg-structure-50 transition-all",
                 shouldAnimatePreviewDrawer &&
                   previewDrawerOpenedAt != null &&
                   // Only animate the reload if the drawer has been open for at least 1 second.