feat: Update to use new assistant ✨

manifest.webapp

@@ -28,13 +28,18 @@
     "chatConversations": {
       "description": "Required by the cozy Assistant",
       "type": "io.cozy.ai.chat.conversations",
-      "verbs": ["GET", "POST"]
+      "verbs": ["ALL"]
     },
     "chatEvents": {
       "description": "Required by the cozy Assistant",
       "type": "io.cozy.ai.chat.events",
       "verbs": ["GET"]
     },
+    "assistants": {
+      "type": "io.cozy.ai.chat.assistants",
+      "verbs": ["ALL"],
+      "description": "Required to fetch, create and update AI assistant"
+    },
     "settings": {
       "description": "Required by the cozy-bar display Claudy, to know which applications are coming soon and to manage default redirection update",
       "type": "io.cozy.settings",
@@ -129,11 +134,6 @@
       "type": "cc.cozycloud.announcements.uploads",
       "verbs": ["GET"],
       "description": "Remote-doctype required to get announcements images"
-    },
-    "assistants": {
-      "type": "io.cozy.ai.chat.assistants",
-      "verbs": ["ALL"],
-      "description": "Remote-doctype required to fetch, create and update assistant data"
     }
   },
   "routes": {

package.json

@@ -34,7 +34,7 @@
     "@sentry/react": "7.119.0",
     "cozy": "^0.5.0",
     "cozy-bar": "^29.3.0",
-    "cozy-client": "^60.21.0",
+    "cozy-client": "^60.22.1",
     "cozy-dataproxy-lib": "^4.11.0",
     "cozy-device-helper": "^3.8.0",
     "cozy-devtools": "^1.3.0",
@@ -48,11 +48,11 @@
     "cozy-minilog": "^3.10.0",
     "cozy-pouch-link": "^60.14.0",
     "cozy-realtime": "^5.6.4",
-    "cozy-search": "^0.16.0",
+    "cozy-search": "^0.23.0",
     "cozy-sharing": "^28.0.2",
     "cozy-stack-client": "^60.6.0",
     "cozy-tsconfig": "^1.8.1",
-    "cozy-ui": "^135.6.0",
+    "cozy-ui": "^137.0.1",
     "cozy-ui-plus": "^4.0.0",
     "cozy-viewer": "^26.2.0",
     "date-fns": "2.30.0",

src/components/AppWrapper.jsx

@@ -78,6 +78,7 @@ const Inner = ({ children, lang, context }) => (
     <SectionsProvider>
       {children}
       <RealTimeQueries doctype="io.cozy.ai.chat.conversations" />
+      <RealTimeQueries doctype="io.cozy.ai.chat.assistant" />
       <RealTimeQueries doctype="io.cozy.apps" />
       <RealTimeQueries doctype="io.cozy.files" />
       <RealTimeQueries doctype="io.cozy.jobs" />

src/components/Assistant/AssistantMobileWrapper.jsx

@@ -15,7 +15,7 @@ export const AssistantMobileWrapper = () => {
   return (
     <CozyTheme variant="normal">
       <div
-        className={cx('home-mobile-assistant', {
+        className={cx('home-mobile-assistant u-dn', {
           ['home-mobile-assistant--immersive']: getFlagshipMetadata().immersive
         })}
       >

src/components/MainView.jsx

@@ -2,15 +2,19 @@ import React from 'react'
 import cx from 'classnames'
 
 import { getFlagshipMetadata } from 'cozy-device-helper'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 
-export const MainView = ({ children }) => {
+export const MainView = ({ children, isFullHeight }) => {
   const isImmersive = getFlagshipMetadata().immersive
+  const { isMobile } = useBreakpoints()
 
   return (
     <main
       className={cx(
         'main-view u-flex u-flex-column u-flex-content-start u-flex-content-stretch u-w-100 u-pos-relative',
-        isImmersive && 'main-view--immersive'
+        isImmersive && 'main-view--immersive',
+        isFullHeight && 'main-view--full-height',
+        isFullHeight && isMobile && 'main-view--full-height-mobile'
       )}
     >
       {children}

src/containers/App.jsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
-import { Navigate, Route } from 'react-router-dom'
+import { Navigate, Outlet, Route, useLocation } from 'react-router-dom'
 import { BarComponent } from 'cozy-bar'
+import cx from 'classnames'
 
 import flag from 'cozy-flags'
 import minilog from 'cozy-minilog'
@@ -14,7 +15,7 @@ import { Layout } from 'cozy-ui/transpiled/react/Layout'
 import { useCozyTheme } from 'cozy-ui-plus/dist/providers/CozyTheme'
 
 import { AssistantMobileWrapper } from '@/components/Assistant/AssistantMobileWrapper'
-import { AssistantDialog, SearchDialog } from 'cozy-search'
+import { AssistantDialog, AssistantView, SearchDialog } from 'cozy-search'
 import Failure from '@/components/Failure'
 import HeroHeader from '@/components/HeroHeader'
 import Home from '@/components/Home'
@@ -40,11 +41,13 @@ import { useFetchInitialData } from '@/hooks/useFetchInitialData'
 import SectionDialog from '@/components/Sections/SectionDialog'
 import { SentryRoutes } from '@/lib/sentry'
 import '../flags'
+import styles from '../styles/app.styl'
 
 window.flag = window.flag || flag
 window.minilog = minilog
 
 const App = () => {
+  const { pathname } = useLocation()
   const { isMobile } = useBreakpoints()
   const [contentWrapper, setContentWrapper] = useState(undefined)
 
@@ -104,25 +107,42 @@ const App = () => {
     setDidInit(true)
   }
 
+  const isNewAssistantView =
+    pathname.startsWith('/connected/assistant/') &&
+    flag('cozy.top-bar-in-assistant.enabled')
+
   return (
     // u-bg-white avoids mix-blend-mode from home-custom-background to be linked to the background color of the body. Must not be responsive to the theme.
-    <Layout monoColumn className="u-bg-white">
+    <Layout monoColumn className={`${isNewAssistantView ? '' : 'u-bg-white'}`}>
       <BarComponent
-        searchOptions={{ enabled: false }}
+        searchOptions={{ enabled: isNewAssistantView }}
+        appSlug={isNewAssistantView ? 'assistant' : undefined}
         componentsProps={{
-          Wrapper: { className: 'u-bg-transparent u-elevation-0' }
+          Wrapper: {
+            className: cx('u-elevation-0', {
+              'u-border-bottom': isNewAssistantView,
+              'u-bg-transparent': !isNewAssistantView,
+              [styles['topbar-border']]: isNewAssistantView
+            })
+          }
         }}
       />
-      <BackgroundContainer />
+      {!isNewAssistantView && <BackgroundContainer />}
       <ReloadFocus />
-      <MainView>
+      <MainView isFullHeight={isNewAssistantView}>
         <BackupNotification />
         <div
-          className="u-flex u-flex-column u-flex-content-start u-flex-content-stretch u-w-100 u-m-auto u-pos-relative"
+          className={cx(
+            'u-flex u-flex-column u-flex-content-start u-flex-content-stretch u-w-100 u-pos-relative',
+            {
+              'u-m-auto': !isNewAssistantView,
+              'u-h-100': isNewAssistantView
+            }
+          )}
           ref={didInit ? div => setContentWrapper(div) : null}
         >
           <MoveModal />
-          <HeroHeader />
+          {!isNewAssistantView && <HeroHeader />}
           {hasError && (
             <main className="u-flex u-flex-items-center u-flex-justify-center">
               <Failure errorType="initial" />
@@ -139,15 +159,25 @@ const App = () => {
                 <Route
                   path="/connected"
                   element={
-                    <Home
-                      wrapper={contentWrapper}
-                      shortcutsDirectories={shortcutsDirectories}
-                    />
+                    isNewAssistantView ? (
+                      <Outlet />
+                    ) : (
+                      <Home
+                        wrapper={contentWrapper}
+                        shortcutsDirectories={shortcutsDirectories}
+                      />
+                    )
                   }
                 >
                   <Route
                     path="assistant/:conversationId"
-                    element={<AssistantDialog />}
+                    element={
+                      flag('cozy.top-bar-in-assistant.enabled') ? (
+                        <AssistantView />
+                      ) : (
+                        <AssistantDialog />
+                      )
+                    }
                   />
                   <Route path="search" element={<SearchDialog />} />
 
@@ -170,7 +200,9 @@ const App = () => {
           )}
           <IconSprite />
         </div>
-        <FooterLogo />
+        {((!isMobile && isNewAssistantView) || !isNewAssistantView) && (
+          <FooterLogo />
+        )}
       </MainView>
       {showAssistantForMobile && <AssistantMobileWrapper />}
       {flag('home.wallpaper-personalization.enabled') && (

src/containers/App.spec.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { isFlagshipApp } from 'cozy-device-helper'
+import { HashRouter } from 'react-router-dom'
 import { render } from '@testing-library/react'
 import App from '../components/AnimatedWrapper'
 import AppLike from '@/test/AppLike'
@@ -57,7 +58,9 @@ describe('App', () => {
       <AppLike>
         <CozyTheme>
           <WallPaperProvider>
-            <App />
+            <HashRouter>
+              <App />
+            </HashRouter>
           </WallPaperProvider>
         </CozyTheme>
       </AppLike>
@@ -82,7 +85,9 @@ describe('App', () => {
       <AppLike>
         <CozyTheme>
           <WallPaperProvider>
-            <App />
+            <HashRouter>
+              <App />
+            </HashRouter>
           </WallPaperProvider>
         </CozyTheme>
       </AppLike>

src/schema.js

@@ -47,6 +47,16 @@ const schema = {
         doctype: 'io.cozy.accounts'
       }
     }
+  },
+  conversations: {
+    doctype: 'io.cozy.ai.chat.conversations',
+    attributes: {},
+    relationships: {
+      assistant: {
+        type: 'has-one',
+        doctype: 'io.cozy.ai.chat.assistants'
+      }
+    }
   }
 }
 

src/styles/app.styl

@@ -46,6 +46,13 @@ body
     &--immersive
         min-height calc(100vh - var(--flagship-bottom-height) - var(--flagship-top-height))
 
+    &--full-height
+        padding 0
+        min-height calc(100vh - 3rem - 1px) // 3rem is topbar height, 1px is divider height
+
+    &--full-height-mobile
+        margin-top 3rem
+
 +small-screen()
     .main-view, .home-custom-background
         transition transform 200ms ease-out
@@ -60,3 +67,6 @@ body
 
     #coz-bar
         top var(--flagship-top-height)
+
+.topbar-border
+    border-bottom 1px solid var(--dividerColor)