cozy-search 0.26.2 → 0.27.0

package/dist/components/Conversations/ConversationListItem.js

@@ -13,12 +13,12 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Divider = _interopRequireDefault(require("cozy-ui/transpiled/react/Divider"));
+
 var _ListItem = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItem"));
 
 var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
 
-var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
-
 var _CozyTheme = require("cozy-ui-plus/dist/providers/CozyTheme");
 
 var _twakeI18n = require("twake-i18n");
@@ -30,8 +30,11 @@ var _AssistantAvatar = _interopRequireDefault(require("../Assistant/AssistantAva
 var _helpers = require("../helpers");
 
 var styles = {
+  "composerContainer": "styles__composerContainer___3bNfY",
+  "composerActions": "styles__composerActions___2xQEH",
   "conversationBar": "styles__conversationBar___2J-Us",
   "conversationBar--mobile": "styles__conversationBar--mobile___1jdg8",
+  "conversationViewport": "styles__conversationViewport___24jYX",
   "conversationBar-input": "styles__conversationBar-input___2DfdZ",
   "chatConversation": "styles__chatConversation___2EmkA",
   "conversationHeaderBar": "styles__conversationHeaderBar___C8tlD",
@@ -51,7 +54,13 @@ var styles = {
   "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--dark": "styles__conversation-list-item--selected--dark___JDQlY",
+  "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"
 };
 
 var ConversationListItem = function ConversationListItem(_ref) {
@@ -73,29 +82,41 @@ var ConversationListItem = function ConversationListItem(_ref) {
     onClick: function onClick() {
       return onOpenConversation(conversation._id);
     },
-    className: (0, _classnames.default)('u-bdrs-4 u-ov-hidden u-mb-half', styles['conversation-list-item'], (0, _defineProperty2.default)({}, styles["conversation-list-item--selected--".concat(theme)], selected)),
+    className: (0, _classnames.default)('u-ov-hidden u-flex-column', styles['conversation-list-item'], (0, _defineProperty2.default)({}, styles["conversation-list-item--selected--".concat(theme)], selected)),
     selected: selected
-  }, /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
-    primary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h6",
-      className: "u-ellipsis"
-    }, (0, _helpers.getNameOfConversation)(conversation)), /*#__PURE__*/_react.default.createElement(_ConversationActions.default, {
-      buttonClassName: (0, _classnames.default)(styles['conversation-list-item-action']),
-      conversation: conversation
-    })),
-    secondary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h6",
-      className: "u-db u-ellipsis u-mb-half u-coolGrey"
-    }, (0, _helpers.getDescriptionOfConversation)(conversation)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-      variant: "h6",
-      className: "u-flex u-flex-items-center u-coolGrey"
+  }, /*#__PURE__*/_react.default.createElement(_ConversationActions.default, {
+    buttonClassName: styles['conversation-list-item-action'],
+    conversation: conversation
+  }), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    className: "u-m-0",
+    primaryTypographyProps: {
+      component: 'div',
+      className: styles['conversation-list-item-text']
+    },
+    secondaryTypographyProps: {
+      component: 'div',
+      className: styles['conversation-list-item-text']
+    },
+    primary: /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('u-ellipsis u-db', styles['conversation-list-item-title'])
+    }, (0, _helpers.getNameOfConversation)(conversation)),
+    secondary: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('u-db u-ellipsis', styles['conversation-list-item-subtitle'])
+    }, (0, _helpers.getDescriptionOfConversation)(conversation)), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)('u-flex u-flex-items-center', styles['conversation-list-item-subtitle'], styles['conversation-list-item-meta'])
     }, /*#__PURE__*/_react.default.createElement(_AssistantAvatar.default, {
       assistant: conversation.assistant,
-      className: "u-mr-half",
       isSmall: true
     }), (0, _helpers.formatConversationDate)((_conversation$cozyMet = conversation.cozyMetadata) === null || _conversation$cozyMet === void 0 ? void 0 : _conversation$cozyMet.updatedAt, t, lang)))
