New assistant UI

packages/cozy-search/package.json

@@ -10,8 +10,12 @@
     "url": "https://github.com/cozy/cozy-libs/issues"
   },
   "dependencies": {
+    "@assistant-ui/react": "^0.12.5",
+    "class-variance-authority": "^0.7.1",
     "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.563.0",
     "mime-types": "2.1.35",
     "react-type-animation": "3.2.0",
     "rooks": "7.14.1"
@@ -25,6 +29,7 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-tsconfig-paths": "^1.0.3",
     "babel-preset-cozy-app": "^2.8.3",
+    "cozy-bar": "^29.0.0",
     "cozy-client": "^60.21.0",
     "cozy-device-helper": "^4.0.2",
     "cozy-flags": "^4.8.2",
@@ -37,8 +42,8 @@
     "cozy-ui-plus": "^5.1.0",
     "cross-fetch": "^4.0.0",
     "jest": "26.6.3",
-    "react": "16.12.0",
-    "react-dom": "16.13.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-router-dom": "6.14.2",
     "stylus": "^0.64.0",
     "twake-i18n": "^0.3.1",
@@ -59,6 +64,7 @@
     "./dist/stylesheet.css": "./dist/stylesheet.css"
   },
   "peerDependencies": {
+    "cozy-bar": ">=29.0.0",
     "cozy-client": ">=60.21.0",
     "cozy-device-helper": ">=3.7.1",
     "cozy-flags": ">=4.6.1",
@@ -69,8 +75,8 @@
     "cozy-realtime": ">=5.6.4",
     "cozy-ui": ">=135.6.0",
     "cozy-ui-plus": ">=1.2.0",
-    "react": ">=16.12.0",
-    "react-dom": ">=16.12.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
     "react-router-dom": "^6.28.0",
     "twake-i18n": ">=0.3.0"
   },

packages/cozy-search/src/actions/delete.jsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem className="u-error" {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon className="u-error" icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'Delete'
+
+  return Component
+}
+
+export const remove = ({ t }) => {
+  const icon = TrashIcon
+  const label = t('assistant.sidebar.conversation.actions.delete')
+
+  return {
+    name: 'delete',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    displayCondition: () => true,
+    action: () => {
+      // TO DO: Add action to remove
+    }
+  }
+}

packages/cozy-search/src/actions/rename.jsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'Rename'
+
+  return Component
+}
+
+export const rename = ({ t }) => {
+  const icon = RenameIcon
+  const label = t('assistant.sidebar.conversation.actions.rename')
+
+  return {
+    name: 'rename',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    displayCondition: () => true,
+    action: () => {
+      // TO DO: Add action to remove
+    }
+  }
+}

packages/cozy-search/src/actions/share.jsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react'
+
+import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
+import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
+import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
+
+const makeComponent = (label, icon) => {
+  const Component = forwardRef((props, ref) => {
+    return (
+      <ActionsMenuItem {...props} ref={ref}>
+        <ListItemIcon>
+          <Icon icon={icon} />
+        </ListItemIcon>
+        <ListItemText primary={label} />
+      </ActionsMenuItem>
+    )
+  })
+
+  Component.displayName = 'Share'
+
+  return Component
+}
+
+export const share = ({ t }) => {
+  const icon = ShareIcon
+  const label = t('assistant.sidebar.conversation.actions.share')
+
+  return {
+    name: 'share',
+    icon,
+    label,
+    Component: makeComponent(label, icon),
+    displayCondition: () => true,
+    action: () => {
+      // TO DO: Add action to remove
+    }
+  }
+}

packages/cozy-search/src/components/Assistant/AssistantAvatar.jsx

@@ -0,0 +1,55 @@
+import cx from 'classnames'
+import React from 'react'
+
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import AssistantIcon from 'cozy-ui/transpiled/react/Icons/Assistant'
+import AssistantColorIcon from 'cozy-ui/transpiled/react/Icons/AssistantColor'
+
+import styles from './styles.styl'
+import { DEFAULT_ASSISTANT } from '../constants'
+
+const AssistantAvatar = ({ assistant, isSmall, className }) => {
+  if (!assistant) return
+
+  if (assistant.id !== DEFAULT_ASSISTANT.id && !assistant.icon) {
+    return (
+      <Icon
+        icon={AssistantIcon}
+        className={cx(
+          styles['assistant-icon'],
+          {
+            [styles['assistant-icon--small']]: isSmall
+          },
+          className
+        )}
+      />
+    )
+  }
+
+  return assistant.id === DEFAULT_ASSISTANT.id ? (
+    <Icon
+      icon={AssistantColorIcon}
+      className={cx(
+        styles['assistant-icon'],
+        {
+          [styles['assistant-icon--small']]: isSmall
+        },
+        className
+      )}
+    />
+  ) : (
+    <img
+      src={assistant.icon}
+      alt={assistant.name}
+      className={cx(
+        styles['assistant-icon'],
+        {
+          [styles['assistant-icon--small']]: isSmall
+        },
+        className
+      )}
+    />
+  )
+}
+
+export default AssistantAvatar

packages/cozy-search/src/components/Assistant/AssistantContainer.jsx

