From d07a04b9d0b9b620ff62992243ce105af9ee5985 Mon Sep 17 00:00:00 2001
From: Edouard Wautier <4435185+Duncid@users.noreply.github.com>
Date: Tue, 5 Mar 2024 15:04:53 +0100
Subject: [PATCH] Ed AssistantBuilder Polish polish (#4121)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Polishing Menu style and Text Area behavior

* Changing sharing icon

* Final polish

* deploy Sparkle 106

* Fixing lint

* linting

---------

Co-authored-by: édouard wautier <edouardwautier@Ed-Pro.local>
---
 front/components/assistant/Sharing.tsx        | 140 +++++++++---------
 .../assistant_builder/InstructionScreen.tsx   |  34 +++--
 front/package-lock.json                       |   8 +-
 front/package.json                            |   2 +-
 4 files changed, 99 insertions(+), 85 deletions(-)

diff --git a/front/components/assistant/Sharing.tsx b/front/components/assistant/Sharing.tsx
index 312318edba0a..856d342573c4 100644
--- a/front/components/assistant/Sharing.tsx
+++ b/front/components/assistant/Sharing.tsx
@@ -1,18 +1,16 @@
 import {
+  ArrowUpOnSquareIcon,
   Button,
   ChevronDownIcon,
   Chip,
-  ClipboardCheckIcon,
   Dialog,
   DropdownMenu,
   DustIcon,
   IconButton,
-  LinkIcon,
   LockIcon,
   Modal,
   Page,
   PlanetIcon,
-  ShapesIcon,
   SlackLogo,
   SliderToggle,
   UserGroupIcon,
@@ -169,13 +167,14 @@ export function SharingButton({
           <Button
             size="sm"
             label="Sharing"
-            icon={ShapesIcon}
+            icon={ArrowUpOnSquareIcon}
             variant="tertiary"
+            type="menu"
           />
         </DropdownMenu.Button>
-        <DropdownMenu.Items width={319} overflow="visible">
-          <div className="-mx-1 flex flex-col gap-y-4 pb-2 pt-3">
-            <div className="flex flex-col gap-y-2">
+        <DropdownMenu.Items width={300} overflow="visible">
+          <div className="flex flex-col gap-y-2 py-1">
+            <div className="flex flex-col gap-y-3">
               <SharingDropdown
                 owner={owner}
                 agentConfiguration={agentConfiguration}
@@ -194,78 +193,83 @@ export function SharingButton({
                 </div>
               </div>
             </div>
-
             {showSlackIntegration && (
-              <div className="flex flex-row justify-between">
-                <div>
-                  <div className="text-base font-bold text-element-800">
-                    Slack integration
-                  </div>
-                  <div className="text-sm text-element-700">
-                    {slackChannelSelected.length === 0 ? (
-                      <>Set as default assistant for specific channels.</>
-                    ) : (
-                      <>
-                        Default assistant for{" "}
-                        {slackChannelSelected
-                          .map((c) => c.slackChannelName)
-                          .join(", ")}
-                      </>
-                    )}
-                  </div>
+              <>
+                <Page.Separator />
+                <div className="flex flex-row justify-between">
+                  <div>
+                    <div className="text-base font-bold text-element-800">
+                      Slack integration
+                    </div>
+                    <div className="text-sm text-element-700">
+                      {slackChannelSelected.length === 0 ? (
+                        <>
+                          Set as default assistant for specific&nbsp;channels.
+                        </>
+                      ) : (
+                        <>
+                          Default assistant for{" "}
+                          {slackChannelSelected
+                            .map((c) => c.slackChannelName)
+                            .join(", ")}
+                        </>
+                      )}
+                    </div>
 
-                  <div className="pt-3">
                     {slackChannelSelected.length > 0 && (
-                      <Button
-                        size="xs"
-                        variant="secondary"
-                        label="Manage channels"
-                        onClick={() => setSlackDrawerOpened(true)}
-                      />
+                      <div className="pt-3">
+                        <Button
+                          size="xs"
+                          variant="secondary"
+                          label="Manage channels"
+                          onClick={() => setSlackDrawerOpened(true)}
+                        />
+                      </div>
                     )}
                   </div>
+                  <div className="pt-4">
+                    <SliderToggle
+                      selected={slackChannelSelected.length > 0}
+                      onClick={() => {
+                        if (slackChannelSelected.length > 0) {
+                          setNewLinkedSlackChannels([]);
+                        } else {
+                          setSlackDrawerOpened(true);
+                        }
+                      }}
+                    />
+                  </div>
                 </div>
-                <div className="">
-                  <SliderToggle
-                    selected={slackChannelSelected.length > 0}
-                    onClick={() => {
-                      if (slackChannelSelected.length > 0) {
-                        setNewLinkedSlackChannels([]);
-                      } else {
-                        setSlackDrawerOpened(true);
-                      }
-                    }}
-                  />
-                </div>
-              </div>
+              </>
             )}
             {agentConfigurationId && (
-              <div className="flex flex-row justify-between">
-                <div>
-                  <div className="text-base font-bold text-element-800">
-                    Link
+              <>
+                <Page.Separator />
+                <div className="flex w-full flex-row">
+                  <div className="grow">
+                    <div className="text-base font-bold text-element-800">
+                      Link
+                    </div>
+                    <div className="text-sm text-element-700">
+                      Shareable direct&nbsp;URL
+                    </div>
                   </div>
-                  <div className="text-sm text-element-700">
-                    Shareable direct URL
+                  <div className="pt-4 text-right">
+                    <Button
+                      size="sm"
+                      label={copyLinkSuccess ? "Copied!" : "Copy link"}
+                      variant="secondary"
+                      onClick={async () => {
+                        await navigator.clipboard.writeText(shareLink);
+                        setCopyLinkSuccess(true);
+                        setTimeout(() => {
+                          setCopyLinkSuccess(false);
+                        }, 1000);
+                      }}
+                    />
                   </div>
                 </div>
-                <div>
-                  <Button
-                    size="sm"
-                    icon={copyLinkSuccess ? ClipboardCheckIcon : LinkIcon}
-                    label={copyLinkSuccess ? "Copied!" : "Copy link"}
-                    variant="secondary"
-                    className="w-full"
-                    onClick={async () => {
-                      await navigator.clipboard.writeText(shareLink);
-                      setCopyLinkSuccess(true);
-                      setTimeout(() => {
-                        setCopyLinkSuccess(false);
-                      }, 1000);
-                    }}
-                  />
-                </div>
-              </div>
+              </>
             )}
           </div>
         </DropdownMenu.Items>
diff --git a/front/components/assistant_builder/InstructionScreen.tsx b/front/components/assistant_builder/InstructionScreen.tsx
index 60efdaca03c1..5965c22d67ac 100644
--- a/front/components/assistant_builder/InstructionScreen.tsx
+++ b/front/components/assistant_builder/InstructionScreen.tsx
@@ -169,14 +169,14 @@ function AdvancedSettings({
           label="Advanced settings"
           variant="tertiary"
           size="sm"
-          type="select"
+          type="menu"
         />
       </DropdownMenu.Button>
-      <DropdownMenu.Items width={300} overflow="visible">
+      <DropdownMenu.Items width={240} overflow="visible">
         <div className="flex flex-col gap-4">
-          <div className="flex flex-row items-center gap-2">
-            <div className="grow text-sm text-element-900">
-              Model selection:
+          <div className="flex flex-col items-end gap-2">
+            <div className="w-full grow text-sm font-bold text-element-800">
+              Model selection
             </div>
             <DropdownMenu>
               <DropdownMenu.Button>
@@ -187,7 +187,7 @@ function AdvancedSettings({
                     getSupportedModelConfig(generationSettings.modelSettings)
                       .displayName
                   }
-                  variant="tertiary"
+                  variant="secondary"
                   hasMagnifying={false}
                   size="sm"
                 />
@@ -218,9 +218,9 @@ function AdvancedSettings({
               </DropdownMenu.Items>
             </DropdownMenu>
           </div>
-          <div className="flex flex-row items-center gap-2">
-            <div className="grow text-sm text-element-900">
-              Creativity level:
+          <div className="flex flex-col items-end gap-2">
+            <div className="w-full grow text-sm font-bold text-element-800">
+              Creativity level
             </div>
             <DropdownMenu>
               <DropdownMenu.Button>
@@ -232,7 +232,7 @@ function AdvancedSettings({
                       generationSettings?.temperature
                     ).label
                   }
-                  variant="tertiary"
+                  variant="secondary"
                   hasMagnifying={false}
                   size="sm"
                 />
@@ -272,17 +272,27 @@ function AssistantBuilderTextArea({
   error?: string | null;
   name: string;
 }) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto"; // Reset height to recalculate
+      textarea.style.height = `${textarea.scrollHeight}px`; // Set to scroll height
+    }
+  }, [value]); // Re-run when value changes
   return (
     <textarea
+      ref={textareaRef}
       name="name"
       id={name}
       className={classNames(
-        "block max-h-full min-h-48 w-full min-w-0 grow rounded-md text-sm text-sm",
+        "block min-h-60 w-full min-w-0 rounded-md text-sm",
         !error
           ? "border-gray-300 focus:border-action-500 focus:ring-action-500"
           : "border-red-500 focus:border-red-500 focus:ring-red-500",
         "bg-structure-50 stroke-structure-50",
-        "resize-none"
+        "resize-y"
       )}
       placeholder={placeholder}
       value={value ?? ""}
diff --git a/front/package-lock.json b/front/package-lock.json
index 12ea9b267476..bd96da687dfc 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -7,7 +7,7 @@
       "dependencies": {
         "@amplitude/ampli": "^1.34.0",
         "@amplitude/analytics-node": "^1.3.5",
-        "@dust-tt/sparkle": "^0.2.105",
+        "@dust-tt/sparkle": "^0.2.106",
         "@dust-tt/types": "file:../types",
         "@emoji-mart/data": "^1.1.2",
         "@emoji-mart/react": "^1.1.1",
@@ -10301,9 +10301,9 @@
       "license": "Apache-2.0"
     },
     "node_modules/@dust-tt/sparkle": {
-      "version": "0.2.105",
-      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.105.tgz",
-      "integrity": "sha512-HKeV8pPP/OyY/xJcnI0fZN5wVZZ+Mfyu5q1anuOhHL9O8Xy7SqQrsaFrY5NOsGpz+Qv0olRNvu6BsI/RpmpUfA==",
+      "version": "0.2.106",
+      "resolved": "https://registry.npmjs.org/@dust-tt/sparkle/-/sparkle-0.2.106.tgz",
+      "integrity": "sha512-EvcoudpLQA5TzJhj6z/CKMIRVoLIpFXuCWFQ+0I3Dq+bzM52DxmrVlFSRoWwyFwjQu/MaEOSOGmQqEMCD+Mv5w==",
       "dependencies": {
         "@headlessui/react": "^1.7.17",
         "esbuild": "^0.20.0",
diff --git a/front/package.json b/front/package.json
index 6e643d018c89..33fdeb37fcb7 100644
--- a/front/package.json
+++ b/front/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@amplitude/ampli": "^1.34.0",
     "@amplitude/analytics-node": "^1.3.5",
-    "@dust-tt/sparkle": "^0.2.105",
+    "@dust-tt/sparkle": "^0.2.106",
     "@dust-tt/types": "file:../types",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",