cozy-search 2.10.0 → 2.11.0

package/dist/assets/conversation.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32"><path fill="url(#paint0_linear_37801_44158)" fill-opacity=".9" d="M21.222 0c3.175 0 4.702.295 6.289 1.143a8.06 8.06 0 0 1 3.346 3.346C31.705 6.076 32 7.602 32 10.778v10.444c0 3.175-.295 4.702-1.143 6.289a8.06 8.06 0 0 1-3.346 3.346C25.924 31.705 24.398 32 21.222 32H10.778c-3.176 0-4.702-.295-6.289-1.143a8.06 8.06 0 0 1-3.346-3.346C.295 25.924 0 24.398 0 21.222V10.778c0-3.176.295-4.702 1.143-6.289A8.06 8.06 0 0 1 4.49 1.143C6.076.295 7.602 0 10.778 0zm0 2.91H10.778c-2.736 0-3.81.206-4.917.799A5.15 5.15 0 0 0 3.71 5.86c-.593 1.107-.8 2.18-.8 4.917v10.444c0 2.736.207 3.81.8 4.917a5.15 5.15 0 0 0 2.15 2.152c1.107.593 2.18.8 4.917.8h10.444c2.736 0 3.81-.207 4.917-.8a5.15 5.15 0 0 0 2.152-2.152c.593-1.107.8-2.18.8-4.917V10.778c0-2.736-.207-3.81-.8-4.917a5.15 5.15 0 0 0-2.15-2.151c-1.107-.593-2.18-.8-4.917-.8m-6.677 18.18a1.455 1.455 0 0 1 0 2.91H8.728a1.455 1.455 0 1 1 0-2.91zm8.728-6.544a1.455 1.455 0 1 1 0 2.909H8.727a1.455 1.455 0 1 1 0-2.91zm0-6.546a1.455 1.455 0 1 1 0 2.91H8.727a1.455 1.455 0 1 1 0-2.91z"/><path fill="url(#paint1_linear_37801_44158)" fill-opacity=".9" d="M22.167 20.006a.44.44 0 0 0-.355.316l-.001.006-.465 1.806a.3.3 0 0 1-.212.212l-1.806.466-.007.002a.442.442 0 0 0 0 .85l.007.001 1.806.466a.3.3 0 0 1 .212.211l.465 1.806.001.006a.441.441 0 0 0 .85 0l.002-.006.466-1.806a.3.3 0 0 1 .212-.211l1.806-.466.004-.001a.442.442 0 0 0 0-.852h-.004l-1.807-.466a.3.3 0 0 1-.211-.212l-.465-1.806-.002-.006a.44.44 0 0 0-.497-.316"/><defs><linearGradient id="paint0_linear_37801_44158" x1="0" x2="86.619" y1="16" y2="78.512" gradientUnits="userSpaceOnUse"><stop stop-color="#25c3f8"/><stop offset=".319" stop-color="#666fde"/><stop offset="1" stop-color="#ff0"/></linearGradient><linearGradient id="paint1_linear_37801_44158" x1="19" x2="36.531" y1="23.238" y2="35.89" gradientUnits="userSpaceOnUse"><stop stop-color="#00b7ff"/><stop offset=".567" stop-color="#6a70e0"/><stop offset="1" stop-color="#ff0"/></linearGradient></defs></svg>

package/dist/components/Assistant/AssistantContainer.js

@@ -15,8 +15,6 @@ var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
 
 var _AssistantProvider = require("../AssistantProvider");
 
-var _PrettyScrollbar = _interopRequireDefault(require("../Containers/PrettyScrollbar"));
-
 var _Conversation = _interopRequireDefault(require("../Conversations/Conversation"));
 
 var _CozyAssistantRuntimeProvider = _interopRequireDefault(require("../CozyAssistantRuntimeProvider"));
@@ -52,7 +50,7 @@ var AssistantContainer = function AssistantContainer() {
     className: (0, _classnames.default)('u-flex u-ov-hidden u-h-100', styles['assistant-container'])
   }, /*#__PURE__*/_react.default.createElement(_Sidebar.default, {
     className: "u-pb-0-t u-pb-1"
-  }), /*#__PURE__*/_react.default.createElement(_PrettyScrollbar.default, {
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "u-flex-auto u-flex u-flex-column u-pb-0-t u-pb-1 u-ov-hidden"
   }, isOpenSearchConversation && (0, _cozyFlags.default)('cozy.assistant.search-conversation.enabled') ? /*#__PURE__*/_react.default.createElement(_SearchConversation.default, null) : /*#__PURE__*/_react.default.createElement(_CozyAssistantRuntimeProvider.default, null, /*#__PURE__*/_react.default.createElement(_Conversation.default, null))));
 };

