cozy-search 2.6.1 → 2.7.0

package/dist/components/Assistant/AssistantAvatar.js

@@ -28,7 +28,9 @@ var styles = {
   "menu-item-icon-button": "styles__menu-item-icon-button___2q_ct",
   "menu-item-actions": "styles__menu-item-actions___1ykUi",
   "chip": "styles__chip___16BPR",
-  "selected-item--mobile": "styles__selected-item--mobile___gxVpw"
+  "selected-item--mobile": "styles__selected-item--mobile___gxVpw",
+  "sidebar-item": "styles__sidebar-item___2Kc78",
+  "sidebar-item-icon": "styles__sidebar-item-icon___2qKQL"
 };
 
 var AssistantAvatar = function AssistantAvatar(_ref) {

package/dist/components/Assistant/AssistantContainer.js

@@ -38,7 +38,9 @@ var styles = {
   "menu-item-icon-button": "styles__menu-item-icon-button___2q_ct",
   "menu-item-actions": "styles__menu-item-actions___1ykUi",
   "chip": "styles__chip___16BPR",
-  "selected-item--mobile": "styles__selected-item--mobile___gxVpw"
+  "selected-item--mobile": "styles__selected-item--mobile___gxVpw",
+  "sidebar-item": "styles__sidebar-item___2Kc78",
+  "sidebar-item-icon": "styles__sidebar-item-icon___2qKQL"
 };
 
 var AssistantContainer = function AssistantContainer() {

package/dist/components/Assistant/AssistantMenu.d.ts

@@ -0,0 +1,16 @@
+export function useSelectedAssistant(): {
+    assistants: object | any[];
+    selectedAssistant: any;
+};
+export default AssistantMenu;
+/**
+ * The menu picking the assistant: one item per assistant, the default
+ * one, then "Create Agent". Anchored on `anchorRef`; `onSelect` is called
+ * with the id of the picked assistant, after it has been selected.
+ */
+declare function AssistantMenu({ anchorRef, open, onClose, onSelect }: {
+    anchorRef: any;
+    open: any;
+    onClose: any;
+    onSelect: any;
+}): JSX.Element | null;

package/dist/components/Assistant/AssistantMenu.js

@@ -0,0 +1,160 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectedAssistant = exports.default = void 0;
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _twakeIcons = require("@linagora/twake-icons");
+
+var _cozyClient = require("cozy-client");
+
+var _ActionsMenu = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu"));
+
+var _ActionsMenuItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem"));
+
+var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
+
+var _twakeI18n = require("twake-i18n");
+
+var _AssistantSelectionItem = _interopRequireDefault(require("./AssistantSelectionItem"));
+
+var _AssistantProvider = require("../AssistantProvider");
+
+var _constants = require("../constants");
+
+var _queries = require("../queries");
+
+var styles = {
+  "assistant-container": "styles__assistant-container___2WDzp",
+  "trigger-button": "styles__trigger-button___yyIz8",
+  "assistant-icon": "styles__assistant-icon___1VM6i",
+  "assistant-icon--small": "styles__assistant-icon--small___3D9po",
+  "assistant-icon--composer": "styles__assistant-icon--composer___1i3dU",
+  "menu-item": "styles__menu-item___1jvWN",
+  "create-item": "styles__create-item___3ZARq",
+  "menu-item-icon-button": "styles__menu-item-icon-button___2q_ct",
+  "menu-item-actions": "styles__menu-item-actions___1ykUi",
+  "chip": "styles__chip___16BPR",
+  "selected-item--mobile": "styles__selected-item--mobile___gxVpw",
+  "sidebar-item": "styles__sidebar-item___2Kc78",
+  "sidebar-item-icon": "styles__sidebar-item-icon___2qKQL"
+};
+
+/**
+ * The assistants of the instance and the selected one (the default
+ * assistant when the selected id matches none).
+ */
+var useSelectedAssistant = function useSelectedAssistant() {
+  var _useQuery;
+
+  var _useAssistant = (0, _AssistantProvider.useAssistant)(),
+      selectedAssistantId = _useAssistant.selectedAssistantId;
+
+  var assistantsQuery = (0, _queries.buildAssistantsQuery)();
+  var assistants = ((_useQuery = (0, _cozyClient.useQuery)(assistantsQuery.definition, assistantsQuery.options)) === null || _useQuery === void 0 ? void 0 : _useQuery.data) || [];
+
+  var selectedAssistant = assistants.find(function (assistant) {
+    return assistant._id === selectedAssistantId;
+  }) || _constants.DEFAULT_ASSISTANT;
+
+  return {
+    assistants: assistants,
+    selectedAssistant: selectedAssistant
+  };
+};
+/**
+ * The menu picking the assistant: one item per assistant, the default
+ * one, then "Create Agent". Anchored on `anchorRef`; `onSelect` is called
+ * with the id of the picked assistant, after it has been selected.
+ */
+
+
+exports.useSelectedAssistant = useSelectedAssistant;
+
+var AssistantMenu = function AssistantMenu(_ref) {
+  var anchorRef = _ref.anchorRef,
+      open = _ref.open,
+      onClose = _ref.onClose,
+      onSelect = _ref.onSelect;
+
+  var _useI18n = (0, _twakeI18n.useI18n)(),
+      t = _useI18n.t;
+
+  var _useAssistant2 = (0, _AssistantProvider.useAssistant)(),
+      setIsOpenCreateAssistant = _useAssistant2.setIsOpenCreateAssistant,
+      setAssistantIdInAction = _useAssistant2.setAssistantIdInAction,
+      setIsOpenDeleteAssistant = _useAssistant2.setIsOpenDeleteAssistant,
+      setIsOpenEditAssistant = _useAssistant2.setIsOpenEditAssistant,
+      setSelectedAssistantId = _useAssistant2.setSelectedAssistantId;
+
+  var _useSelectedAssistant = useSelectedAssistant(),
+      assistants = _useSelectedAssistant.assistants,
+      selectedAssistant = _useSelectedAssistant.selectedAssistant;
+
+  var handleSelect = function handleSelect(assistantId) {
+    setSelectedAssistantId(assistantId);
+    if (onSelect) onSelect(assistantId);
+  };
+
+  var handleCreate = function handleCreate() {
+    setIsOpenCreateAssistant(true);
+    onClose();
+  };
+
+  if (!open) return null;
+  return /*#__PURE__*/_react.default.createElement(_ActionsMenu.default, {
+    open: true,
+    ref: anchorRef,
+    onClose: onClose,
+    actions: [],
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'left'
+    }
+  }, assistants.map(function (assistant) {
+    return /*#__PURE__*/_react.default.createElement(_AssistantSelectionItem.default, {
+      key: assistant._id,
+      assistant: assistant,
+      onClose: onClose,
+      onSelect: function onSelect() {
+        return handleSelect(assistant._id);
+      },
+      selectedAssistant: selectedAssistant,
+      setIsOpenDeleteAssistant: setIsOpenDeleteAssistant,
+      setAssistantIdInAction: setAssistantIdInAction,
+      setIsOpenEditAssistant: setIsOpenEditAssistant
+    });
+  }), /*#__PURE__*/_react.default.createElement(_AssistantSelectionItem.default, {
+    assistant: _constants.DEFAULT_ASSISTANT,
+    onClose: onClose,
+    onSelect: function onSelect() {
+      return handleSelect(_constants.DEFAULT_ASSISTANT._id);
+    },
+    selectedAssistant: selectedAssistant,
+    disableActions: true
+  }), /*#__PURE__*/_react.default.createElement(_ActionsMenuItem.default, {
+    onClick: handleCreate,
+    className: (0, _classnames.default)(styles['menu-item'], styles['create-item'])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-flex u-flex-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-flex u-flex-justify-center u-w-1-half u-mr-half"
+  }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: _twakeIcons.Plus,
+    size: 16,
+    color: "var(--primaryColor)"
+  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "body1",
+    color: "primary"
+  }, t('assistant_create.title')))));
+};
+
+var _default = AssistantMenu;
+exports.default = _default;