+  }), /*#__PURE__*/_react.default.createElement(_Divider.default, {
+    className: styles['conversation-list-item-divider']
   }));
-};
+}; // Memoized so a re-render of the conversation list only re-renders items
+// whose props actually changed (typically just the previously- and
+// newly-selected items). This avoids rebuilding every item's ActionsMenu
+// popover on each conversation switch.
+
+
+var _default = /*#__PURE__*/_react.default.memo(ConversationListItem);
 
-var _default = ConversationListItem;
 exports.default = _default;

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

@@ -1,8 +1,9 @@
-export default ConversationListItemWider;
-declare function ConversationListItemWider({ conversation, selected, divider, disableAction, onOpenConversation }: {
+declare const _default: React.MemoExoticComponent<({ conversation, selected, divider, disableAction, onOpenConversation }: {
     conversation: any;
     selected: any;
     divider: any;
     disableAction: any;
     onOpenConversation: any;
-}): JSX.Element;
+}) => JSX.Element>;
+export default _default;
+import React from 'react';

package/dist/components/Conversations/ConversationListItemWider.js

@@ -32,8 +32,11 @@ var _AssistantAvatar = _interopRequireDefault(require("../Assistant/AssistantAva
 var _helpers = require("../helpers");
 
 var styles = {
+  "composerContainer": "styles__composerContainer___3bNfY",
+  "composerActions": "styles__composerActions___2xQEH",
   "conversationBar": "styles__conversationBar___2J-Us",
   "conversationBar--mobile": "styles__conversationBar--mobile___1jdg8",
+  "conversationViewport": "styles__conversationViewport___24jYX",
   "conversationBar-input": "styles__conversationBar-input___2DfdZ",
   "chatConversation": "styles__chatConversation___2EmkA",
   "conversationHeaderBar": "styles__conversationHeaderBar___C8tlD",
@@ -53,7 +56,13 @@ var styles = {
   "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--dark": "styles__conversation-list-item--selected--dark___JDQlY",
+  "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"
 };
 
 var ConversationListItemWider = function ConversationListItemWider(_ref) {
@@ -78,13 +87,13 @@ var ConversationListItemWider = function ConversationListItemWider(_ref) {
     onClick: function onClick() {
       return onOpenConversation(conversation._id);
     },
-    className: (0, _classnames.default)('u-bdrs-0 u-ov-hidden u-flex u-flex-items-center u-flex-justify-between u-w-100', styles['conversation-list-item'], (0, _defineProperty2.default)({}, styles["conversation-list-item--selected--".concat(theme)], selected)),
+    className: (0, _classnames.default)('u-bdrs-0 u-ov-hidden u-flex u-flex-items-center u-flex-justify-between u-w-100', styles['conversation-list-item'], styles['conversation-list-item--wider'], (0, _defineProperty2.default)({}, styles["conversation-list-item--selected--".concat(theme)], selected)),
     selected: selected
   }, /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, null, /*#__PURE__*/_react.default.createElement(_AssistantAvatar.default, {
     assistant: conversation.assistant,
-    className: "u-mr-half",
-    isSmall: true
+    className: "u-mr-half u-w-1 u-h-1"
   })), /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+    className: "u-pr-1",
     primary: /*#__PURE__*/_react.default.createElement("div", {
       className: "u-flex u-flex-items-center"
     }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
@@ -99,9 +108,12 @@ var ConversationListItemWider = function ConversationListItemWider(_ref) {
       className: "u-coolGrey"
     }, (0, _helpers.getDescriptionOfConversation)(conversation))
   }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: "u-miw-4 u-fz-xsmall u-ta-right"
+    className: "u-miw-4 u-fz-xsmall u-ta-right u-dn-s"
   }, (0, _helpers.formatConversationDate)((_conversation$cozyMet = conversation.cozyMetadata) === null || _conversation$cozyMet === void 0 ? void 0 : _conversation$cozyMet.updatedAt, t, lang)));
