From 1f62f4417431abbf7959b41c4af52f6db1b57782 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A9douard=20wautier?= <edouardwautier@Ed-Pro.local>
Date: Thu, 7 Mar 2024 17:59:30 +0100
Subject: [PATCH] Styling InputBar for Preview

---
 front/components/assistant/TryAssistant.tsx   | 23 +++++++++----------
 .../conversation/input_bar/InputBar.tsx       | 10 ++++++--
 .../input_bar/InputBarContainer.tsx           |  5 +++-
 .../assistant_builder/AssistantBuilder.tsx    |  2 +-
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/front/components/assistant/TryAssistant.tsx b/front/components/assistant/TryAssistant.tsx
index ac3c96287f4d..8c594d1eb954 100644
--- 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
index 72f33bad8001..040c0396ee94 100644
--- 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
index 30b78dc929a7..d08674632ed5 100644
--- 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
index e5aec7c18884..b17ac8fe8842 100644
--- 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.