Resolve feedbacks of new assistant

packages/cozy-search/package.json

@@ -11,11 +11,8 @@
   },
   "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"
@@ -86,7 +83,7 @@
     "directory": "packages/cozy-search"
   },
   "scripts": {
-    "build": "yarn build:clean && yarn build:types && babel --extensions .ts,.tsx,.js,.jsx --ignore '**/*.spec.tsx','**/*.spec.ts','**/*.d.ts' ./src -d ./dist --copy-files",
+    "build": "yarn build:clean && yarn build:types && babel --extensions .ts,.tsx,.js,.jsx --ignore '**/*.spec.tsx','**/*.spec.ts','**/*.spec.js','**/*.spec.jsx','**/*.d.ts' ./src -d ./dist --copy-files",
     "build:clean": "rm -rf ./dist",
     "build:types": "tsc -p tsconfig-build.json",
     "build:watch": "yarn build --watch",

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

@@ -34,7 +34,7 @@ export const remove = ({ t }) => {
     Component: makeComponent(label, icon),
     displayCondition: () => true,
     action: () => {
-      // TO DO: Add action to remove
+      // TO DO: Add action to remove due to this action does not exist yet in backend, we will implement it later
     }
   }
 }

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

@@ -34,7 +34,7 @@ export const rename = ({ t }) => {
     Component: makeComponent(label, icon),
     displayCondition: () => true,
     action: () => {
-      // TO DO: Add action to remove
+      // TO DO: Add action to rename due to this action does not exist yet in backend, we will implement it later
     }
   }
 }

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

@@ -34,7 +34,7 @@ export const share = ({ t }) => {
     Component: makeComponent(label, icon),
     displayCondition: () => true,
     action: () => {
-      // TO DO: Add action to remove
+      // TO DO: Add action to share due to this action does not exist yet in backend, we will implement it later
     }
   }
 }

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

