fix: polish assistant widget interactions

apps/nextjs/src/components/assistant/assistant-panel.module.css

@@ -93,6 +93,8 @@
 }
 
 .floatingPanel {
+  container-name: assistant-widget;
+  container-type: size;
   position: fixed;
   z-index: 290;
   inset-inline-start: 50%;
@@ -259,6 +261,21 @@
   .runtimeButton {
     padding-inline: 0.5rem;
   }
+
+  .reasoningButton {
+    width: 2.5rem;
+    min-width: 2.5rem;
+    max-width: 2.5rem;
+  }
+
+  .reasoningButton :global(.mantine-Button-label),
+  .reasoningButton :global(.mantine-Button-section[data-position="right"]) {
+    display: none;
+  }
+
+  .reasoningButton :global(.mantine-Button-section[data-position="left"]) {
+    margin-inline: 0;
+  }
 }
 
 @container assistant-widget (max-width: 18rem) {

apps/nextjs/src/components/assistant/assistant-panel.tsx

@@ -985,11 +985,11 @@ const ThreadHistory = ({ onSelect }: { onSelect: () => void }) => {
             {t("conversations")}
           </Text>
         </Group>
-        <ScrollArea h="min(24rem, 55dvh)" type="auto" offsetScrollbars>
+        <ScrollArea.Autosize mah="min(24rem, 55dvh)" type="auto" offsetScrollbars>
           <Stack gap={3}>
             <ThreadListPrimitive.Items components={{ ThreadListItem }} />
           </Stack>
-        </ScrollArea>
+        </ScrollArea.Autosize>
       </Stack>
     </HistorySelectContext.Provider>
   );
@@ -1002,6 +1002,7 @@ const ConversationHistory = () => {
     <Popover
       opened={opened}
       onChange={setOpened}
+      onDismiss={() => setOpened(false)}
       position="bottom-end"
       width="min(22rem, calc(100vw - 1rem))"
       shadow="md"
@@ -1016,6 +1017,12 @@ const ConversationHistory = () => {
           leftSection={<IconHistory size={16} />}
           classNames={{ section: classes.historyButtonSection, label: classes.historyButtonLabel }}
           onClick={() => setOpened((current) => !current)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape" && opened) {
+              event.stopPropagation();
+              setOpened(false);
+            }
+          }}
           aria-label={opened ? t("closeHistory") : t("openHistory")}
         >
           {t("conversations")}

apps/nextjs/src/components/assistant/assistant-widget.tsx

@@ -147,7 +147,7 @@ const CompactAssistantWidget = ({ onOpen }: { onOpen: () => void }) => {
           <ActionIcon
             variant="light"
             color="red"
-            size="lg"
+            size={44}
             radius="md"
             onClick={onOpen}
             aria-label={t("widget.assistant.compact.open")}

packages/translation/src/lang/en.json

@@ -2758,7 +2758,8 @@
           "description": "Custom URLs must resolve to a public IP address. Private and local hosts are rejected."
         },
         "station": {
-          "label": "Station"
+          "label": "Station",
+          "placeholder": "Search for a station"
         }
       },
       "error": {
@@ -4887,7 +4888,8 @@
         },
         "conversation": {
           "label": "Pinned conversation",
-          "description": "This selector stays hidden while the widget follows the current conversation."
+          "description": "Choose the saved conversation this widget should keep available.",
+          "placeholder": "Select a saved conversation"
         }
       },
       "pinned": {

packages/widgets/src/_inputs/widget-dynamic-select-input.tsx

@@ -76,6 +76,8 @@ export const WidgetDynamicSelectInput = ({
         )}
       searchValue={search}
       onSearchChange={setSearch}
+      placeholder={tWidget("placeholder")}
+      nothingFoundMessage={t("common.noResults")}
       leftSection={isPending && <Loader size="xs" />}
       renderOption={({ option, checked }) => {
         return (