-};
+}; // Memoized for the same reason as ConversationListItem: skip re-rendering
+// list items whose props are unchanged on a conversation switch.
+
+
+var _default = /*#__PURE__*/_react.default.memo(ConversationListItemWider);
 
-var _default = ConversationListItemWider;
 exports.default = _default;

package/dist/components/Conversations/Sources/Sources.js

@@ -96,8 +96,7 @@ var Sources = function Sources(_ref) {
   }, [showSources]);
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
     ref: ref,
-    className: "u-mt-1-half",
-    pl: "44px"
+    className: "u-mt-1-half"
   }, /*#__PURE__*/_react.default.createElement(_Chips.default, {
     className: "u-mb-1",
     icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {

package/dist/components/Conversations/WebsearchButton.js

@@ -15,9 +15,7 @@ var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
-var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
-
-var _Globe = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Globe"));
+var _Planet = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Planet"));
 
 var _twakeI18n = require("twake-i18n");
 
@@ -32,25 +30,26 @@ var WebsearchButton = function WebsearchButton(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    className: "u-p-0 u-mr-half",
-    "aria-pressed": websearchEnabled,
-    "aria-label": t('assistant.websearch.label'),
-    title: t('assistant.websearch.label'),
-    onClick: onToggleWebsearch
-  }, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+  return /*#__PURE__*/_react.default.createElement(_Buttons.default, {
     size: "small",
-    component: "div",
-    className: "u-miw-auto u-w-2 u-h-2 u-bdrs-circle",
+    variant: websearchEnabled ? 'primary' : 'text',
+    className: "u-miw-auto u-w-2 u-h-2 u-bdrs-circle u-flex-shrink-0 u-mr-half",
     classes: {
       label: 'u-flex u-w-auto'
     },
-    disabled: !websearchEnabled,
+    style: websearchEnabled ? undefined : {
+      boxShadow: 'inset 0 0 0 1px var(--secondaryTextColor)'
+    },
+    "aria-pressed": websearchEnabled,
+    "aria-label": t('assistant.websearch.label'),
+    title: t('assistant.websearch.label'),
     label: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icon: _Globe.default,
-      size: 12
-    })
-  }));
+      icon: _Planet.default,
+      size: 12,
+      color: websearchEnabled ? undefined : 'var(--secondaryTextColor)'
+    }),
+    onClick: onToggleWebsearch
+  });
 };
 
 var _default = WebsearchButton;

package/dist/components/Conversations/styles.styl

@@ -1,18 +1,43 @@
 @require 'settings/breakpoints.styl'
 
+.composerContainer
+    position relative
+    border 1px solid var(--borderMainColor)
+    border-radius 20px
+    padding 8px 8px 8px 16px
+    background-color var(--paperBackgroundColor)
+    z-index calc(var(--zIndex-modal) + 15)
+
+.composerActions
+    margin-top 16px
+    gap 8px
+
 .conversationBar
+    flex 1
+    min-width 0
     max-height 95px
-    min-height 48px
-    z-index calc(var(--zIndex-modal) + 15)
+    min-height 32px
+    background-color transparent !important
+    border 0 !important
 
     +gt-mobile()
       max-height 178px
 
     &--mobile
-      border 0
       background-color transparent !important
       border-color transparent !important
 
+.conversationViewport
+  +mobile()
+    // Indent the message column past the absolutely-positioned
+    // sidebar toggle button (top-left of the screen when the sidebar
+    // is closed) so text never overlaps the icon — even when the
+    // conversation is scrolled. The menu button's right edge sits at
+    // ~48px (8px header padding + 40px button), so we leave a small
+    // buffer beyond that.
+    padding-left 56px
+    padding-right 16px
+
 
 .conversationBar-input
   max-height 80px
@@ -83,22 +108,53 @@
   hyphens auto
 
 .conversation-list-item