@@ -0,0 +1,56 @@
+import cx from 'classnames'
+import React from 'react'
+
+import flag from 'cozy-flags'
+import Divider from 'cozy-ui/transpiled/react/Divider'
+
+import { useAssistant } from '../AssistantProvider'
+import styles from './styles.styl'
+import PrettyScrollbar from '../Containers/PrettyScrollbar'
+import Conversation from '../Conversations/Conversation'
+import CozyAssistantRuntimeProvider from '../CozyAssistantRuntimeProvider'
+import SearchConversation from '../Search/SearchConversation'
+import Sidebar from '../Sidebar'
+import TwakeKnowledgePanel from '../TwakeKnowledges/TwakeKnowledgePanel'
+
+const AssistantContainer = () => {
+  const {
+    isOpenSearchConversation,
+    openedKnowledgePanel,
+    setOpenedKnowledgePanel
+  } = useAssistant()
+
+  return (
+    <div
+      className={cx(
+        'u-flex u-ov-hidden u-h-100',
+        styles['assistant-container']
+      )}
+    >
+      <Sidebar className="u-w-5 u-pb-1 u-bg-white" />
+
+      <Divider orientation="vertical" flexItem />
+
+      <PrettyScrollbar className="u-flex-auto u-flex u-flex-column u-pb-1 u-ov-hidden u-bg-white">
+        {isOpenSearchConversation &&
+        flag('cozy.search-conversation.enabled') ? (
+          <SearchConversation />
+        ) : (
+          <CozyAssistantRuntimeProvider>
+            <Conversation />
+          </CozyAssistantRuntimeProvider>
+        )}
+      </PrettyScrollbar>
+
+      {openedKnowledgePanel && flag('cozy.source-knowledge.enabled') && (
+        <div className="u-ml-half u-h-100 u-maw-7">
+          <TwakeKnowledgePanel
+            onClose={() => setOpenedKnowledgePanel(undefined)}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AssistantContainer

packages/cozy-search/src/components/Conversations/AssistantSelection.jsx → packages/cozy-search/src/components/Assistant/AssistantSelection.jsx

@@ -4,7 +4,7 @@ import React, { useState, useRef } from 'react'
 import { useQuery } from 'cozy-client'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
-import Button from 'cozy-ui/transpiled/react/Button'
+import Chips from 'cozy-ui/transpiled/react/Chips'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -52,15 +52,18 @@ const AssistantSelection = ({ className }) => {
   return (
     <>
       <div className={className} ref={buttonRef}>
-        <Button
-          className={styles['trigger-button']}
+        <Chips
+          icon={
+            <AssistantAvatar
+              className="u-ml-half"
+              isSmall={true}
+              assistant={selectedAssistant}
+            />
+          }
+          label={selectedAssistant.name}
+          clickable
           onClick={handleClick}
-          variant="outlined"
-          size="small"
-        >
-          <AssistantAvatar assistant={selectedAssistant} />
-          <Typography variant="body1">{selectedAssistant.name}</Typography>
-        </Button>
+        />
       </div>
       {open && (
         <ActionsMenu

packages/cozy-search/src/components/Conversations/AssistantSelectionItem.jsx → packages/cozy-search/src/components/Assistant/AssistantSelectionItem.jsx

@@ -8,8 +8,8 @@ import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
 import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
-import AssistantAvatar from './AssistantAvatar'
 import styles from './styles.styl'
+import AssistantAvatar from '../Assistant/AssistantAvatar'
 
 const AssistantSelectionItem = ({
   assistant,

packages/cozy-search/src/components/Assistant/styles.styl

@@ -0,0 +1,39 @@
+.assistant-container
+  z-index 1
+
+.trigger-button
+  border-radius 20px
+  padding 4px 12px
+  border 1px solid var(--borderMainColor)
+  background-color var(--paperBackgroundColor)
+  text-transform none
+  min-width 0
+
+.assistant-icon
+  width 24px
+  height 24px
+  border-radius 50%
+  margin-right 8px
+  object-fit cover
+
+  &--small
+    width 20px
+    height 20px
+
+.menu-item
+  display flex !important
+  align-items center !important
+  justify-content space-between !important
+
+  &.create-item
+    border-top 1px solid var(--dividerColor)
+
+  &:hover
+    .menu-item-icon-button
+      display block !important
+
+.menu-item-icon-button
+  display none !important
+
+.create-icon
+  margin-right 8px

packages/cozy-search/src/components/AssistantDesktop.jsx

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { useExtendI18n } from 'twake-i18n'
 
-import AssistantProvider from './AssistantProvider'
 import { locales } from '../locales'
 import SearchBar from './Search/SearchBar'
 import SearchProvider from './Search/SearchProvider'
@@ -12,11 +11,9 @@ const AssistantDesktop = ({ componentsProps, searchOptions = {} }) => {
 
   return (
     <div className="u-mh-auto u-w-100 u-maw-100">
-      <AssistantProvider>
-        <SearchProvider searchOptions={searchOptions}>
-          <SearchBar componentsProps={componentsProps} />
-        </SearchProvider>
-      </AssistantProvider>
+      <SearchProvider searchOptions={searchOptions}>
+        <SearchBar componentsProps={componentsProps} />
+      </SearchProvider>
     </div>
   )
 }