package/dist/components/Assistant/AssistantSelection.d.ts

@@ -1,5 +1,16 @@
 export default AssistantSelection;
-declare function AssistantSelection({ className, disabled }: {
+/**
+ * The chip naming the assistant of the conversation. With `selectable`
+ * it opens the assistant menu (the mobile header); otherwise it is an
+ * indicator, the assistant being picked from the sidebar. `disabled` is
+ * for a conversation that already started: its assistant cannot change.
+ * `borderless` drops the chip border (the mobile header and composer).
+ * `onSelect` is called with the id of the picked assistant.
+ */
+declare function AssistantSelection({ className, disabled, selectable, borderless, onSelect }: {
     className: any;
     disabled: any;
+    selectable?: boolean | undefined;
+    borderless?: boolean | undefined;
+    onSelect: any;
 }): JSX.Element;

package/dist/components/Assistant/AssistantSelection.js

@@ -9,37 +9,23 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _twakeIcons = require("@linagora/twake-icons");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _cozyClient = require("cozy-client");
-
-var _ActionsMenu = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu"));
-
-var _ActionsMenuItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem"));
+var _twakeIcons = require("@linagora/twake-icons");
 
 var _Chips = _interopRequireDefault(require("cozy-ui/transpiled/react/Chips"));
 
-var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
-
-var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
-
-var _twakeI18n = require("twake-i18n");
-
-var _AssistantProvider = require("../AssistantProvider");
-
-var _constants = require("../constants");
-
-var _queries = require("../queries");
-
 var _AssistantAvatar = _interopRequireDefault(require("./AssistantAvatar"));
 
-var _AssistantSelectionItem = _interopRequireDefault(require("./AssistantSelectionItem"));
+var _AssistantMenu = _interopRequireWildcard(require("./AssistantMenu"));
+
+var _SourceButton = 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); }
 