-  &:hover
-    .conversation-list-item-action
-      display block !important
-  &:focus-within
-    .conversation-list-item-action
-      display block !important
-
-  .conversation-list-item-action
-    display none !important
-    position absolute
-    top 6px
-    right 12px
+  padding 8px !important
+  border-radius 8px !important
+  align-items stretch !important
+
+  &:hover .conversation-list-item-action,
+  &:focus-within .conversation-list-item-action
+    opacity 1
+    pointer-events auto
 
   &--selected
     &--light
-      background var(--grey100) !important
-
+      background var(--primaryColorLightest) !important
     &--dark
       background var(--grey900) !important
+
+  &--wider
+    align-items center !important
+
+.conversation-list-item-divider
+  // Counteract the item's 8px padding so the divider spans the full
+  // width and sits flush with the bottom edge of the selected highlight.
+  margin 8px -8px -8px -8px !important
+
+.conversation-list-item-action
+  position absolute !important
+  top 8px
+  right 8px
+  opacity 0
+  pointer-events none
+
+.conversation-list-item-text
+  line-height 16px
+  overflow hidden
+  margin-right 28px !important
+
+.conversation-list-item-title
+  color var(--primaryTextColor)
+  font-size 14px
+  font-weight 500
+  line-height 16px
+  letter-spacing 0.5px
+
+.conversation-list-item-meta
+  gap 4px
+
+.conversation-list-item-subtitle
+  color var(--secondaryTextColor)
+  font-size 11px
+  font-weight 400
+  line-height 16px

package/dist/components/Search/SearchBarMobile.js

@@ -12,8 +12,11 @@ var _react = _interopRequireDefault(require("react"));
 var _SearchBar = _interopRequireDefault(require("cozy-ui/transpiled/react/SearchBar"));
 
 var styles = {
+  "composerContainer": "styles__composerContainer___3bNfY",
+  "composerActions": "styles__composerActions___2xQEH",
   "conversationBar": "styles__conversationBar___2J-Us",
   "conversationBar--mobile": "styles__conversationBar--mobile___1jdg8",
+  "conversationViewport": "styles__conversationViewport___24jYX",
   "conversationBar-input": "styles__conversationBar-input___2DfdZ",
   "chatConversation": "styles__chatConversation___2EmkA",
   "conversationHeaderBar": "styles__conversationHeaderBar___C8tlD",
@@ -33,7 +36,13 @@ var styles = {
   "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--dark": "styles__conversation-list-item--selected--dark___JDQlY",
+  "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"
 };
 
 var SearchBarMobile = function SearchBarMobile(_ref) {

package/dist/components/Search/SearchConversation.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -25,8 +27,6 @@ var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"
 
 var _Dialog = _interopRequireDefault(require("cozy-ui/transpiled/react/Dialog"));
 
-var _Divider = _interopRequireDefault(require("cozy-ui/transpiled/react/Divider"));
-
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
 var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
@@ -83,10 +83,11 @@ var SearchConversationContainer = function SearchConversationContainer(_ref) {
 };
 
 var SearchConversation = function SearchConversation() {
-  var _groupedConversations, _groupedConversations2;
+  var _cx;
 
   var _useI18n = (0, _twakeI18n.useI18n)(),
-      t = _useI18n.t;
+      t = _useI18n.t,
+      lang = _useI18n.lang;
 
   var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
       isMobile = _useBreakpoints.isMobile;
@@ -170,78 +171,68 @@ var SearchConversation = function SearchConversation() {
     isMobile: isMobile
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('u-h-100 u-flex u-flex-column u-flex-items-start u-ov-hidden', {
-      'u-w-7 u-mh-half': !isMobile
+      'u-w-7 u-mh-half': !isMobile,
+      'u-w-100': isMobile
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('u-w-100', {
-      'u-mv-2': !isMobile
+    className: (0, _classnames.default)('u-w-100 u-bxz', {
+      'u-mv-2': !isMobile,
+      'u-p-1': isMobile
     })
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-flex u-flex-items-center"
+    className: "u-flex u-flex-items-center u-w-100"
   }, /*#__PURE__*/_react.default.createElement(_SearchBar.default, {
-    elevation: isMobile ? 0 : 1,
+    elevation: 1,
     disabledHover: !!isMobile,
-    disabledClear: !!isMobile,
-    className: (0, _classnames.default)('u-w-100', styles['search-bar--mobile'], {
-      'u-mb-2': !isMobile
-    }),
+    className: (0, _classnames.default)('u-flex-auto u-miw-0', (_cx = {}, (0, _defineProperty2.default)(_cx, styles['search-bar--mobile'], isMobile), (0, _defineProperty2.default)(_cx, 'u-mb-2', !isMobile), _cx)),
     placeholder: t('assistant.search_conversation.placeholder'),
-    size: isMobile ? 'small' : 'medium',
+    size: "medium",
     value: searchStr,
     onChange: handleSearchChange
   }), isMobile && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     size: "small",
+    className: "u-ml-half u-flex-shrink-0",
     onClick: function onClick() {
       return setIsOpenSearchConversation(false);
     },
     "aria-label": t('assistant.search_conversation.close')
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: _Cross.default
-  }))), isMobile && /*#__PURE__*/_react.default.createElement(_Divider.default, {
-    className: "u-mb-half"
-  }), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+  }))), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
     label: t('assistant.search_conversation.new_chat'),
     variant: "secondary",