@@ -9,7 +9,7 @@ import styles from './styles.styl'
 import { DEFAULT_ASSISTANT } from '../constants'
 
 const AssistantAvatar = ({ assistant, isSmall, className }) => {
-  if (!assistant) return
+  if (!assistant) return null
 
   if (assistant.id !== DEFAULT_ASSISTANT.id && !assistant.icon) {
     return (

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

@@ -2,13 +2,13 @@ import cx from 'classnames'
 import React from 'react'
 
 import flag from 'cozy-flags'
-import Divider from 'cozy-ui/transpiled/react/Divider'
+import { useCozyTheme } from 'cozy-ui-plus/dist/providers/CozyTheme'
 
 import { useAssistant } from '../AssistantProvider'
 import styles from './styles.styl'
 import PrettyScrollbar from '../Containers/PrettyScrollbar'
 import Conversation from '../Conversations/Conversation'
-import CozyAssistantRuntimeProvider from '../CozyAssistantRuntimeProvider'
+import CozyAssistantRuntimeProviderWithErrorBoundary from '../CozyAssistantRuntimeProvider'
 import SearchConversation from '../Search/SearchConversation'
 import Sidebar from '../Sidebar'
 import TwakeKnowledgePanel from '../TwakeKnowledges/TwakeKnowledgePanel'
@@ -19,6 +19,7 @@ const AssistantContainer = () => {
     openedKnowledgePanel,
     setOpenedKnowledgePanel
   } = useAssistant()
+  const { type: theme } = useCozyTheme()
 
   return (
     <div
@@ -27,23 +28,26 @@ const AssistantContainer = () => {
         styles['assistant-container']
       )}
     >
-      <Sidebar className="u-w-5 u-pb-1 u-bg-white" />
+      <Sidebar className="u-w-5 u-pb-0-t u-pb-1" />
 
-      <Divider orientation="vertical" flexItem />
-
-      <PrettyScrollbar className="u-flex-auto u-flex u-flex-column u-pb-1 u-ov-hidden u-bg-white">
+      <PrettyScrollbar className="u-flex-auto u-flex u-flex-column u-pb-0-t u-pb-1 u-ov-hidden">
         {isOpenSearchConversation &&
         flag('cozy.search-conversation.enabled') ? (
           <SearchConversation />
         ) : (
-          <CozyAssistantRuntimeProvider>
+          <CozyAssistantRuntimeProviderWithErrorBoundary>
             <Conversation />
-          </CozyAssistantRuntimeProvider>
+          </CozyAssistantRuntimeProviderWithErrorBoundary>
         )}
       </PrettyScrollbar>
 
       {openedKnowledgePanel && flag('cozy.source-knowledge.enabled') && (
-        <div className="u-ml-half u-h-100 u-maw-7">
+        <div
+          className={cx(
+            'u-h-100 u-maw-7 u-pl-half',
+            styles[`knowledge-panel--${theme}`]
+          )}
+        >
           <TwakeKnowledgePanel
             onClose={() => setOpenedKnowledgePanel(undefined)}
           />

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

@@ -1,13 +1,16 @@
 import cx from 'classnames'
-import React, { useState, useRef } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
+import { useI18n } from 'twake-i18n'
 
 import { useQuery } from 'cozy-client'
 import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
 import Chips from 'cozy-ui/transpiled/react/Chips'
 import Icon from 'cozy-ui/transpiled/react/Icon'
+import DropdownIcon from 'cozy-ui/transpiled/react/Icons/Dropdown'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import styles from './styles.styl'
 import { useAssistant } from '../AssistantProvider'
@@ -16,7 +19,9 @@ import { buildAssistantsQuery } from '../queries'
 import AssistantAvatar from './AssistantAvatar'
 import AssistantSelectionItem from './AssistantSelectionItem'
 
-const AssistantSelection = ({ className }) => {
+const AssistantSelection = ({ className, disabled }) => {
+  const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
   const buttonRef = useRef(null)
   const [open, setOpen] = useState(false)
   const {
@@ -28,11 +33,18 @@ const AssistantSelection = ({ className }) => {
     setSelectedAssistantId
   } = useAssistant()
 
+  useEffect(() => {
+    if (disabled) {
+      setOpen(false)
+    }
+  }, [disabled])
+
   const assistantsQuery = buildAssistantsQuery()
   const assistants =
     useQuery(assistantsQuery.definition, assistantsQuery.options)?.data || []
 
   const handleClick = () => {
+    if (disabled) return
     setOpen(true)
   }
 
@@ -60,9 +72,16 @@ const AssistantSelection = ({ className }) => {
               assistant={selectedAssistant}
             />
           }
-          label={selectedAssistant.name}
+          label={
+            isMobile ? (
+              <Icon className={styles['dropdown-icon']} icon={DropdownIcon} />
+            ) : (
+              selectedAssistant.name
+            )
+          }
           clickable
           onClick={handleClick}
+          disabled={disabled}
         />
       </div>
       {open && (
@@ -101,7 +120,9 @@ const AssistantSelection = ({ className }) => {
           >
             <div className="u-flex u-flex-items-center">
               <Icon icon={PlusIcon} className={styles['create-icon']} />
-              <Typography variant="body1">Create Assistant</Typography>
+              <Typography variant="body1">
+                {t('assistant_create.title')}
+              </Typography>
             </div>
           </ActionsMenuItem>
         </ActionsMenu>

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

@@ -1,12 +1,15 @@
-import React from 'react'
+import cx from 'classnames'
+import React, { useMemo } from 'react'
 
 import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
+import Badge from 'cozy-ui/transpiled/react/Badge'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 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 { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
 import styles from './styles.styl'
 import AssistantAvatar from '../Assistant/AssistantAvatar'
@@ -21,6 +24,8 @@ const AssistantSelectionItem = ({
   setIsOpenEditAssistant,
   disableActions = false
 }) => {
+  const { isMobile } = useBreakpoints()
+
   const handleSelect = assistant => {
     onSelect(assistant)
     onClose()
@@ -40,33 +45,67 @@ const AssistantSelectionItem = ({
     e.stopPropagation()
   }
 
+  const isSelected = useMemo(
+    () => selectedAssistant?.id === assistant.id,
+    [selectedAssistant?.id, assistant.id]
+  )
+
   return (
     <ActionsMenuItem
       onClick={() => handleSelect(assistant)}
       className={styles['menu-item']}
     >
       <div className="u-flex u-flex-items-center">
-        <AssistantAvatar assistant={assistant} />
+        {isMobile && isSelected ? (
+          <Badge
+            badgeContent={
+              <Icon
+                icon={CheckIcon}
+                size={10}
+                className={styles['selected-item--mobile']}
+              />
+            }
+            variant="standard"
+            size="small"
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right'
+            }}
+            overlap="circular"
+          >
+            <AssistantAvatar assistant={assistant} />
+          </Badge>
+        ) : (
+          <AssistantAvatar assistant={assistant} />
+        )}
         <Typography variant="body1">{assistant.name}</Typography>
       </div>
       <div className="u-flex u-flex-items-center u-flex-justify-between">
-        {selectedAssistant?.id === assistant.id && (
+        {isSelected && !isMobile && (
           <Icon icon={CheckIcon} className="u-success" />
         )}
         {!disableActions && (
           <>
             <IconButton
               aria-label="Edit assistant"
               size="small"
-              className={styles['menu-item-icon-button']}
+              className={cx({
+                [styles['menu-item-icon-button']]:
+                  !isMobile || (!isSelected && isMobile),
+                'u-db': isSelected && isMobile
+              })}
               onClick={handleEdit}
             >
               <Icon icon={PenIcon} color="var(--primaryColor)" />
             </IconButton>
             <IconButton
               aria-label="Delete assistant"
               size="small"
-              className={styles['menu-item-icon-button']}
+              className={cx({
+                [styles['menu-item-icon-button']]:
+                  !isMobile || (!isSelected && isMobile),
+                'u-db': isSelected && isMobile
+              })}
               onClick={handleDelete}
             >
               <Icon icon={TrashIcon} className="u-error" />

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

@@ -1,6 +1,13 @@
 .assistant-container
   z-index 1
 
+  .knowledge-panel
+    &--light
+      background-color var(--primaryBackgroundLight)
+
+    &--dark
+      background-color var(--greyA400)
+
 .trigger-button
   border-radius 20px
   padding 4px 12px
@@ -36,4 +43,13 @@
   display none !important
 
 .create-icon
-  margin-right 8px
+  margin-right 0.5rem
+
+.dropdown-icon
+  margin-top 0.25rem
+
+.selected-item--mobile
+  padding 1px
+  border-radius 100%
+  color var(--white)
+  background-color var(--malachite)

packages/cozy-search/src/components/AssistantProvider.d.ts

@@ -0,0 +1,43 @@
+import React from 'react'
+
+export interface AssistantState {
+  message: Record<string, string>
+  status: 'idle' | 'writing' | 'pending'
+  messagesId: string[]
+}
+
+export interface TwakeKnowledgeState {
+  drive: { id: string; name: string }[]
+  mail: { id: string; name: string }[]
+  chat: { id: string; name: string }[]
+}
+
+export interface AssistantContextValue {
+  assistantState: AssistantState
+  isOpenCreateAssistant: boolean
+  isOpenDeleteAssistant: boolean
+  isOpenEditAssistant: boolean
+  assistantIdInAction: string | null
+  selectedAssistantId: string
+  isOpenSearchConversation: boolean
+  openedKnowledgePanel: string | null
+  selectedTwakeKnowledge: TwakeKnowledgeState
+  setAssistantIdInAction: (id: string | null) => void
+  setIsOpenDeleteAssistant: (isOpen: boolean) => void
+  setAssistantState: React.Dispatch<React.SetStateAction<AssistantState>>
+  clearAssistant: () => void
+  onAssistantExecute: (
+    params: { value: string; conversationId: string },
+    callback?: () => void
+  ) => Promise<void>
+  setIsOpenCreateAssistant: (isOpen: boolean) => void
+  setIsOpenEditAssistant: (isOpen: boolean) => void
+  setSelectedAssistantId: (id: string) => void
+  setIsOpenSearchConversation: (isOpen: boolean) => void
+  setOpenedKnowledgePanel: (panel: string | null) => void
+  setSelectedTwakeKnowledge: React.Dispatch<
+    React.SetStateAction<TwakeKnowledgeState>
+  >
+}
+
+export function useAssistant(): AssistantContextValue

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

@@ -11,6 +11,9 @@ import { CHAT_EVENTS_DOCTYPE, CHAT_CONVERSATIONS_DOCTYPE } from './queries'
 
 export const AssistantContext = React.createContext()
 
+/**
+ * @returns {import('./AssistantProvider').AssistantContextValue}
+ */
 export const useAssistant = () => {
   const context = useContext(AssistantContext)