@@ -56,21 +42,35 @@ var styles = {
   "menu-item-icon-button": "styles__menu-item-icon-button___2q_ct",
   "menu-item-actions": "styles__menu-item-actions___1ykUi",
   "chip": "styles__chip___16BPR",
-  "selected-item--mobile": "styles__selected-item--mobile___gxVpw"
+  "selected-item--mobile": "styles__selected-item--mobile___gxVpw",
+  "sidebar-item": "styles__sidebar-item___2Kc78",
+  "sidebar-item-icon": "styles__sidebar-item-icon___2qKQL"
+};
+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"
 };
+/**
+ * The chip naming the assistant of the conversation. With `selectable`
+ * it opens the assistant menu (the mobile header); otherwise it is an
+ * indicator, the assistant being picked from the sidebar. `disabled` is
+ * for a conversation that already started: its assistant cannot change.
+ * `borderless` drops the chip border (the mobile header and composer).
+ * `onSelect` is called with the id of the picked assistant.
+ */
 
 var AssistantSelection = function AssistantSelection(_ref) {
-  var _useQuery;
-
   var className = _ref.className,
-      disabled = _ref.disabled;
-
-  var _useI18n = (0, _twakeI18n.useI18n)(),
-      t = _useI18n.t;
-
-  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
-      isMobile = _useBreakpoints.isMobile;
-
+      disabled = _ref.disabled,
+      _ref$selectable = _ref.selectable,
+      selectable = _ref$selectable === void 0 ? true : _ref$selectable,
+      _ref$borderless = _ref.borderless,
+      borderless = _ref$borderless === void 0 ? false : _ref$borderless,
+      onSelect = _ref.onSelect;
   var buttonRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(false),
@@ -78,110 +78,50 @@ var AssistantSelection = function AssistantSelection(_ref) {
       open = _useState2[0],
       setOpen = _useState2[1];
 
-  var _useAssistant = (0, _AssistantProvider.useAssistant)(),
-      setIsOpenCreateAssistant = _useAssistant.setIsOpenCreateAssistant,
-      setAssistantIdInAction = _useAssistant.setAssistantIdInAction,
-      setIsOpenDeleteAssistant = _useAssistant.setIsOpenDeleteAssistant,
-      setIsOpenEditAssistant = _useAssistant.setIsOpenEditAssistant,
-      selectedAssistantId = _useAssistant.selectedAssistantId,
-      setSelectedAssistantId = _useAssistant.setSelectedAssistantId;
+  var _useSelectedAssistant = (0, _AssistantMenu.useSelectedAssistant)(),
+      selectedAssistant = _useSelectedAssistant.selectedAssistant;
 
+  var isClickable = selectable && !disabled;
   (0, _react.useEffect)(function () {
     if (disabled) {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setOpen(false);
     }
   }, [disabled]);
-  var assistantsQuery = (0, _queries.buildAssistantsQuery)();
-  var assistants = ((_useQuery = (0, _cozyClient.useQuery)(assistantsQuery.definition, assistantsQuery.options)) === null || _useQuery === void 0 ? void 0 : _useQuery.data) || [];
-
-  var handleClick = function handleClick() {
-    if (disabled) return;
-    setOpen(true);
-  };
-
-  var handleClose = function handleClose() {
-    setOpen(false);
-  };
-
-  var handleCreate = function handleCreate() {
-    setIsOpenCreateAssistant(true);
-    handleClose();
-  };
-
-  var selectedAssistant = assistants.find(function (assistant) {
-    return assistant._id === selectedAssistantId;
-  }) || _constants.DEFAULT_ASSISTANT;
-
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: className,
     ref: buttonRef
-  }, disabled && isMobile ? /*#__PURE__*/_react.default.createElement(_AssistantAvatar.default, {
-    assistant: selectedAssistant
-  }) : /*#__PURE__*/_react.default.createElement(_Chips.default, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_Chips.default, (0, _extends2.default)({
     icon: /*#__PURE__*/_react.default.createElement(_AssistantAvatar.default, {
       className: styles['assistant-icon--composer'],
       assistant: selectedAssistant
     }),
-    label: isMobile ? /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
-      icon: _twakeIcons.Dropdown,
-      size: 16
-    }) : /*#__PURE__*/_react.default.createElement("span", {
+    label: /*#__PURE__*/_react.default.createElement("span", {
       className: "u-flex u-flex-items-center"
-    }, selectedAssistant.name, !disabled && /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    }, selectedAssistant.name, isClickable && /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
       icon: _twakeIcons.Dropdown,
       size: 16,
       className: "u-ml-half u-flex-shrink-0"
-    }))
-  }, disabled ? {
-    className: styles['chip'],
-    'aria-disabled': true
-  } : {
+    })),
+    className: (0, _classnames.default)(sourceStyles['source-chip'], (0, _defineProperty2.default)({}, styles['chip'], borderless)),
+    classes: _SourceButton.CHIP_CLASSES
+  }, isClickable ? {
     clickable: true,
-    onClick: handleClick
-  }))), open && /*#__PURE__*/_react.default.createElement(_ActionsMenu.default, {
-    open: true,
-    ref: buttonRef,
-    onClose: handleClose,
-    actions: [],
-    anchorOrigin: {
-      vertical: 'bottom',
-      horizontal: 'left'
-    }
-  }, assistants.map(function (assistant) {
-    return /*#__PURE__*/_react.default.createElement(_AssistantSelectionItem.default, {
-      key: assistant._id,
-      assistant: assistant,
-      onClose: handleClose,
-      onSelect: function onSelect() {
-        return setSelectedAssistantId(assistant._id);
-      },
-      selectedAssistant: selectedAssistant,
-      setIsOpenDeleteAssistant: setIsOpenDeleteAssistant,
-      setAssistantIdInAction: setAssistantIdInAction,
-      setIsOpenEditAssistant: setIsOpenEditAssistant
-    });
-  }), /*#__PURE__*/_react.default.createElement(_AssistantSelectionItem.default, {
-    assistant: _constants.DEFAULT_ASSISTANT,
-    onClose: handleClose,
-    onSelect: function onSelect() {
-      return setSelectedAssistantId(_constants.DEFAULT_ASSISTANT._id);
+    onClick: function onClick() {
+      return setOpen(true);
+    },
+    'aria-haspopup': 'menu',
+    'aria-expanded': open
+  } : {
+    'aria-disabled': !!disabled
+  }))), /*#__PURE__*/_react.default.createElement(_AssistantMenu.default, {
+    anchorRef: buttonRef,
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
     },
-    selectedAssistant: selectedAssistant,
-    disableActions: true
-  }), /*#__PURE__*/_react.default.createElement(_ActionsMenuItem.default, {
-    onClick: handleCreate,
-    className: (0, _classnames.default)(styles['menu-item'], styles['create-item'])
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-flex u-flex-items-center"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-flex u-flex-justify-center u-w-1-half u-mr-half"
-  }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
-    icon: _twakeIcons.Plus,
-    size: 16
-  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "body1"
-  }, t('assistant_create.title'))))));
+    onSelect: onSelect
+  }));
 };
 
 var _default = AssistantSelection;