-    color: "secondary",
     startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
       icon: _Plus.default
     }),
     onClick: createNewConversation,
     size: "large",
-    className: "u-ml-half-t u-bdrs-6"
+    className: (0, _classnames.default)({
+      'u-ml-half-t u-bdrs-6': !isMobile,
+      'u-mt-1 u-bdrs-7 u-bdw-1': isMobile
+    })
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "u-ov-auto u-flex-auto u-w-100 u-pos-relative"
   }, isLoading ? /*#__PURE__*/_react.default.createElement("div", {
     className: "u-flex u-flex-items-center u-flex-justify-center u-p-2"
   }, /*#__PURE__*/_react.default.createElement(_Spinner.default, {
     size: "xxlarge"
-  })) : searchStr ? /*#__PURE__*/_react.default.createElement(_ConversationList.default, {
-    divider: true,
-    disableAction: true,
-    conversations: conversations,
-    onOpenConversation: goToConversation,
-    ItemComponent: _ConversationListItemWider.default
-  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ((_groupedConversations = groupedConversations.today) === null || _groupedConversations === void 0 ? void 0 : _groupedConversations.length) > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "subtitle1",
-    color: "textSecondary",
-    className: "u-mb-half u-ml-half-t"
-  }, t('assistant.search_conversation.recent')), /*#__PURE__*/_react.default.createElement(_ConversationList.default, {
-    divider: true,
-    disableAction: true,
-    conversations: groupedConversations.today,
-    onOpenConversation: goToConversation,
-    ItemComponent: _ConversationListItemWider.default
-  })), ((_groupedConversations2 = groupedConversations.older) === null || _groupedConversations2 === void 0 ? void 0 : _groupedConversations2.length) > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "subtitle1",
-    color: "textSecondary",
-    className: "u-mt-1 u-mb-half u-ml-half-t"
-  }, t('assistant.search_conversation.older')), /*#__PURE__*/_react.default.createElement(_ConversationList.default, {
-    divider: true,
-    disableAction: true,
-    conversations: groupedConversations.older,
-    onOpenConversation: goToConversation,
-    ItemComponent: _ConversationListItemWider.default
-  }))), !isLoading && (conversations === null || conversations === void 0 ? void 0 : conversations.length) === 0 && /*#__PURE__*/_react.default.createElement(_NotFoundConversation.default, null))));
+  })) : groupedConversations.map(function (group, index) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: group.dayTimestamp
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "subtitle1",
+      color: "textSecondary",
+      className: (0, _classnames.default)('u-mb-half u-ml-1 u-ml-half-t', {
+        'u-mt-1': index > 0
+      })
+    }, group.key === 'today' ? t('assistant.search_conversation.recent') : group.key === 'yesterday' ? t('assistant.time.yesterday') : (0, _helpers.formatDayLabel)(group.dayTimestamp, lang)), /*#__PURE__*/_react.default.createElement(_ConversationList.default, {
+      divider: true,
+      disableAction: true,
+      conversations: group.items,
+      onOpenConversation: goToConversation,
+      ItemComponent: _ConversationListItemWider.default
+    }));
+  }), !isLoading && (conversations === null || conversations === void 0 ? void 0 : conversations.length) === 0 && /*#__PURE__*/_react.default.createElement(_NotFoundConversation.default, null))));
 };
 
 var _default = SearchConversation;

