cozy-search 2.6.2 → 2.7.0

package/dist/components/Conversations/styles.styl

@@ -2,16 +2,67 @@
 
 .composerContainer
     position relative
-    border 1px solid var(--borderMainColor)
-    border-radius 20px
-    padding 8px 8px 8px 16px
+    border 1px solid var(--borderGhostDisabledColor)
+    border-radius 16px
+    padding 12px 12px 12px 16px
     background-color var(--paperBackgroundColor)
+    box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.05)
     z-index calc(var(--zIndex-modal) + 15)
 
+    &--mobile
+        // The design's "Overlay+Shadow": a 1px ring and two soft shadows
+        // instead of a border
+        border-color transparent
+        border-radius 28px
+        padding-bottom 8px
+        box-shadow 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 40px 8px rgba(0, 0, 0, 0.02)
+
+    &--mobile-dark
+        // The shadows vanish on a dark background: keep a border there
+        border-color var(--borderMainColor)
+
+.composer-dock
+    // The composer and the disclaimer sit on a fade: the conversation runs
+    // under them and dissolves into the background over the 32px above the
+    // composer (the design's gradient background)
+    position relative
+    z-index calc(var(--zIndex-modal) + 15)
+    margin-top -32px
+    padding-top 32px
+    background linear-gradient(to top, var(--paperBackgroundColor) calc(100% - 32px), transparent)
+
 .composerActions
-    margin-top 16px
+    margin-top 12px
     gap 8px
 