package/dist/components/Assistant/AssistantSelectionItem.js

@@ -44,7 +44,9 @@ var styles = {
   "menu-item-icon-button": "styles__menu-item-icon-button___2q_ct",
   "menu-item-actions": "styles__menu-item-actions___1ykUi",
   "chip": "styles__chip___16BPR",
-  "selected-item--mobile": "styles__selected-item--mobile___gxVpw"
+  "selected-item--mobile": "styles__selected-item--mobile___gxVpw",
+  "sidebar-item": "styles__sidebar-item___2Kc78",
+  "sidebar-item-icon": "styles__sidebar-item-icon___2qKQL"
 };
 
 var AssistantSelectionItem = function AssistantSelectionItem(_ref) {

package/dist/components/Assistant/AssistantSidebarItem.d.ts

@@ -0,0 +1,9 @@
+export default AssistantSidebarItem;
+/**
+ * The "Assistant" item of the sidebar: opens the assistant menu. Picking
+ * an assistant starts a new conversation with it, since a conversation
+ * keeps the assistant it started with.
+ */
+declare function AssistantSidebarItem({ className }: {
+    className: any;
+}): JSX.Element;

package/dist/components/Assistant/AssistantSidebarItem.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _twakeIcons = require("@linagora/twake-icons");
+
+var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
+
+var _twakeI18n = require("twake-i18n");
+
+var _AssistantMenu = _interopRequireDefault(require("./AssistantMenu"));
+
+var _useConversation2 = _interopRequireDefault(require("../../hooks/useConversation"));
+
+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 = {
+  "assistant-container": "styles__assistant-container___2WDzp",
+  "trigger-button": "styles__trigger-button___yyIz8",
+  "assistant-icon": "styles__assistant-icon___1VM6i",
+  "assistant-icon--small": "styles__assistant-icon--small___3D9po",
+  "assistant-icon--composer": "styles__assistant-icon--composer___1i3dU",
+  "menu-item": "styles__menu-item___1jvWN",
+  "create-item": "styles__create-item___3ZARq",
+  "menu-item-icon-button": "styles__menu-item-icon-button___2q_ct",
+  "menu-item-actions": "styles__menu-item-actions___1ykUi",
+  "chip": "styles__chip___16BPR",
+  "selected-item--mobile": "styles__selected-item--mobile___gxVpw",
+  "sidebar-item": "styles__sidebar-item___2Kc78",
+  "sidebar-item-icon": "styles__sidebar-item-icon___2qKQL"
+};
+
+/**
+ * The "Assistant" item of the sidebar: opens the assistant menu. Picking
+ * an assistant starts a new conversation with it, since a conversation
+ * keeps the assistant it started with.
+ */
+var AssistantSidebarItem = function AssistantSidebarItem(_ref) {
+  var className = _ref.className;
+
+  var _useI18n = (0, _twakeI18n.useI18n)(),
+      t = _useI18n.t;
+
+  var anchorRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useConversation = (0, _useConversation2.default)(),
+      createNewConversation = _useConversation.createNewConversation;
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ListItem.default, {
+    button: true,
+    ref: anchorRef,
+    onClick: function onClick() {
+      return setOpen(true);
+    },
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    className: (0, _classnames.default)('u-ph-half', styles['sidebar-item'], className)
+  }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
+    className: styles['sidebar-item-icon']
+  }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: _twakeIcons.Apps,
+    size: 16,
+    "aria-hidden": "true"
+  })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    className: "u-m-0",
+    primary: t('assistant.sidebar.assistant'),
+    primaryTypographyProps: {
+      variant: 'body2'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: _twakeIcons.Dropdown,
+    size: 16,
+    color: "var(--iconTextColor)",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/_react.default.createElement(_AssistantMenu.default, {
+    anchorRef: anchorRef,
+    open: open,
+    onClose: function onClose() {
+      return setOpen(false);
+    },
+    onSelect: createNewConversation
+  }));
+};
+
+var _default = AssistantSidebarItem;
+exports.default = _default;

package/dist/components/Assistant/styles.styl

@@ -57,3 +57,16 @@
   border-radius 100%
   color var(--white)
   background-color var(--malachite)
+
+.sidebar-item
+  // A sidebar item of the design: 36px min height, 8px gutter, 8px radius,
+  // 12px between the icon and the text
+  min-height 36px !important
+  padding-top 5px !important
+  padding-bottom 5px !important
+  border-radius 8px !important
+  gap 12px !important
+
+.sidebar-item-icon
+  min-width 0 !important
+  color var(--iconTextColor)