New Input correcting bugs

dust-tt · Dec 4, 2023 · 5ce5ad8 · 5ce5ad8
1 parent b28a01b
commit 5ce5ad8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 39 deletions.
diff --git a/front/components/assistant/conversation/InputBar.tsx b/front/components/assistant/conversation/InputBar.tsx
@@ -4,6 +4,7 @@ import {
   Avatar,
   Button,
   Citation,
+  FullscreenExitIcon,
   FullscreenIcon,
   IconButton,
   StopIcon,
@@ -213,6 +214,11 @@ export function AssistantInputBar({
   ) => void;
   stickyMentions?: AgentMention[];
 }) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+  const [isInputFocused, setIsInputFocused] = useState(false);
   const [agentListVisible, setAgentListVisible] = useState(false);
   const [agentListFilter, setAgentListFilter] = useState("");
   const [agentListPosition, setAgentListPosition] = useState<{
@@ -409,50 +415,58 @@ export function AssistantInputBar({
         ref={agentListRef}
         position={agentListPosition}
       />
-      <div className="flex flex-1 flex-row items-end px-4">
+      <div
+        className={classNames(
+          "pointer-events-auto mb-4 flex w-full flex-1 flex-row items-end px-4 md:mb-8",
+          isFullscreen ? "mt-24" : "self-end"
+        )}
+      >
         <div
           className={classNames(
-            "relative flex min-h-28 flex-1 flex-row items-stretch gap-3 pb-10 pl-5 pr-14 pt-4",
+            "flex flex-1 flex-row items-stretch gap-3 pl-5 pr-14 transition-all",
             "s-backdrop-blur border-2  border-element-500 bg-white/80 focus-within:border-action-400",
             "rounded-3xl transition-all duration-300 box-shadow-lg",
+            isFullscreen ? "h-full" : "max-h-64 min-h-28",
             isAnimating
               ? "animate-shake border-action-500 focus-within:border-action-800"
               : ""
           )}
         >
-          <div className="flex flex-1 flex-col gap-y-2">
+          <div className="flex flex-1 flex-col gap-y-0">
+            {contentFragmentFilename && contentFragmentBody && (
+              <div className="border-b border-structure-300/50 pb-3 pt-5">
+                <Citation
+                  title={contentFragmentFilename}
+                  description={contentFragmentBody?.substring(0, 100)}
+                  onClose={() => {
+                    setContentFragmentBody(undefined);
+                    setContentFragmentFilename(undefined);
+                  }}
+                />
+              </div>
+            )}
             <div
               className={classNames(
                 // This div is placeholder text for the contenteditable
                 contentEditableClasses,
-                "absolute -z-10 text-element-600 dark:text-element-600-dark",
-                empty ? "" : "hidden"
+                "-z-10 pt-3.5 text-element-600 dark:text-element-600-dark",
+                empty && !isInputFocused ? "" : "hidden" // Only show when empty and not focused
               )}
             >
               Ask a question or get some @help
             </div>
-
-            {contentFragmentFilename && contentFragmentBody && (
-              <Citation
-                title={contentFragmentFilename}
-                description={contentFragmentBody?.substring(0, 100)}
-                onClose={() => {
-                  setContentFragmentBody(undefined);
-                  setContentFragmentFilename(undefined);
-                }}
-              />
-            )}
-
             <div
               className={classNames(
                 contentEditableClasses,
                 "scrollbar-hide",
                 "overflow-y-auto",
-                "max-h-64"
+                "h-[100%] w-[100%] pb-6 pt-3.5"
               )}
               contentEditable={true}
               ref={inputRef}
               id={"dust-input-bar"}
+              onFocus={() => setIsInputFocused(true)}
+              onBlur={() => setIsInputFocused(false)}
               suppressContentEditableWarning={true}
               onPaste={(e) => {
                 e.preventDefault();
@@ -757,16 +771,15 @@ export function AssistantInputBar({
           <div className="absolute right-4 top-4 z-10 flex">
             <IconButton
               variant={"tertiary"}
-              icon={FullscreenIcon}
+              icon={isFullscreen ? FullscreenExitIcon : FullscreenIcon}
               size="xs"
               disabled={!!contentFragmentFilename}
-              tooltip="Add a document to the conversation (5MB maximum, only .txt, .pdf, .md)."
-              tooltipPosition="above"
               className="flex"
+              onClick={toggleFullscreen}
             />
           </div>
-          <div className="absolute bottom-0 right-0 z-10 flex flex-row items-end gap-4 p-2">
-            <div className="flex gap-4">
+          <div className="absolute bottom-0 right-0 z-10 flex flex-row items-end gap-2 p-2">
+            <div className="flex gap-4 rounded-full bg-white/80 px-2 py-1 backdrop-blur">
               <input
                 type="file"
                 ref={fileInputRef}
@@ -916,21 +929,22 @@ export function FixedAssistantInputBar({
   }, [isProcessing, generationContext.generatingMessageIds.length]);
 
   return (
-    <div className="4xl:px-0 fixed bottom-0 left-0 right-0 z-20 flex-initial px-2 lg:left-80">
-      {generationContext.generatingMessageIds.length > 0 && (
-        <div className="flex justify-center pb-4">
-          <Button
-            className="mt-4"
-            variant="tertiary"
-            label={isProcessing ? "Stopping generation..." : "Stop generation"}
-            icon={StopIcon}
-            onClick={handleStopGeneration}
-            disabled={isProcessing}
-          />
-        </div>
-      )}
-
-      <div className="mx-auto max-w-4xl pb-8">
+    <div className="pointer-events-none absolute right-0 top-0 z-20 h-full w-full overflow-hidden lg:left-80 lg:w-auto">
+      <div className="mx-auto flex h-full max-w-4xl">
+        {generationContext.generatingMessageIds.length > 0 && (
+          <div className="flex justify-center pb-4">
+            <Button
+              className="mt-4"
+              variant="tertiary"
+              label={
+                isProcessing ? "Stopping generation..." : "Stop generation"
+              }
+              icon={StopIcon}
+              onClick={handleStopGeneration}
+              disabled={isProcessing}
+            />
+          </div>
+        )}
         <AssistantInputBar
           owner={owner}
           onSubmit={onSubmit}

diff --git a/front/components/sparkle/AppLayout.tsx b/front/components/sparkle/AppLayout.tsx
@@ -401,7 +401,7 @@ export default function AppLayout({
           >
             <div
               className={classNames(
-                "mx-auto h-full ",
+                "mx-auto h-full",
                 isWideMode ? "w-full" : "max-w-4xl px-6"
               )}
             >