package/dist/components/AssistantDesktop.d.ts

@@ -12,6 +12,7 @@ declare namespace AssistantDesktop {
                 hasHalfBorderRadius: PropTypes.Requireable<boolean>;
                 className: PropTypes.Requireable<string>;
                 disabledHover: PropTypes.Requireable<boolean>;
+                disabledAssistantButton: PropTypes.Requireable<boolean>;
             }>>;
         }>>;
     }

package/dist/components/AssistantDesktop.js

@@ -40,7 +40,8 @@ AssistantDesktop.propTypes = {
       size: _propTypes.default.string,
       hasHalfBorderRadius: _propTypes.default.bool,
       className: _propTypes.default.string,
-      disabledHover: _propTypes.default.bool
+      disabledHover: _propTypes.default.bool,
+      disabledAssistantButton: _propTypes.default.bool
     })
   })
 };

package/dist/components/AssistantMobile.js

@@ -29,8 +29,7 @@ var styles = {
   "searchBarDesktop--result": "styles__searchBarDesktop--result___2bQQy",
   "suggestionsPlaceholder": "styles__suggestionsPlaceholder___y-vsv",
   "search-bar-icon": "styles__search-bar-icon___1affF",
-  "search-bar--mobile": "styles__search-bar--mobile___1CSb2",
-  "not-found-icon": "styles__not-found-icon___1as3P"
+  "search-bar--mobile": "styles__search-bar--mobile___1CSb2"
 };
 
 var AssistantMobile = function AssistantMobile(_ref) {

package/dist/components/AssistantProvider.d.ts

@@ -15,6 +15,7 @@ export interface AssistantContextValue {
   setIsOpenSearchConversation: (isOpen: boolean) => void
   websearchEnabled: boolean
   setWebsearchEnabled: React.Dispatch<React.SetStateAction<boolean>>
+  hasCompactPrompt: boolean
 }
 
 export function useAssistant(): AssistantContextValue

package/dist/components/AssistantProvider.js

@@ -38,7 +38,9 @@ var useAssistant = function useAssistant() {
 exports.useAssistant = useAssistant;
 
 var AssistantProvider = function AssistantProvider(_ref) {
-  var children = _ref.children;
+  var children = _ref.children,
+      _ref$hasCompactPrompt = _ref.hasCompactPrompt,
+      hasCompactPrompt = _ref$hasCompactPrompt === void 0 ? false : _ref$hasCompactPrompt;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -90,9 +92,10 @@ var AssistantProvider = function AssistantProvider(_ref) {
       setSelectedAssistantId: setSelectedAssistantId,
       setIsOpenSearchConversation: setIsOpenSearchConversation,
       websearchEnabled: websearchEnabled,
-      setWebsearchEnabled: setWebsearchEnabled
+      setWebsearchEnabled: setWebsearchEnabled,
+      hasCompactPrompt: hasCompactPrompt
     };
-  }, [isOpenCreateAssistant, isOpenDeleteAssistant, isOpenEditAssistant, assistantIdInAction, selectedAssistantId, isOpenSearchConversation, websearchEnabled]);
+  }, [isOpenCreateAssistant, isOpenDeleteAssistant, isOpenEditAssistant, assistantIdInAction, selectedAssistantId, isOpenSearchConversation, websearchEnabled, hasCompactPrompt]);
   return /*#__PURE__*/_react.default.createElement(AssistantContext.Provider, {
     value: value
   }, children);

package/dist/components/Conversations/Conversation.js

@@ -27,6 +27,10 @@ var _twakeI18n = require("twake-i18n");
 
 var _ConversationComposer = _interopRequireDefault(require("./ConversationComposer"));
 