+.welcome
+    // Room for the halo, which is larger than the title
+    min-height 166px
+
+.welcome-halo
+    // The blurred pastel gradient behind the welcome title. Purely
+    // decorative, so its colors are the design's, not theme tokens; in the
+    // dark theme it is dimmed to a soft glow.
+    position absolute
+    top 50%
+    left 50%
+    width 100%
+    max-width 629px
+    height 166px
+    transform translate(-50%, -50%)
+    border-radius 9999px
+    opacity 0.5
+    filter blur(62.5px)
+    background linear-gradient(270deg, #c5ccfd 0%, #f0c7fc 21%, #f7bbe1 39%, #f5c7d2 62%, #fbe3b9 82%, #fcd8a4 100%)
+    pointer-events none
+
+    &--dark
+        opacity 0.2
+
+.welcome-title
+    font-size 32px
+    line-height 40px
+
 .conversationBar
     flex 1
     min-width 0
@@ -27,14 +78,43 @@
       background-color transparent !important
       border-color transparent !important
 
+.viewport-fade-top
+    // Under the 48px sidebar bar of mobile: the text scrolled under the bar
+    // dissolves over 24px instead of being cut at its edge. Hidden while
+    // the conversation is at the top of its scroll.
+    position absolute
+    top 48px
+    left 0
+    right 0
+    height 24px
+    background linear-gradient(to bottom, var(--paperBackgroundColor), transparent)
+    opacity 0
+    transition opacity 150ms
+    pointer-events none
+    z-index calc(var(--zIndex-modal) + 15)
+
+    &--visible
+        opacity 1
+
 .conversationViewport
   +mobile()
     // Small symmetric gutter so the LLM response uses nearly the full
-    // mobile width. The floating sidebar-toggle button sits on an opaque
-    // tile, so text scrolling beneath it stays visually covered.
+    // mobile width
     padding-left 8px
     padding-right 8px
 
+  // With messages only, so the welcome screen keeps its spacing
+  &--filled
+    // The bottom padding is the fade under the composer: the last lines
+    // can scroll clear of it
+    padding-bottom 32px
+
+    +mobile()
+      // The first message sits 8px below the 48px sidebar bar over the
+      // conversation (the message brings its own 16px margin); the text
+      // then scrolls under the bar
+      padding-top 40px
+
 
 .conversationBar-input
   max-height 80px
@@ -105,8 +185,13 @@
   hyphens auto
 
 .conversation-list-item
+  // A sidebar item of the design: 8px gutter, 5px vertical padding,
+  // 36px min height, 8px radius, selected on the action-selected color
   border-radius 8px !important
-  align-items stretch !important
+  align-items center !important
+  min-height 36px !important
+  padding-top 5px !important
+  padding-bottom 5px !important
   // force 0 gap to override cozy-ui gap 16px on .MuiListItem-root
   gap: 0 !important
 
@@ -116,43 +201,45 @@
     pointer-events auto
 
   &--selected
-    &--light
-      background var(--primaryColorLightest) !important
-    &--dark
-      background var(--grey900) !important
+    background var(--actionColorSelected) !important
+
+    .conversation-list-item-action
+      opacity 1
+      pointer-events auto
 
   &--wider
     align-items center !important
 
-.conversation-list-item-divider
-  // Counteract the item's 16px horizontal padding so the divider spans the
-  // full width and sits flush with the bottom edge of the selected highlight
-  margin 8px -16px -8px -16px !important
-
 .conversation-list-item-action
   position absolute !important
-  top 8px
-  right 8px
+  top 50%
+  right 4px
+  transform translateY(-50%)
   opacity 0
   pointer-events none
 
 .conversation-list-item-text
-  line-height 16px
   overflow hidden
-  margin-right 28px !important
+  margin-right 24px !important
 
 .conversation-list-item-title
   color var(--primaryTextColor)
   font-size 14px
   font-weight 500
+  line-height 18px
+  letter-spacing 0.25px
+
+.conversation-list-item-subtitle
+  color var(--secondaryTextColor)
+  font-size 12px
+  font-weight 500
   line-height 16px
   letter-spacing 0.5px
 
 .conversation-list-item-meta
   gap 4px
-
-.conversation-list-item-subtitle
-  color var(--secondaryTextColor)
+  color var(--primaryTextColor)
   font-size 11px
   font-weight 400
   line-height 16px
+  letter-spacing 0

package/dist/components/CozyAssistantRuntimeProvider.js

@@ -98,7 +98,13 @@ var ConversationLoader = function ConversationLoader(_ref) {
   var conversation = queryResult.data;
   var isLoading = (0, _cozyClient.isQueryLoading)(queryResult);
   var boundId = conversation === null || conversation === void 0 ? void 0 : (_conversation$relatio = conversation.relationships) === null || _conversation$relatio === void 0 ? void 0 : (_conversation$relatio2 = _conversation$relatio.assistant) === null || _conversation$relatio2 === void 0 ? void 0 : (_conversation$relatio3 = _conversation$relatio2.data) === null || _conversation$relatio3 === void 0 ? void 0 : _conversation$relatio3._id;
-  var defaultId = (0, _useDefaultAssistantId.useDefaultAssistantId)();
+  var defaultId = (0, _useDefaultAssistantId.useDefaultAssistantId)(); // The assistant picked to start this conversation on, set by
+  // useConversation when navigating here
+
+  var _ref2 = (0, _reactRouterDom.useLocation)(),
+      locationState = _ref2.state;
+
+  var requestedId = locationState === null || locationState === void 0 ? void 0 : locationState.assistantId;
   var initialMessages = (0, _react2.useMemo)(function () {
     return convertMessagesToThreadMessages(conversation === null || conversation === void 0 ? void 0 : conversation.messages, t);
   }, [conversation === null || conversation === void 0 ? void 0 : conversation.messages, t]); // Undefined until the conversation, and the default a new one starts
@@ -109,7 +115,8 @@ var ConversationLoader = function ConversationLoader(_ref) {
     boundId: boundId,
     conversation: conversation,
     isLoading: isLoading,
-    defaultId: defaultId
+    defaultId: defaultId,
+    requestedId: requestedId
   });
   (0, _react2.useEffect)(function () {
     if (resolvedAssistantId) setSelectedAssistantId(resolvedAssistantId);
@@ -130,10 +137,10 @@ var ConversationLoader = function ConversationLoader(_ref) {
   }, children);
 };
 
-var CozyAssistantRuntimeProviderInner = function CozyAssistantRuntimeProviderInner(_ref2) {
-  var children = _ref2.children,
-      conversationId = _ref2.conversationId,
-      initialMessages = _ref2.initialMessages;
+var CozyAssistantRuntimeProviderInner = function CozyAssistantRuntimeProviderInner(_ref3) {
+  var children = _ref3.children,
+      conversationId = _ref3.conversationId,
+      initialMessages = _ref3.initialMessages;
 
   var _useI18n2 = (0, _twakeI18n.useI18n)(),
       t = _useI18n2.t;
@@ -271,8 +278,8 @@ var CozyAssistantRuntimeProviderInner = function CozyAssistantRuntimeProviderInn
  */
 
 
-var CozyAssistantRuntimeProvider = function CozyAssistantRuntimeProvider(_ref3) {
-  var children = _ref3.children;
+var CozyAssistantRuntimeProvider = function CozyAssistantRuntimeProvider(_ref4) {
+  var children = _ref4.children;
 
   var _useParams = (0, _reactRouterDom.useParams)(),
       conversationId = _useParams.conversationId;

package/dist/components/CreateAssistantSteps/BasicInfoStep.js

@@ -13,8 +13,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));
 
+var _Tooltip = _interopRequireDefault(require("cozy-ui/transpiled/react/Tooltip"));
+
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
+var _CozyTheme = require("cozy-ui/transpiled/react/providers/CozyTheme");
+
 var _twakeI18n = require("twake-i18n");
 
 var _KnowledgeBaseSection = _interopRequireDefault(require("../KnowledgeBase/KnowledgeBaseSection"));
@@ -28,6 +32,7 @@ var styles = {
   "avatar-container": "styles__avatar-container___kJ_64",
   "avatar-image": "styles__avatar-image___2Mkxj",
   "file-input": "styles__file-input___2fB5n",
+  "avatar-tooltip": "styles__avatar-tooltip___1o6_5",
   "ModelSelectionStep": "styles__ModelSelectionStep___1auXB",
   "grid-container": "styles__grid-container___3wOus",
   "grid-container--mobile": "styles__grid-container--mobile___uCAg1",
@@ -56,6 +61,9 @@ var BasicInfoStep = function BasicInfoStep(_ref) {
   var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
+  var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
+      type = _useCozyTheme.type;
+
   var fileInputRef = (0, _react.useRef)(null);
 
   var handleAvatarClick = function handleAvatarClick() {
@@ -90,6 +98,34 @@ var BasicInfoStep = function BasicInfoStep(_ref) {
     className: "u-mb-half"
   }, t('assistant_create.steps.basic_info.avatar')), /*#__PURE__*/_react.default.createElement("div", {
     className: "u-flex u-flex-items-center u-flex-justify-center"
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
+    title: t('assistant_create.steps.basic_info.upload_photo'),
+    placement: "bottom-start",
+    arrow: false,
+    classes: {
+      tooltip: styles['avatar-tooltip'],
+      // Rendered outside the themed tree: the theme class brings
+      // the dark colors when needed
+      popper: "TwakeTheme--".concat(type)
+    } // Sits at the lower right of the avatar, next to the pointer,
+    // as a native tooltip would (the design): shifted from the
+    // bottom-left corner by half the 64px avatar plus (9px, 7px),
+    // and never flipped away from it
+    ,
+    PopperProps: {
+      modifiers: {
+        offset: {
+          enabled: true,
+          offset: '41, -25'
+        },
+        flip: {
+          enabled: false
+        },
+        preventOverflow: {
+          enabled: false
+        }
+      }
+    }
   }, /*#__PURE__*/_react.default.createElement("div", {
     role: "button",
     tabIndex: 0,
@@ -102,7 +138,7 @@ var BasicInfoStep = function BasicInfoStep(_ref) {
     className: "u-w-100 u-h-100 u-obj-cover ".concat(styles['avatar-image'])
   }) : /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: _twakeIcons.Plus
-  })), /*#__PURE__*/_react.default.createElement("input", {
+  }))), /*#__PURE__*/_react.default.createElement("input", {
     type: "file",
     ref: fileInputRef,
     onChange: handleFileChange,

package/dist/components/CreateAssistantSteps/Provider.js

@@ -28,6 +28,7 @@ var styles = {
   "avatar-container": "styles__avatar-container___kJ_64",
   "avatar-image": "styles__avatar-image___2Mkxj",
   "file-input": "styles__file-input___2fB5n",
+  "avatar-tooltip": "styles__avatar-tooltip___1o6_5",
   "ModelSelectionStep": "styles__ModelSelectionStep___1auXB",
   "grid-container": "styles__grid-container___3wOus",
   "grid-container--mobile": "styles__grid-container--mobile___uCAg1",

package/dist/components/CreateAssistantSteps/ProviderSelectionStep.js

@@ -67,6 +67,7 @@ var styles = {
   "avatar-container": "styles__avatar-container___kJ_64",
   "avatar-image": "styles__avatar-image___2Mkxj",
   "file-input": "styles__file-input___2fB5n",
+  "avatar-tooltip": "styles__avatar-tooltip___1o6_5",
   "ModelSelectionStep": "styles__ModelSelectionStep___1auXB",
   "grid-container": "styles__grid-container___3wOus",
   "grid-container--mobile": "styles__grid-container--mobile___uCAg1",

package/dist/components/CreateAssistantSteps/styles.styl

@@ -11,6 +11,20 @@
   & .file-input
     display none
 
+// The "Upload a photo" hint of the avatar: a small light tooltip with the
+// design's elevation, not the dark default one. Doubled to outweigh the
+// theme's tooltip rule, injected after this stylesheet.
+.avatar-tooltip.avatar-tooltip
+  padding 8px
+  border-radius 8px
+  background-color var(--paperBackgroundColor)
+  color var(--primaryTextColor)
+  font-size 12px
+  font-weight 500
+  line-height 20px
+  letter-spacing 0.1px
+  box-shadow 0 2px 3px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.3)
+
 .ModelSelectionStep
   & .grid-container
     display grid

package/dist/components/KnowledgeBase/FolderPickerDialog.js

@@ -26,7 +26,9 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var styles = {
-  "intentHost": "styles__intentHost___1ixnl"
+  "intentHost": "styles__intentHost___1ixnl",
+  "folder-tooltip": "styles__folder-tooltip___2lWW_",
+  "folder-tooltip-arrow": "styles__folder-tooltip-arrow___3MALJ"
 };
 /**
  * Hosts the Drive `PICK io.cozy.files` intent (folder `reference` mode)

package/dist/components/KnowledgeBase/KnowledgeBaseChip.d.ts

@@ -1,17 +1,19 @@
 export default KnowledgeBaseChip;
 /**
- * Composer chip showing the selected assistant's knowledge-base folder,
- * rendered in the "selected source" style (like the email source chip).
+ * The Drive source of the composer when the selected assistant has a
+ * knowledge-base folder: a chip named after the folder (`variant="chip"`,
+ * desktop) or an icon button (`variant="icon"`, mobile).
  *
  * Clicking stays in-app: it opens a small menu with explicit actions —
  * open the folder in Drive (new tab) or change the knowledge base through
- * the Drive folder picker (persisted on the assistant immediately).
+ * the Drive folder picker (persisted on the assistant immediately). The
+ * menu starts with the folder name, which the icon button does not show.
  */
-declare function KnowledgeBaseChip({ dirId, folder, isRoot, isUnavailable, isLast, onChangeFolder }: {
+declare function KnowledgeBaseChip({ dirId, folder, isRoot, isUnavailable, onChangeFolder, variant }: {
     dirId: any;
     folder: any;
     isRoot: any;
     isUnavailable: any;
-    isLast: any;
     onChangeFolder: any;
+    variant?: string | undefined;
 }): JSX.Element;

package/dist/components/KnowledgeBase/KnowledgeBaseChip.js

@@ -9,12 +9,10 @@ exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _twakeIcons = require("@linagora/twake-icons");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireWildcard(require("react"));
 
+var _twakeIcons = require("@linagora/twake-icons");
+
 var _cozyClient = require("cozy-client");
 
 var _ActionsMenu = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu"));
@@ -23,26 +21,44 @@ var _ActionsMenuItem = _interopRequireDefault(require("cozy-ui/transpiled/react/
 
 var _Chips = _interopRequireDefault(require("cozy-ui/transpiled/react/Chips"));
 
+var _Tooltip = _interopRequireDefault(require("cozy-ui/transpiled/react/Tooltip"));
+
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
 var _twakeI18n = require("twake-i18n");
 
 var _FolderPickerDialog = _interopRequireDefault(require("./FolderPickerDialog"));
 
-var _tdrive = _interopRequireDefault(require("../../assets/tdrive.png"));
+var _SourceButton = _interopRequireWildcard(require("../TwakeKnowledges/SourceButton"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+var styles = {
+  "intentHost": "styles__intentHost___1ixnl",
+  "folder-tooltip": "styles__folder-tooltip___2lWW_",
+  "folder-tooltip-arrow": "styles__folder-tooltip-arrow___3MALJ"
+};
+var sourceStyles = {
+  "source-button": "styles__source-button___9t9wI",
+  "source-button-image": "styles__source-button-image___2batD",
+  "source-button-image--inactive": "styles__source-button-image--inactive___3hs2C",
+  "source-chip": "styles__source-chip___1h51w",
+  "source-chip-icon": "styles__source-chip-icon___3-N0x",
+  "source-chip-label": "styles__source-chip-label___2mLIx"
+};
 /**
- * Composer chip showing the selected assistant's knowledge-base folder,
- * rendered in the "selected source" style (like the email source chip).
+ * The Drive source of the composer when the selected assistant has a
+ * knowledge-base folder: a chip named after the folder (`variant="chip"`,
+ * desktop) or an icon button (`variant="icon"`, mobile).
  *
  * Clicking stays in-app: it opens a small menu with explicit actions —
  * open the folder in Drive (new tab) or change the knowledge base through
- * the Drive folder picker (persisted on the assistant immediately).
+ * the Drive folder picker (persisted on the assistant immediately). The
+ * menu starts with the folder name, which the icon button does not show.
  */
+
 var KnowledgeBaseChip = function KnowledgeBaseChip(_ref) {
   var _folder$name;
 
@@ -50,8 +66,9 @@ var KnowledgeBaseChip = function KnowledgeBaseChip(_ref) {
       folder = _ref.folder,
       isRoot = _ref.isRoot,
       isUnavailable = _ref.isUnavailable,
-      isLast = _ref.isLast,
-      onChangeFolder = _ref.onChangeFolder;
+      onChangeFolder = _ref.onChangeFolder,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'chip' : _ref$variant;
 
   var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
@@ -85,33 +102,46 @@ var KnowledgeBaseChip = function KnowledgeBaseChip(_ref) {
     hash: "/folder/".concat(dirId)
   });
   var label = isUnavailable ? t('assistant.knowledge_base.unavailable') : isRoot ? t('assistant.twake_knowledges.drive') : (_folder$name = folder === null || folder === void 0 ? void 0 : folder.name) !== null && _folder$name !== void 0 ? _folder$name : '…';
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, variant === 'icon' ? /*#__PURE__*/_react.default.createElement(_SourceButton.default, {
     ref: chipRef,
-    className: (0, _classnames.default)({
-      'u-mr-half': !isLast
-    })
+    icon: _twakeIcons.Drive,
+    preserveColor: true,
+    label: label,
+    isActive: !isUnavailable,
+    "aria-haspopup": "menu",
+    "aria-expanded": isMenuOpen,
+    onClick: function onClick() {
+      return setIsMenuOpen(true);
+    }
+  }) :
+  /*#__PURE__*/
+  // Hovering the chip tells what the folder is for (the design's
+  // tooltip); nothing to tell when the folder is gone
+  _react.default.createElement(_Tooltip.default, {
+    title: isUnavailable ? '' : t('assistant.knowledge_base.folder_hint'),
+    placement: "top",
+    classes: {
+      tooltip: styles['folder-tooltip'],
+      arrow: styles['folder-tooltip-arrow']
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: chipRef
   }, /*#__PURE__*/_react.default.createElement(_Chips.default, {
-    icon: /*#__PURE__*/_react.default.createElement("img", {
-      alt: "",
-      "aria-hidden": "true",
-      src: _tdrive.default,
-      width: 16,
-      className: "u-m-0"
-    }),
-    label: /*#__PURE__*/_react.default.createElement("span", {
-      className: "u-flex u-flex-items-center"
-    }, label, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
-      icon: _twakeIcons.Dropdown,
+    icon: /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+      icon: _twakeIcons.Drive,
       size: 16,
-      className: "u-ml-half"
-    })),
-    variant: "ghost",
+      preserveColor: true
+    }),
+    label: label,
     clickable: true,
+    "aria-haspopup": "menu",
+    "aria-expanded": isMenuOpen,
     onClick: function onClick() {
       return setIsMenuOpen(true);
     },
-    className: "u-w-auto u-ph-half u-mr-0"
-  })), isMenuOpen && /*#__PURE__*/_react.default.createElement(_ActionsMenu.default, {
+    className: sourceStyles['source-chip'],
+    classes: _SourceButton.CHIP_CLASSES
+  }))), isMenuOpen && /*#__PURE__*/_react.default.createElement(_ActionsMenu.default, {
     open: true,
     ref: chipRef,
     onClose: closeMenu,
@@ -120,7 +150,11 @@ var KnowledgeBaseChip = function KnowledgeBaseChip(_ref) {
       vertical: 'bottom',
       horizontal: 'left'
     }
-  }, !isUnavailable && /*#__PURE__*/_react.default.createElement(_ActionsMenuItem.default, {
+  }, variant === 'icon' && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "body2",
+    className: "u-ph-1 u-pb-half u-ellipsis",
+    component: "div"
+  }, label), !isUnavailable && /*#__PURE__*/_react.default.createElement(_ActionsMenuItem.default, {
     component: "a",
     href: folderUrl,
     target: "_blank",

package/dist/components/KnowledgeBase/conversationAssistant.d.ts

@@ -1,6 +1,7 @@
-export function resolveConversationAssistantId({ boundId, conversation, isLoading, defaultId }: {
+export function resolveConversationAssistantId({ boundId, conversation, isLoading, defaultId, requestedId }: {
     boundId: string | undefined;
     conversation: object | undefined;
     isLoading: boolean;
     defaultId: string | null | undefined;
+    requestedId?: string | undefined;
 }): string | undefined;

package/dist/components/KnowledgeBase/conversationAssistant.js

@@ -21,17 +21,22 @@ var _constants = require("../constants");
  * @param {string|null|undefined} params.defaultId - The configured default
  * assistant id, only when its document is known to exist; undefined while
  * that is being checked.
+ * @param {string|undefined} [params.requestedId] - The assistant the user
+ * picked to start this new conversation on (the history state of the
+ * navigation), which wins over the default.
  * @returns {string|undefined}
  */
 var resolveConversationAssistantId = function resolveConversationAssistantId(_ref) {
   var boundId = _ref.boundId,
       conversation = _ref.conversation,
       isLoading = _ref.isLoading,
-      defaultId = _ref.defaultId;
+      defaultId = _ref.defaultId,
+      requestedId = _ref.requestedId;
   if (boundId) return boundId;
   if (isLoading) return undefined;
 
   if (!conversation) {
+    if (requestedId) return requestedId;
     if (defaultId === undefined) return undefined;
     return defaultId || _constants.DEFAULT_ASSISTANT._id;
   }

package/dist/components/KnowledgeBase/conversationAssistant.spec.js

@@ -56,6 +56,30 @@ describe('resolveConversationAssistantId', () => {
     ).toBe('docs')
   })
 
+  it('selects the requested assistant for a new conversation, over the default', () => {
+    expect(
+      resolveConversationAssistantId({
+        boundId: undefined,
+        conversation: undefined,
+        isLoading: false,
+        defaultId: 'docs',
+        requestedId: 'meeting'
+      })
+    ).toBe('meeting')
+  })
+
+  it('selects the requested assistant for a new conversation without waiting for the default', () => {
+    expect(
+      resolveConversationAssistantId({
+        boundId: undefined,
+        conversation: undefined,
+        isLoading: false,
+        defaultId: undefined,
+        requestedId: 'meeting'
+      })
+    ).toBe('meeting')
+  })
+
   it('selects the sentinel for a new conversation without a configured default', () => {
     expect(
       resolveConversationAssistantId({

package/dist/components/KnowledgeBase/styles.styl

@@ -10,3 +10,21 @@
         width 100%
         height 100%
         border none
+
+// The hint of the folder chip: the design's tooltip (12px medium, centered,
+// on grey A400). Doubled to outweigh the theme's tooltip rule, injected
+// after this stylesheet.
+.folder-tooltip.folder-tooltip
+    max-width 258px
+    padding 8px 12px
+    border-radius 4px
+    background-color var(--greyA400)
+    color var(--white)
+    font-size 12px
+    font-weight 500
+    line-height 15.8px
+    letter-spacing 0.5px
+    text-align center
+
+.folder-tooltip-arrow.folder-tooltip-arrow
+    color var(--greyA400)