cozy-search 2.6.2 → 2.7.0

package/dist/components/Messages/AssistantMessage.js

@@ -9,24 +9,25 @@ exports.default = void 0;
 
 var _react = require("@assistant-ui/react");
 
-var _twakeIcons = require("@linagora/twake-icons");
-
 var _react2 = _interopRequireDefault(require("react"));
 
 var _Alert = _interopRequireDefault(require("cozy-ui/transpiled/react/Alert"));
 
-var _Box = _interopRequireDefault(require("cozy-ui/transpiled/react/Box"));
-
-var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
-
 var _twakeI18n = require("twake-i18n");
 
 var _MarkdownText = _interopRequireDefault(require("./MarkdownText"));
 
-var _TwakeAssistantIcon = require("../AssistantIcon/TwakeAssistantIcon");
-
 var _Sources = _interopRequireDefault(require("../Conversations/Sources/Sources"));
 
+var styles = {
+  "cozyThread-user-messages": "styles__cozyThread-user-messages___3Hfj-",
+  "cozyThread-user-messages--light": "styles__cozyThread-user-messages--light___1jBny",
+  "cozyThread-user-messages--dark": "styles__cozyThread-user-messages--dark___1Om3B",
+  "thinking-dots": "styles__thinking-dots___1HwKW",
+  "thinking-dot": "styles__thinking-dot___1muTY",
+  "thinking-bounce": "styles__thinking-bounce___2IfNu"
+};
+
 var useIsErrorMessage = function useIsErrorMessage() {
   return (0, _react.useMessage)(function (s) {
     var _s$metadata, _s$metadata$custom;
@@ -55,19 +56,22 @@ var AssistantMessage = function AssistantMessage() {
   });
   return /*#__PURE__*/_react2.default.createElement(_react.MessagePrimitive.Root, {
     className: "u-mt-1-half"
-  }, isThinking && /*#__PURE__*/_react2.default.createElement(_Box.default, {
-    display: "flex",
-    alignItems: "center",
-    gridGap: 12
-  }, /*#__PURE__*/_react2.default.createElement(_twakeIcons.Icon, {
-    icon: _TwakeAssistantIcon.TwakeAssistantIcon,
-    size: 24,
-    className: "u-mh-half",
-    color: "var(--primaryColor)"
-  }), /*#__PURE__*/_react2.default.createElement(_Typography.default, {
-    variant: "h6",
-    display: "inline"
-  }, t('assistant.message.running'))), isError ? /*#__PURE__*/_react2.default.createElement(_Alert.default, {
+  }, isThinking &&
+  /*#__PURE__*/
+  // Three dots bouncing one after the other while the answer is
+  // awaited (the design's "icon animation"); the label is for
+  // screen readers only.
+  _react2.default.createElement("div", {
+    role: "status",
+    "aria-label": t('assistant.message.running'),
+    className: styles['thinking-dots']
+  }, /*#__PURE__*/_react2.default.createElement("span", {
+    className: styles['thinking-dot']
+  }), /*#__PURE__*/_react2.default.createElement("span", {
+    className: styles['thinking-dot']
+  }), /*#__PURE__*/_react2.default.createElement("span", {
+    className: styles['thinking-dot']
+  })), isError ? /*#__PURE__*/_react2.default.createElement(_Alert.default, {
     severity: "error"
   }, t('assistant.default_error')) : /*#__PURE__*/_react2.default.createElement(_react.MessagePrimitive.Content, {
     components: {

package/dist/components/Messages/UserMessage.js

@@ -22,7 +22,10 @@ var _CozyTheme = require("cozy-ui-plus/dist/providers/CozyTheme");
 var styles = {
   "cozyThread-user-messages": "styles__cozyThread-user-messages___3Hfj-",
   "cozyThread-user-messages--light": "styles__cozyThread-user-messages--light___1jBny",
-  "cozyThread-user-messages--dark": "styles__cozyThread-user-messages--dark___1Om3B"
+  "cozyThread-user-messages--dark": "styles__cozyThread-user-messages--dark___1Om3B",
+  "thinking-dots": "styles__thinking-dots___1HwKW",
+  "thinking-dot": "styles__thinking-dot___1muTY",
+  "thinking-bounce": "styles__thinking-bounce___2IfNu"
 };
 
 var UserMessage = function UserMessage() {

package/dist/components/Messages/styles.styl

@@ -7,3 +7,44 @@
 
   &--dark
     background var(--grey900)
+
+// The 24px "icon animation" of the design: three 3.8px dots, 6.09px apart,
+// each rising 2.855px and growing to 115% over 250ms then falling back,
+// 150ms after the previous one, on a 1.2s loop.
+.thinking-dots
+  display flex
+  align-items center
+  gap 2.28px
+  width 24px
+  height 24px
+  padding-left 4px
+  margin-left 8px
+  box-sizing border-box
+
+.thinking-dot
+  display block
+  width 3.8px
+  height 3.8px
+  border-radius 50%
+  background-color #51ACF0
+  animation thinking-bounce 1.2s cubic-bezier(0.33, 0, 0.67, 1) infinite
+
+  &:nth-child(2)
+    animation-delay 150ms
+
+  &:nth-child(3)
+    animation-delay 300ms
+
+@keyframes thinking-bounce
+  0%
+    transform none
+  20.83%
+    transform translateY(-2.855px) scale(1.15)
+  41.67%
+    transform none
+  100%
+    transform none
+
+@media (prefers-reduced-motion: reduce)
+  .thinking-dot
+    animation none

package/dist/components/Search/SearchBarMobile.js

@@ -13,10 +13,20 @@ var _SearchBar = _interopRequireDefault(require("cozy-ui/transpiled/react/Search
 
 var styles = {
   "composerContainer": "styles__composerContainer___3bNfY",
+  "composerContainer--mobile": "styles__composerContainer--mobile___nIYa-",
+  "composerContainer--mobile-dark": "styles__composerContainer--mobile-dark___12Go9",
+  "composer-dock": "styles__composer-dock___2nPT8",
   "composerActions": "styles__composerActions___2xQEH",
+  "welcome": "styles__welcome___ozY_t",
+  "welcome-halo": "styles__welcome-halo___3jlz_",
+  "welcome-halo--dark": "styles__welcome-halo--dark___fV9pN",
+  "welcome-title": "styles__welcome-title___sBOKX",
   "conversationBar": "styles__conversationBar___2J-Us",
   "conversationBar--mobile": "styles__conversationBar--mobile___1jdg8",
+  "viewport-fade-top": "styles__viewport-fade-top___3j8Lv",
+  "viewport-fade-top--visible": "styles__viewport-fade-top--visible___32uyl",
   "conversationViewport": "styles__conversationViewport___24jYX",
+  "conversationViewport--filled": "styles__conversationViewport--filled___T2QFN",
   "conversationBar-input": "styles__conversationBar-input___2DfdZ",
   "chatConversation": "styles__chatConversation___2EmkA",
   "conversationHeaderBar": "styles__conversationHeaderBar___C8tlD",
@@ -35,14 +45,12 @@ var styles = {
   "cozyThread-messageContent": "styles__cozyThread-messageContent___2HjdB",
   "conversation-list-item": "styles__conversation-list-item___rQapI",
   "conversation-list-item-action": "styles__conversation-list-item-action___qiuKm",
-  "conversation-list-item--selected--light": "styles__conversation-list-item--selected--light___3WvIn",
-  "conversation-list-item--selected--dark": "styles__conversation-list-item--selected--dark___JDQlY",
+  "conversation-list-item--selected": "styles__conversation-list-item--selected___2D5_3",
   "conversation-list-item--wider": "styles__conversation-list-item--wider___2Tl2c",
-  "conversation-list-item-divider": "styles__conversation-list-item-divider___2LOP1",
   "conversation-list-item-text": "styles__conversation-list-item-text___31VBM",
   "conversation-list-item-title": "styles__conversation-list-item-title___3je_6",
-  "conversation-list-item-meta": "styles__conversation-list-item-meta___3Zk-r",
-  "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0"
+  "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0",
+  "conversation-list-item-meta": "styles__conversation-list-item-meta___3Zk-r"
 };
 
 var SearchBarMobile = function SearchBarMobile(_ref) {

package/dist/components/Sidebar/index.js

@@ -11,14 +11,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 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 _reactRouterDom = require("react-router-dom");
 
+var _twakeIcons = require("@linagora/twake-icons");
+
 var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
 
 var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
@@ -39,6 +39,10 @@ var _useConversation2 = _interopRequireDefault(require("../../hooks/useConversat
 
 var _useFetchConversations = _interopRequireDefault(require("../../hooks/useFetchConversations"));
 
+var _AssistantSelection = _interopRequireDefault(require("../Assistant/AssistantSelection"));
+
+var _AssistantSidebarItem = _interopRequireDefault(require("../Assistant/AssistantSidebarItem"));
+
 var _AssistantProvider = require("../AssistantProvider");
 
 var _PrettyScrollbar = _interopRequireDefault(require("../Containers/PrettyScrollbar"));
@@ -51,8 +55,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var styles = {
   "sidebar-container": "styles__sidebar-container___155dK",
+  "sidebar-rail": "styles__sidebar-rail___3-veF",
   "sidebar-overlay--mobile": "styles__sidebar-overlay--mobile___vvKHu",
-  "menu-toggle-floating": "styles__menu-toggle-floating___2GTmQ"
+  "sidebar-bar--mobile": "styles__sidebar-bar--mobile___lHGA9"
 };
 
 var Sidebar = function Sidebar(_ref) {
@@ -85,12 +90,15 @@ var Sidebar = function Sidebar(_ref) {
   var _useFetchConversation = (0, _useFetchConversations.default)(),
       conversations = _useFetchConversation.conversations,
       hasMore = _useFetchConversation.hasMore,
-      fetchMore = _useFetchConversation.fetchMore; // When the sidebar is closed on mobile, the toggle sits over the scrolling
-  // conversation and must read as a distinct floating button, not blend into
-  // the text behind it.
+      fetchMore = _useFetchConversation.fetchMore; // Closed on mobile, the sidebar shrinks to an opaque bar over the top of
+  // the conversation (the toggle and the assistant chip), the text
+  // scrolling under it.
+
 
+  var isMobileBar = !sidebarOpen && isMobile; // Closed on desktop, the sidebar is a narrow rail with the toggle and the
+  // new-chat button centered in it.
 
-  var isFloatingToggle = !sidebarOpen && isMobile;
+  var isRail = !sidebarOpen && !isMobile;
 
   var onToggleSidebar = function onToggleSidebar() {
     setSidebarOpen(!sidebarOpen);
@@ -113,43 +121,56 @@ var Sidebar = function Sidebar(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('u-flex u-flex-column u-h-100 u-bdw-1', className, (_cx = {
-      'u-w-auto': !sidebarOpen
-    }, (0, _defineProperty2.default)(_cx, styles['sidebar-container'], sidebarOpen), (0, _defineProperty2.default)(_cx, 'u-left-0 u-pos-absolute', isMobile), _cx))
+    // The host's bottom padding of the sidebar is not for the bar, which
+    // must be exactly 48px: the conversation is padded for that height
+    className: (0, _classnames.default)('u-flex u-flex-column u-bdw-1', !isMobileBar && className, (_cx = {
+      'u-h-100': !isMobileBar,
+      'u-w-100': isMobileBar
+    }, (0, _defineProperty2.default)(_cx, styles['sidebar-container'], sidebarOpen), (0, _defineProperty2.default)(_cx, styles['sidebar-rail'], isRail), (0, _defineProperty2.default)(_cx, styles['sidebar-bar--mobile'], isMobileBar), (0, _defineProperty2.default)(_cx, 'u-left-0 u-pos-absolute', isMobile), _cx))
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-flex u-flex-items-center u-flex-justify-between u-ph-1 u-pv-1"
+    className: (0, _classnames.default)('u-flex u-flex-items-center', {
+      'u-ph-1-half u-pv-1 u-flex-justify-between': sidebarOpen,
+      'u-ph-1 u-pv-1 u-flex-justify-center': isRail,
+      'u-ph-1 u-pv-half u-flex-justify-between': isMobileBar
+    })
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('u-flex', (0, _defineProperty2.default)({
-      'u-bdrs-circle': isFloatingToggle
-    }, styles['menu-toggle-floating'], isFloatingToggle))
+    className: "u-flex u-flex-items-center"
   }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    size: "medium",
-    edge: "start",
-    className: "u-bdrs-6",
+    size: "small",
     onClick: onToggleSidebar,
     "aria-label": t('assistant.sidebar.toggle_sidebar')
   }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: _twakeIcons.Menu,
+    size: 16,
     "aria-hidden": "true"
-  }))), /*#__PURE__*/_react.default.createElement("div", null, sidebarOpen && (0, _cozyFlags.default)('cozy.assistant.search-conversation.enabled') && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    size: "medium",
-    edge: "end",
-    className: "u-bdrs-6",
+  })), isMobileBar && (0, _cozyFlags.default)('cozy.assistant.create-assistant.enabled') &&
+  /*#__PURE__*/
+  // A conversation keeps the assistant it started with: picking
+  // another one starts a new conversation, as from the sidebar
+  _react.default.createElement(_AssistantSelection.default, {
+    borderless: true,
+    className: "u-ml-half",
+    onSelect: createNewConversation
+  })), /*#__PURE__*/_react.default.createElement("div", null, sidebarOpen && (0, _cozyFlags.default)('cozy.assistant.search-conversation.enabled') && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    size: "small",
     onClick: onToggleSearch,
     "aria-label": t('assistant.sidebar.toggle_search')
   }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: _twakeIcons.Magnifier,
+    size: 16,
     "aria-hidden": "true"
   })), sidebarOpen && isMobile && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    size: "medium",
-    className: "u-bdrs-6",
+    size: "small",
     onClick: onToggleSidebar,
     "aria-label": t('assistant.sidebar.close_sidebar')
   }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: _twakeIcons.CrossSmall,
+    size: 16,
     "aria-hidden": "true"
-  })))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-ph-1 u-pb-half"
+  })))), !isMobileBar && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('u-ph-1 u-pb-half', {
+      'u-flex u-flex-justify-center': isRail
+    })
   }, sidebarOpen ? /*#__PURE__*/_react.default.createElement(_Buttons.default, {
     className: "u-w-100 u-bdrs-6",
     label: t('assistant.sidebar.create_new'),
@@ -159,7 +180,7 @@ var Sidebar = function Sidebar(_ref) {
     fullWidth: true,
     variant: "primary",
     onClick: onCreateNewConversation
-  }) : isMobile ? null : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  }) : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     size: "medium",
     className: "u-bg-primaryColor u-white u-bdrs-6",
     onClick: onCreateNewConversation,
