Ed AssistantBuilder Polish polish (#4121)

* Polishing Menu style and Text Area behavior * Changing sharing icon * Final polish * deploy Sparkle 106 * Fixing lint * linting --------- Co-authored-by: édouard wautier <[email protected]>
dust-tt · Mar 5, 2024 · d07a04b · d07a04b
1 parent d1c61ef
commit d07a04b
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 85 deletions.
diff --git 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
@@ -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
diff --git 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",