package/dist/components/Search/helpers.d.ts

@@ -1 +1,6 @@
-export function groupConversationsByDate(conversations: any[]): Object;
+export function formatDayLabel(timestamp: any, lang: any): string;
+export function groupConversationsByDate(conversations: any[]): Array<{
+    key: string;
+    dayTimestamp: number;
+    items: any[];
+}>;

package/dist/components/Search/helpers.js

@@ -1,39 +1,68 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.groupConversationsByDate = void 0;
+exports.groupConversationsByDate = exports.formatDayLabel = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
+var startOfDay = function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+};
+
+var formatDayLabel = function formatDayLabel(timestamp, lang) {
+  return new Date(timestamp).toLocaleDateString(lang, {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+};
 /**
- * Groups conversations into 'today' and 'older' based on their updatedAt date.
+ * Groups conversations by calendar day based on their updatedAt date.
+ * Returns an ordered array of buckets so today appears first, then yesterday,
+ * then each earlier day descending.
  *
  * @param {Array} conversations - The list of conversations to group.
- * @returns {Object} An object with 'today' and 'older' arrays of conversations.
+ * @returns {Array<{ key: string, dayTimestamp: number, items: Array }>}
  */
+
+
+exports.formatDayLabel = formatDayLabel;
+
 var groupConversationsByDate = function groupConversationsByDate(conversations) {
-  if (!conversations) return {
-    today: [],
-    older: []
-  };
-  var groups = {
-    today: [],
-    older: []
-  };
+  if (!conversations || conversations.length === 0) return [];
   var now = new Date();
-  var today = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+  var todayTs = startOfDay(now);
+  var yesterdayTs = todayTs - 86400000;
+  var buckets = new Map();
   conversations.forEach(function (conv) {
     var _conv$cozyMetadata;
 
-    var date = new Date(((_conv$cozyMetadata = conv.cozyMetadata) === null || _conv$cozyMetadata === void 0 ? void 0 : _conv$cozyMetadata.updatedAt) || Date.now()).getTime();
+    var raw = ((_conv$cozyMetadata = conv.cozyMetadata) === null || _conv$cozyMetadata === void 0 ? void 0 : _conv$cozyMetadata.updatedAt) || Date.now();
+    var dayTs = startOfDay(new Date(raw));
+    if (!buckets.has(dayTs)) buckets.set(dayTs, []);
+    buckets.get(dayTs).push(conv);
+  });
+  return (0, _toConsumableArray2.default)(buckets.entries()).sort(function (a, b) {
+    return b[0] - a[0];
+  }).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        dayTimestamp = _ref2[0],
+        items = _ref2[1];
 
-    if (date >= today) {
-      groups.today.push(conv);
-    } else {
-      groups.older.push(conv);
-    }
+    var key;
+    if (dayTimestamp === todayTs) key = 'today';else if (dayTimestamp === yesterdayTs) key = 'yesterday';else key = 'date';
+    return {
+      key: key,
+      dayTimestamp: dayTimestamp,
+      items: items
+    };
   });
-  return groups;
 };
 
 exports.groupConversationsByDate = groupConversationsByDate;