@@ -167,11 +188,15 @@ var Sidebar = function Sidebar(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: _twakeIcons.Plus,
     "aria-hidden": "true"
-  }))), sidebarOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "h6",
-    className: "u-ph-1 u-pv-half"
+  }))), sidebarOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _cozyFlags.default)('cozy.assistant.create-assistant.enabled') && /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-ph-1 u-mt-1"
+  }, /*#__PURE__*/_react.default.createElement(_AssistantSidebarItem.default, null)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "caption",
+    color: "textSecondary",
+    component: "h2",
+    className: "u-ph-1 u-mt-1 u-mb-half"
   }, t('assistant.sidebar.recent_chats')), /*#__PURE__*/_react.default.createElement(_PrettyScrollbar.default, {
-    className: "u-flex-auto u-ov-auto u-pb-half"
+    className: "u-flex-auto u-ov-auto u-ph-1 u-pb-half"
   }, /*#__PURE__*/_react.default.createElement(_ConversationList.default, {
     conversations: conversations,
     currentConversationId: currentConversationId,

package/dist/components/Sidebar/styles.styl

@@ -3,7 +3,7 @@
 .sidebar-container
   width 236px
   min-width 236px
-  background-color var(--paperBackgroundColor)
+  background-color var(--defaultBackgroundColor)
   z-index calc(var(--zIndex-modal) + 30)
 
   +mobile()
@@ -11,6 +11,11 @@
     width calc(100vw - 48px)
     min-width calc(100vw - 48px)
 
+.sidebar-rail
+  width 72px
+  min-width 72px
+  background-color var(--defaultBackgroundColor)
+
 .sidebar-overlay--mobile
   background-color var(--actionColorActive)
   position fixed
@@ -20,13 +25,9 @@
   bottom 0
   z-index calc(var(--zIndex-modal) + 20)
 
-.menu-toggle-floating
-  // When the sidebar is closed on mobile, the toggle button floats over the
-  // scrolling conversation. Wrap it in a circular chip with an elevation
-  // shadow (M3 elevation 2) and a 60%-opacity paper background (as in the
-  // design) so the circle is semi-transparent while the icon inside stays
-  // fully opaque. The transparency is on the background color (not the
-  // element's opacity) precisely so it does not fade the icon too.
-  // unquote() keeps Stylus from parsing `in` as an operator.
-  background-color unquote('color-mix(in srgb, var(--paperBackgroundColor) 60%, transparent)')
-  box-shadow 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15)
+.sidebar-bar--mobile
+  // Closed on mobile: an opaque 48px bar over the top of the conversation,
+  // the text scrolling under it. Above the conversation, below the open
+  // sidebar and its overlay.
+  background-color var(--paperBackgroundColor)
+  z-index calc(var(--zIndex-modal) + 15)

package/dist/components/TwakeKnowledges/SourceButton.d.ts

@@ -0,0 +1,14 @@
+export namespace CHIP_CLASSES {
+    let icon: string;
+    let label: string;
+}
+export default SourceButton;
+/**
+ * A knowledge source of the composer (web search, emails, Drive folder),
+ * as the 32px icon button of the design. `icon` is a twake-icons component,
+ * monochrome (tinted: primary when active, secondary text color otherwise)
+ * or multicolor with `preserveColor` (dimmed when inactive). Without
+ * onClick it is a static indicator, not a button.
+ */
+declare const SourceButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/dist/components/TwakeKnowledges/SourceButton.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CHIP_CLASSES = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _twakeIcons = require("@linagora/twake-icons");
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _excluded = ["icon", "label", "isActive", "preserveColor", "onClick", "className"];
+
+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 = {
+  "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 classes giving a cozy-ui Chip the spacing of the composer chips of the
+ * design (with `styles['source-chip']` on the chip itself).
+ */
+
+var CHIP_CLASSES = {
+  icon: styles['source-chip-icon'],
+  label: styles['source-chip-label']
+};
+/**
+ * A knowledge source of the composer (web search, emails, Drive folder),
+ * as the 32px icon button of the design. `icon` is a twake-icons component,
+ * monochrome (tinted: primary when active, secondary text color otherwise)
+ * or multicolor with `preserveColor` (dimmed when inactive). Without
+ * onClick it is a static indicator, not a button.
+ */
+
+exports.CHIP_CLASSES = CHIP_CLASSES;
+var SourceButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var icon = _ref.icon,
+      label = _ref.label,
+      _ref$isActive = _ref.isActive,
+      isActive = _ref$isActive === void 0 ? true : _ref$isActive,
+      _ref$preserveColor = _ref.preserveColor,
+      preserveColor = _ref$preserveColor === void 0 ? false : _ref$preserveColor,
+      onClick = _ref.onClick,
+      className = _ref.className,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var content = preserveColor ? /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: icon,
+    size: 20,
+    preserveColor: true,
+    className: (0, _classnames.default)((0, _defineProperty2.default)({}, styles['source-button-image--inactive'], !isActive))
+  }) : /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
+    icon: icon,
+    size: 20,
+    color: isActive ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+  });
+
+  if (!onClick) {
+    return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+      ref: ref,
+      role: "img",
+      "aria-label": label,
+      title: label,
+      className: (0, _classnames.default)('u-flex u-flex-items-center u-flex-justify-center', styles['source-button'], className)
+    }, props), content);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_IconButton.default, (0, _extends2.default)({
+    ref: ref,
+    size: "small",
+    "aria-label": label,
+    title: label,
+    onClick: onClick,
+    className: (0, _classnames.default)(styles['source-button'], className)
+  }, props), content);
+});
+SourceButton.displayName = 'SourceButton';
+var _default = SourceButton;
+exports.default = _default;

package/dist/components/TwakeKnowledges/TwakeKnowledgeSelector.d.ts

@@ -1,4 +1,13 @@
 export default TwakeKnowledgeSelector;
+/**
+ * The knowledge sources of the composer. The Drive source is always on:
+ * on desktop it is a chip named after the knowledge base folder (the
+ * whole Drive without one), whose menu opens the folder or changes it;
+ * on mobile it is an icon button. Web search (a toggle) and emails are
+ * icon buttons behind their flags: emails show on the default assistant
+ * always, on a custom assistant once enabled in the wizard. Sources are
+ * enabled/disabled from the wizard, never from the composer.
+ */
 declare function TwakeKnowledgeSelector({ className, websearchEnabled, onToggleWebsearch }: {
     className: any;
     websearchEnabled: any;