+var _ConversationComposerCompact = require("./ConversationComposerCompact");
+
+var _AssistantProvider = require("../AssistantProvider");
+
 var _AssistantMessage = _interopRequireDefault(require("../Messages/AssistantMessage"));
 
 var _UserMessage = _interopRequireDefault(require("../Messages/UserMessage"));
@@ -39,6 +43,8 @@ var styles = {
   "composerContainer": "styles__composerContainer___3bNfY",
   "composerContainer--mobile": "styles__composerContainer--mobile___nIYa-",
   "composerContainer--mobile-dark": "styles__composerContainer--mobile-dark___12Go9",
+  "composerContainer--compact": "styles__composerContainer--compact___35e18",
+  "composerContainer--single-line": "styles__composerContainer--single-line___2yeWP",
   "composer-dock": "styles__composer-dock___2nPT8",
   "composerActions": "styles__composerActions___2xQEH",
   "welcome": "styles__welcome___ozY_t",
@@ -71,6 +77,9 @@ var styles = {
   "conversation-list-item-action": "styles__conversation-list-item-action___qiuKm",
   "conversation-list-item--selected": "styles__conversation-list-item--selected___2D5_3",
   "conversation-list-item--wider": "styles__conversation-list-item--wider___2Tl2c",
+  "conversation-list-item-container": "styles__conversation-list-item-container___36VTD",
+  "conversation-list-item-menu-button": "styles__conversation-list-item-menu-button___2ZYvH",
+  "conversation-list-item-secondary-action": "styles__conversation-list-item-secondary-action___2vwnw",
   "conversation-list-item-text": "styles__conversation-list-item-text___31VBM",
   "conversation-list-item-title": "styles__conversation-list-item-title___3je_6",
   "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0",
@@ -91,6 +100,9 @@ var Conversation = function Conversation(_ref) {
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
       isMobile = _useBreakpoints.isMobile;
 
+  var _useAssistant = (0, _AssistantProvider.useAssistant)(),
+      hasCompactPrompt = _useAssistant.hasCompactPrompt;
+
   var isThreadEmpty = (0, _react.useThread)(function (state) {
     return state.messages.length === 0;
   }); // On mobile the conversation scrolls under the sidebar bar: once it has,
@@ -105,18 +117,14 @@ var Conversation = function Conversation(_ref) {
   return /*#__PURE__*/_react2.default.createElement(_react.ThreadPrimitive.Root, {
     // The gutters: the messages and the composer are centered up to a max
     // width, and keep a margin from the edges when the screen is narrower
-    className: (0, _classnames.default)('u-flex u-flex-column u-flex-items-center u-h-100 u-bxz u-pos-relative', isMobile ? 'u-ph-1' : 'u-ph-2', className, {
-      'u-flex-justify-between': !isThreadEmpty,
-      'u-flex-justify-center': isThreadEmpty
-    })
+    className: (0, _classnames.default)('u-flex u-flex-column u-flex-items-center u-flex-justify-between u-h-100 u-bxz u-pos-relative', isMobile ? 'u-ph-1' : 'u-ph-2', className)
   }, /*#__PURE__*/_react2.default.createElement(_react.ThreadPrimitive.Empty, null, /*#__PURE__*/_react2.default.createElement("div", {
-    className: (0, _classnames.default)('u-pos-relative u-w-100 u-maw-7 u-mh-auto u-mb-3 u-flex u-flex-items-center u-flex-justify-center', styles['welcome'])
+    className: (0, _classnames.default)('u-pos-relative u-w-100 u-maw-7 u-mh-auto u-mb-3 u-flex u-flex-auto u-flex-items-center u-flex-justify-center', styles['welcome'])
   }, /*#__PURE__*/_react2.default.createElement("div", {
     "aria-hidden": "true",
     className: (0, _classnames.default)(styles['welcome-halo'], (0, _defineProperty2.default)({}, styles['welcome-halo--dark'], !isLight))
   }), /*#__PURE__*/_react2.default.createElement(_Typography.default, {
-    variant: "h3",
-    component: "h2",
+    variant: "h2",
     className: (0, _classnames.default)('u-pos-relative u-fw-normal u-ta-center', styles['welcome-title'])
   }, t('assistant.message.welcome')))), isMobile && !isThreadEmpty && /*#__PURE__*/_react2.default.createElement("div", {
     "aria-hidden": "true",
@@ -138,11 +146,11 @@ var Conversation = function Conversation(_ref) {
     }
   }))), /*#__PURE__*/_react2.default.createElement("div", {
     className: (0, _classnames.default)('u-w-100', (0, _defineProperty2.default)({}, styles['composer-dock'], !isThreadEmpty))
-  }, /*#__PURE__*/_react2.default.createElement(_ConversationComposer.default, null), /*#__PURE__*/_react2.default.createElement(_Typography.default, {
+  }, hasCompactPrompt ? /*#__PURE__*/_react2.default.createElement(_ConversationComposerCompact.ConversationComposerCompact, null) : /*#__PURE__*/_react2.default.createElement(_ConversationComposer.default, null), /*#__PURE__*/_react2.default.createElement(_Typography.default, {
     variant: "caption",
     color: "textSecondary",
     component: "p",
-    className: "u-w-100 u-maw-7 u-mh-auto u-mt-half u-mb-0 u-ta-center"
+    className: "u-w-100 u-maw-5-t u-maw-7 u-mh-auto u-mt-1-half  u-mb-0 u-ta-center"
   }, t('assistant.disclaimer'))));
 };
 

package/dist/components/Conversations/ConversationActions.js

@@ -191,6 +191,7 @@ var ConversationActions = function ConversationActions(_ref) {
     className: buttonClassName,
     size: "small",
     ref: anchorRef,
+    "aria-expanded": isMenuOpen,
     onClick: toggleMenu
   }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
     icon: _twakeIcons.Dots

package/dist/components/Conversations/ConversationBar.d.ts

@@ -1,7 +1,5 @@
 export default ConversationBar;
-declare function ConversationBar({ value, isEmpty, onKeyDown, ...props }: {
+declare function ConversationBar({ onHeightChange, ...props }: {
     [x: string]: any;
-    value: any;
-    isEmpty: any;
-    onKeyDown: any;
+    onHeightChange: any;
 }): JSX.Element;

package/dist/components/Conversations/ConversationBar.js

@@ -27,7 +27,7 @@ var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
 
 var _twakeI18n = require("twake-i18n");
 
-var _excluded = ["value", "isEmpty", "onKeyDown"];
+var _excluded = ["onHeightChange"];
 
 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); }
 
@@ -37,6 +37,8 @@ var styles = {
   "composerContainer": "styles__composerContainer___3bNfY",
   "composerContainer--mobile": "styles__composerContainer--mobile___nIYa-",
   "composerContainer--mobile-dark": "styles__composerContainer--mobile-dark___12Go9",
+  "composerContainer--compact": "styles__composerContainer--compact___35e18",
+  "composerContainer--single-line": "styles__composerContainer--single-line___2yeWP",
   "composer-dock": "styles__composer-dock___2nPT8",
   "composerActions": "styles__composerActions___2xQEH",
   "welcome": "styles__welcome___ozY_t",
@@ -69,6 +71,9 @@ var styles = {
   "conversation-list-item-action": "styles__conversation-list-item-action___qiuKm",
   "conversation-list-item--selected": "styles__conversation-list-item--selected___2D5_3",
   "conversation-list-item--wider": "styles__conversation-list-item--wider___2Tl2c",
+  "conversation-list-item-container": "styles__conversation-list-item-container___36VTD",
+  "conversation-list-item-menu-button": "styles__conversation-list-item-menu-button___2ZYvH",
+  "conversation-list-item-secondary-action": "styles__conversation-list-item-secondary-action___2vwnw",
   "conversation-list-item-text": "styles__conversation-list-item-text___31VBM",
   "conversation-list-item-title": "styles__conversation-list-item-title___3je_6",
   "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0",
@@ -76,9 +81,7 @@ var styles = {
 };
 
 var ConversationBar = function ConversationBar(_ref) {
-  var value = _ref.value,
-      isEmpty = _ref.isEmpty,
-      onKeyDown = _ref.onKeyDown,
+  var onHeightChange = _ref.onHeightChange,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useI18n = (0, _twakeI18n.useI18n)(),
@@ -87,6 +90,13 @@ var ConversationBar = function ConversationBar(_ref) {
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
       isMobile = _useBreakpoints.isMobile;
 
+  var composerRuntime = (0, _react.useComposerRuntime)();
+  var value = (0, _react.useComposer)(function (state) {
+    return state.text;
+  });
+  var isEmpty = (0, _react.useComposer)(function (state) {
+    return state.isEmpty;
+  });
   var inputRef = (0, _react2.useRef)(); // to adjust input height for multiline when typing in it
   // eslint-disable-next-line react-hooks/refs
 
@@ -97,9 +107,13 @@ var ConversationBar = function ConversationBar(_ref) {
     }
   });
 
-  var handleKeyDown = function handleKeyDown(e) {
-    if (isEmpty) return;
-    onKeyDown(e);
+  var handleKeyDown = function handleKeyDown(ev) {
+    if (isEmpty || isMobile) return;
+
+    if (ev.key === 'Enter' && !ev.shiftKey) {
+      ev.preventDefault();
+      composerRuntime.send();
+    }
   };
 
   return /*#__PURE__*/_react2.default.createElement(_SearchBar.default, (0, _extends2.default)({}, props, {
@@ -118,7 +132,8 @@ var ConversationBar = function ConversationBar(_ref) {
         rows: 1,
         multiline: true,
         inputProps: {
-          className: styles['conversationBar-input']
+          className: styles['conversationBar-input'],
+          onHeightChange: onHeightChange
         },
         autoFocus: !isMobile,
         inputComponent: _react.ComposerPrimitive.Input,

package/dist/components/Conversations/ConversationComposer.js

@@ -7,28 +7,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("@assistant-ui/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react2 = _interopRequireWildcard(require("react"));
 
-var _twakeIcons = require("@linagora/twake-icons");
-
 var _cozyFlags = _interopRequireDefault(require("cozy-flags"));
 
-var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
-
 var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
 
-var _CozyTheme = require("cozy-ui/transpiled/react/providers/CozyTheme");
-
 var _ConversationBar = _interopRequireDefault(require("./ConversationBar"));
 
+var _ConversationComposerRoot = require("./ConversationComposerRoot");
+
+var _ConversationSendButton = require("./ConversationSendButton");
+
 var _AssistantSelection = _interopRequireDefault(require("../Assistant/AssistantSelection"));
 
 var _AssistantProvider = require("../AssistantProvider");
@@ -43,6 +37,8 @@ var styles = {
   "composerContainer": "styles__composerContainer___3bNfY",
   "composerContainer--mobile": "styles__composerContainer--mobile___nIYa-",
   "composerContainer--mobile-dark": "styles__composerContainer--mobile-dark___12Go9",
+  "composerContainer--compact": "styles__composerContainer--compact___35e18",
+  "composerContainer--single-line": "styles__composerContainer--single-line___2yeWP",
   "composer-dock": "styles__composer-dock___2nPT8",
   "composerActions": "styles__composerActions___2xQEH",
   "welcome": "styles__welcome___ozY_t",
@@ -75,6 +71,9 @@ var styles = {
   "conversation-list-item-action": "styles__conversation-list-item-action___qiuKm",
   "conversation-list-item--selected": "styles__conversation-list-item--selected___2D5_3",
   "conversation-list-item--wider": "styles__conversation-list-item--wider___2Tl2c",
+  "conversation-list-item-container": "styles__conversation-list-item-container___36VTD",
+  "conversation-list-item-menu-button": "styles__conversation-list-item-menu-button___2ZYvH",
+  "conversation-list-item-secondary-action": "styles__conversation-list-item-secondary-action___2vwnw",
   "conversation-list-item-text": "styles__conversation-list-item-text___31VBM",
   "conversation-list-item-title": "styles__conversation-list-item-title___3je_6",
   "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0",
@@ -82,15 +81,9 @@ var styles = {
 };
 
 var ConversationComposer = function ConversationComposer() {
-  var _cx;
-
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
       isMobile = _useBreakpoints.isMobile;
 
-  var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
-      isLight = _useCozyTheme.isLight;
-
-  var composerRuntime = (0, _react.useComposerRuntime)();
   var isRunning = (0, _react.useThread)(function (state) {
     return state.isRunning;
   });
@@ -102,72 +95,20 @@ var ConversationComposer = function ConversationComposer() {
       websearchEnabled = _useAssistant.websearchEnabled,
       setWebsearchEnabled = _useAssistant.setWebsearchEnabled;
 
-  var value = (0, _react.useComposer)(function (state) {
-    return state.text;
-  });
-  var isEmpty = (0, _react.useComposer)(function (state) {
-    return state.isEmpty;
-  });
-  var handleSend = (0, _react2.useCallback)(function () {
-    composerRuntime.send();
-  }, [composerRuntime]);
-  var handleCancel = (0, _react2.useCallback)(function () {
-    composerRuntime.cancel();
-  }, [composerRuntime]);
-  var handleKeyDown = (0, _react2.useCallback)(function (ev) {
-    if (!isMobile) {
-      if (ev.shiftKey && ev.key === 'Enter') {
-        return;
-      }
-
-      if (ev.key === 'Enter') {
-        ev.preventDefault();
-        handleSend();
-      }
-    }
-  }, [isMobile, handleSend]);
   var handleToggleWebsearch = (0, _react2.useCallback)(function () {
     if (isRunning) return;
     setWebsearchEnabled(function (prev) {
       return !prev;
     });
-  }, [isRunning, setWebsearchEnabled]);
-
-  var sendButton = /*#__PURE__*/_react2.default.createElement(_Buttons.default, (0, _extends2.default)({
-    size: "small",
-    className: "u-miw-auto u-w-2 u-h-2 u-bdrs-circle u-flex-shrink-0",
-    classes: {
-      label: 'u-flex u-w-auto'
-    }
-  }, isRunning ? {
-    label: /*#__PURE__*/_react2.default.createElement(_twakeIcons.Icon, {
-      icon: _twakeIcons.Stop,
-      size: 12
-    }),
-    onClick: handleCancel
-  } : {
-    variant: 'primary',
-    label: /*#__PURE__*/_react2.default.createElement(_twakeIcons.Icon, {
-      icon: _twakeIcons.ArrowUp,
-      size: 16
-    }),
-    onClick: handleSend
-  })); // On mobile the send button sits by the text, the sources are icons and
+  }, [isRunning, setWebsearchEnabled]); // On mobile the send button sits by the text, the sources are icons and
   // the assistant chip picks the assistant; on desktop the send button ends
   // the chips row and the assistant is picked from the sidebar.
 
-
-  return /*#__PURE__*/_react2.default.createElement(_react.ComposerPrimitive.Root, {
-    className: (0, _classnames.default)('u-w-100 u-maw-7 u-mh-auto u-bxz', styles['composerContainer'], (_cx = {}, (0, _defineProperty2.default)(_cx, styles['composerContainer--mobile'], isMobile), (0, _defineProperty2.default)(_cx, styles['composerContainer--mobile-dark'], isMobile && !isLight), _cx))
-  }, /*#__PURE__*/_react2.default.createElement("div", {
+  return /*#__PURE__*/_react2.default.createElement(_ConversationComposerRoot.ConversationComposerRoot, null, /*#__PURE__*/_react2.default.createElement("div", {
     className: "u-flex u-flex-items-start u-flex-justify-between"
-  }, /*#__PURE__*/_react2.default.createElement(_ConversationBar.default, {
-    value: value,
-    isEmpty: isEmpty,
-    onKeyDown: handleKeyDown
-  }), isMobile && /*#__PURE__*/_react2.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement(_ConversationBar.default, null), isMobile && /*#__PURE__*/_react2.default.createElement("div", {
     className: "u-flex u-flex-items-center u-flex-shrink-0"
-  }, sendButton)), /*#__PURE__*/_react2.default.createElement("div", {
+  }, /*#__PURE__*/_react2.default.createElement(_ConversationSendButton.ConversationSendButton, null))), /*#__PURE__*/_react2.default.createElement("div", {
     className: (0, _classnames.default)('u-flex u-flex-items-center u-flex-justify-between', styles['composerActions'])
   }, /*#__PURE__*/_react2.default.createElement("div", {
     className: "u-flex u-flex-items-center u-flex-wrap"
@@ -183,7 +124,7 @@ var ConversationComposer = function ConversationComposer() {
     className: "u-ml-auto",
     websearchEnabled: websearchEnabled,
     onToggleWebsearch: handleToggleWebsearch
-  }) : sendButton));
+  }) : /*#__PURE__*/_react2.default.createElement(_ConversationSendButton.ConversationSendButton, null)));
 };
 
 var _default = ConversationComposer;

package/dist/components/Conversations/ConversationComposerCompact.d.ts

@@ -0,0 +1 @@
+export function ConversationComposerCompact(): JSX.Element;

package/dist/components/Conversations/ConversationComposerCompact.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConversationComposerCompact = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("@assistant-ui/react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _ConversationBar = _interopRequireDefault(require("./ConversationBar"));
+
+var _ConversationComposerRoot = require("./ConversationComposerRoot");
+
+var _ConversationSendButton = require("./ConversationSendButton");
+
+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 = {
+  "composerContainer": "styles__composerContainer___3bNfY",
+  "composerContainer--mobile": "styles__composerContainer--mobile___nIYa-",
+  "composerContainer--mobile-dark": "styles__composerContainer--mobile-dark___12Go9",
+  "composerContainer--compact": "styles__composerContainer--compact___35e18",
+  "composerContainer--single-line": "styles__composerContainer--single-line___2yeWP",
+  "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",
+  "conversationList": "styles__conversationList___2GCzV",
+  "conversationList--container": "styles__conversationList--container___2xRAG",
+  "conversationList--hidden": "styles__conversationList--hidden___20BsT",
+  "conversationListItem--selected": "styles__conversationListItem--selected___2jCyB",
+  "menuToggler": "styles__menuToggler___39GfB",
+  "menuToggler--disabled": "styles__menuToggler--disabled___15vd4",
+  "conversationChips-container": "styles__conversationChips-container___327dE",
+  "conversationChips-startIcon": "styles__conversationChips-startIcon___1yOVn",
+  "conversationChips-chipIcon": "styles__conversationChips-chipIcon___1wmF-",
+  "conversationChips-deleteIcon": "styles__conversationChips-deleteIcon___s9C40",
+  "is-warning": "styles__is-warning___3sa0v",
+  "conversationChips-chip": "styles__conversationChips-chip___2PqQv",
+  "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": "styles__conversation-list-item--selected___2D5_3",
+  "conversation-list-item--wider": "styles__conversation-list-item--wider___2Tl2c",
+  "conversation-list-item-container": "styles__conversation-list-item-container___36VTD",
+  "conversation-list-item-menu-button": "styles__conversation-list-item-menu-button___2ZYvH",
+  "conversation-list-item-secondary-action": "styles__conversation-list-item-secondary-action___2vwnw",
+  "conversation-list-item-text": "styles__conversation-list-item-text___31VBM",
+  "conversation-list-item-title": "styles__conversation-list-item-title___3je_6",
+  "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0",
+  "conversation-list-item-meta": "styles__conversation-list-item-meta___3Zk-r"
+};
+
+var ConversationComposerCompact = function ConversationComposerCompact() {
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var isEmpty = (0, _react.useComposer)(function (state) {
+    return state.isEmpty;
+  });
+
+  var _useState = (0, _react2.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMultiline = _useState2[0],
+      setIsMultiline = _useState2[1]; // Stays multiline until emptied: once the send button leaves its side,
+  // the wider input could fit the text on one line and toggle in a loop
+
+
+  if (isEmpty && isMultiline) {
+    setIsMultiline(false);
+  }
+
+  var handleHeightChange = function handleHeightChange(height, _ref) {
+    var rowHeight = _ref.rowHeight;
+
+    if (height > rowHeight) {
+      setIsMultiline(true);
+    }
+  };
+
+  var isExpanded = !isMobile && isMultiline;
+  return /*#__PURE__*/_react2.default.createElement(_ConversationComposerRoot.ConversationComposerRoot, {
+    className: (0, _classnames.default)(styles['composerContainer--compact'], (0, _defineProperty2.default)({}, styles['composerContainer--single-line'], !isMobile && !isMultiline))
+  }, /*#__PURE__*/_react2.default.createElement("div", {
+    className: "u-flex u-flex-items-start u-flex-justify-between"
+  }, /*#__PURE__*/_react2.default.createElement(_ConversationBar.default, {
+    onHeightChange: handleHeightChange
+  }), !isExpanded && /*#__PURE__*/_react2.default.createElement("div", {
+    className: "u-flex u-flex-items-center u-flex-shrink-0"
+  }, /*#__PURE__*/_react2.default.createElement(_ConversationSendButton.ConversationSendButton, null))), isExpanded && /*#__PURE__*/_react2.default.createElement("div", {
+    className: (0, _classnames.default)('u-flex u-flex-justify-end', styles['composerActions'])
+  }, /*#__PURE__*/_react2.default.createElement(_ConversationSendButton.ConversationSendButton, null)));
+};
+
+exports.ConversationComposerCompact = ConversationComposerCompact;

package/dist/components/Conversations/ConversationComposerRoot.d.ts

@@ -0,0 +1,4 @@
+export function ConversationComposerRoot({ className, children }: {
+    className: any;
+    children: any;
+}): JSX.Element;

package/dist/components/Conversations/ConversationComposerRoot.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ConversationComposerRoot = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = require("@assistant-ui/react");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
+var _CozyTheme = require("cozy-ui/transpiled/react/providers/CozyTheme");
+
+var styles = {
+  "composerContainer": "styles__composerContainer___3bNfY",
+  "composerContainer--mobile": "styles__composerContainer--mobile___nIYa-",
+  "composerContainer--mobile-dark": "styles__composerContainer--mobile-dark___12Go9",
+  "composerContainer--compact": "styles__composerContainer--compact___35e18",
+  "composerContainer--single-line": "styles__composerContainer--single-line___2yeWP",
+  "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",
+  "conversationList": "styles__conversationList___2GCzV",
+  "conversationList--container": "styles__conversationList--container___2xRAG",
+  "conversationList--hidden": "styles__conversationList--hidden___20BsT",
+  "conversationListItem--selected": "styles__conversationListItem--selected___2jCyB",
+  "menuToggler": "styles__menuToggler___39GfB",
+  "menuToggler--disabled": "styles__menuToggler--disabled___15vd4",
+  "conversationChips-container": "styles__conversationChips-container___327dE",
+  "conversationChips-startIcon": "styles__conversationChips-startIcon___1yOVn",
+  "conversationChips-chipIcon": "styles__conversationChips-chipIcon___1wmF-",
+  "conversationChips-deleteIcon": "styles__conversationChips-deleteIcon___s9C40",
+  "is-warning": "styles__is-warning___3sa0v",
+  "conversationChips-chip": "styles__conversationChips-chip___2PqQv",
+  "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": "styles__conversation-list-item--selected___2D5_3",
+  "conversation-list-item--wider": "styles__conversation-list-item--wider___2Tl2c",
+  "conversation-list-item-container": "styles__conversation-list-item-container___36VTD",
+  "conversation-list-item-menu-button": "styles__conversation-list-item-menu-button___2ZYvH",
+  "conversation-list-item-secondary-action": "styles__conversation-list-item-secondary-action___2vwnw",
+  "conversation-list-item-text": "styles__conversation-list-item-text___31VBM",
+  "conversation-list-item-title": "styles__conversation-list-item-title___3je_6",
+  "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0",
+  "conversation-list-item-meta": "styles__conversation-list-item-meta___3Zk-r"
+};
+
+var ConversationComposerRoot = function ConversationComposerRoot(_ref) {
+  var _cx;
+
+  var className = _ref.className,
+      children = _ref.children;
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
+      isLight = _useCozyTheme.isLight;
+
+  return /*#__PURE__*/_react2.default.createElement(_react.ComposerPrimitive.Root, {
+    className: (0, _classnames.default)('u-w-100 u-maw-7 u-mh-auto u-bxz', styles['composerContainer'], (_cx = {}, (0, _defineProperty2.default)(_cx, styles['composerContainer--mobile'], isMobile), (0, _defineProperty2.default)(_cx, styles['composerContainer--mobile-dark'], isMobile && !isLight), _cx), className)
+  }, children);
+};
+
+exports.ConversationComposerRoot = ConversationComposerRoot;