Adjust assistant creation flow

packages/cozy-search/package.json

@@ -27,7 +27,7 @@
     "babel-plugin-tsconfig-paths": "^1.0.3",
     "babel-preset-cozy-app": "^2.8.4",
     "cozy-bar": "^29.0.0",
-    "cozy-client": "^60.21.0",
+    "cozy-client": "60.23.0",
     "cozy-device-helper": "^4.0.3",
     "cozy-flags": "^4.9.1",
     "cozy-intent": "^2.31.1",

packages/cozy-search/src/components/CreateAssistantSteps/ApiKeyStep.jsx

@@ -1,39 +1,24 @@
-import React, { useMemo, useState } from 'react'
-import { Link } from 'react-router-dom'
+import cx from 'classnames'
+import React, { useState } from 'react'
 
 import Card from 'cozy-ui/transpiled/react/Card'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye'
-import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
 import TextField from 'cozy-ui/transpiled/react/TextField'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { useCozyTheme } from 'cozy-ui-plus/dist/providers/CozyTheme'
 import { useI18n } from 'twake-i18n'
 
-const ApiKeyStep = ({ apiKey, selectedProvider, onChange, onModelSelect }) => {
+const ApiKeyStep = ({ apiKey, selectedProvider, onChange }) => {
+  const { type: theme } = useCozyTheme()
   const [showPassword, setShowPassword] = useState(false)
 
   const { t } = useI18n()
-  const {
-    models,
-    id,
-    name: providerName,
-    model,
-    baseUrl
-  } = selectedProvider || {}
+  const { id, name: providerName, model, baseUrl } = selectedProvider || {}
 
   const isCustomModel = id === 'custom'
 
-  const mappedModels = useMemo(
-    () =>
-      models?.map(model => ({
-        label: model,
-        value: model
-      })),
-    // eslint-disable-next-line react-hooks/preserve-manual-memoization
-    [models]
-  )
-
   return (
     <div className="u-flex u-flex-column u-gap-1">
       <Typography variant="body1" className="u-mb-1 u-c-text-secondary">
@@ -85,10 +70,15 @@ const ApiKeyStep = ({ apiKey, selectedProvider, onChange, onModelSelect }) => {
           <Typography variant="h6" className="u-mb-half">
             {t('assistant_create.steps.configuration.model.label')}
           </Typography>
-          <SelectBox
-            options={mappedModels}
-            value={{ label: model, value: model }}
-            onChange={selectedModel => onModelSelect(selectedModel.value)}
+          <TextField
+            fullWidth
+            placeholder={t(
+              'assistant_create.steps.configuration.model.placeholder'
+            )}
+            value={model}
+            onChange={onChange('model')}
+            variant="outlined"
+            type="text"
           />
         </div>
       )}
@@ -121,7 +111,12 @@ const ApiKeyStep = ({ apiKey, selectedProvider, onChange, onModelSelect }) => {
         />
       </div>
 
-      <Card className="u-bg-paleGrey u-p-1 u-bdw-0">
+      <Card
+        className={cx(' u-p-1 u-bdw-0', {
+          'u-bg-primaryBackgroundLight': theme === 'light',
+          'u-bg-coolGrey': theme === 'dark'
+        })}
+      >
         <Typography variant="h6" className="u-mb-half">
           {t('assistant_create.steps.configuration.no_key')}
         </Typography>
@@ -133,9 +128,6 @@ const ApiKeyStep = ({ apiKey, selectedProvider, onChange, onModelSelect }) => {
                 : t('assistant_create.steps.configuration.custom_provider')
             })}
           </span>
-          <Link underline="hover" to="/" className="u-primaryColor">
-            {t('assistant_create.steps.configuration.read_docs')}
-          </Link>
         </Typography>
       </Card>
     </div>

packages/cozy-search/src/components/CreateAssistantSteps/Provider.jsx

@@ -6,6 +6,7 @@ import CheckIcon from 'cozy-ui/transpiled/react/Icons/Check'
 import PlusSmallIcon from 'cozy-ui/transpiled/react/Icons/PlusSmall'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { useI18n } from 'twake-i18n'
+import { useCozyTheme } from 'cozy-ui-plus/dist/providers/CozyTheme'
 
 import styles from './styles.styl'
 import AnthropicLogo from '../../assets/anthropic.svg'
@@ -27,17 +28,21 @@ const ICONS = {
 
 const Provider = ({ selectedProvider, provider, onSelect }) => {
   const { t } = useI18n()
+  const { type: theme } = useCozyTheme()
   const isSelected = selectedProvider?.id === provider.id
   const isOpenRag = provider.id === 'openrag'
 
   return (
     <button
       type="button"
-      className={`u-p-1 u-c-pointer u-flex u-flex-row u-flex-items-center ${
-        styles['model-card']
-      } ${isSelected ? styles.selected : ''} ${
-        isOpenRag ? styles.openrag : ''
-      }`}
+      className={cx(
+        'u-p-1 u-c-pointer u-flex u-flex-row u-flex-items-center',
+        styles['model-card'],
+        {
+          [styles['model-card--selected']]: isSelected,
+          [styles[`model-card--openrag--${theme}`]]: isOpenRag
+        }
+      )}
       onClick={() => onSelect(provider)}
     >
       <div

packages/cozy-search/src/components/CreateAssistantSteps/helpers.js

@@ -3,14 +3,13 @@ import providers from './providers.json'
 /**
  * Get the provider corresponding to a given model name.
  * If no provider matches, return the custom provider.
- * @param {string} modelName - The name of the model.
+ * @param {string} providerId - The ID of the provider.
  * @returns {object} The provider object.
  */
-export const getSelectedProviderByModel = modelName => {
+export const getSelectedProviderById = providerId => {
   return (
-    providers.find(provider => provider.models?.includes(modelName)) || {
-      ...providers.find(provider => provider.id === 'custom'),
-      name: modelName
+    providers.find(provider => provider.id === providerId) || {
+      ...providers.find(provider => provider.id === 'custom')
     }
   )
 }

packages/cozy-search/src/components/CreateAssistantSteps/providers.json

@@ -1,11 +1,10 @@
 [
   {
     "id": "openrag",
-    "name": "LINAGORA",
+    "name": "Twake",
     "models": ["openrag"],
     "description": "assistant_create.steps.provider_selection.openrag.description",
     "icon": "OpenRagLogo",
-    "baseUrl": "/api/openrag",
     "external": false
   },
   {

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

@@ -28,11 +28,15 @@
     text-align left
     background inherit
 
-    &.selected
+    &--selected
       border 1px solid var(--primaryColor)
 
-    &.openrag
-      background linear-gradient(90deg, #EFF6FF 0%, #FAF5FF 100%)
+    &--openrag
+      &--light
+        background linear-gradient(90deg, #EFF6FF 0%, #FAF5FF 100%)
+
+      &--dark
+        background linear-gradient(90deg, #3A2899 0%, #0C091B 100%)
 
   & .icon-container
     width 53px

packages/cozy-search/src/components/CreateAssistantSteps/useAssistantDialog.js

@@ -1,9 +1,13 @@
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 
+import Minilog from 'cozy-minilog'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from '../../locales'
+import { OPENRAG_MODEL } from '../constants'
+
+const log = Minilog('[AssistantDialog]')
 
 export const STEPS = {
   BASIC_INFO: 0,
@@ -34,10 +38,17 @@ export const useAssistantDialog = ({ onClose, initialData = {} }) => {
     model: '',
     baseUrl: '',
     apiKey: '',
-    isCustomModel: false,
     ...initialData
   })
 
+  const canSubmit = useMemo(
+    () =>
+      step === STEPS.API_KEY ||
+      (step === STEPS.MODEL_SELECTION &&
+        selectedProvider?.id === OPENRAG_MODEL),
+    [step, selectedProvider?.id]
+  )
+
   const handleChange = field => event => {
     const value = event.target?.value !== undefined ? event.target.value : event
     setFormData(prev => ({ ...prev, [field]: value }))
@@ -55,10 +66,14 @@ export const useAssistantDialog = ({ onClose, initialData = {} }) => {
   }
 
   const handleProviderSelection = provider => {
+    const isOpenrag = provider.id === OPENRAG_MODEL
     setFormData(prev => ({
       ...prev,
-      baseUrl: provider.baseUrl,
-      isCustomModel: provider.id === 'custom'
+      baseUrl: provider.baseUrl ?? '',
+      model: isOpenrag ? provider.models[0] : '',
+      apiKey: '',
+      encryptedApiKey: '',
+      providerId: provider.id
     }))
     setSelectedProvider({
       ...provider,
@@ -80,13 +95,14 @@ export const useAssistantDialog = ({ onClose, initialData = {} }) => {
    */
   const handleNext = async onSubmit => {
     try {
-      if (step === STEPS.API_KEY) {
+      if (canSubmit) {
         await onSubmit(formData)
         onClose()
       } else {
         setStep(prev => prev + 1)
       }
-    } catch (_error) {
+    } catch (error) {
+      log.error('Error in handleNext:', error)
       showAlert({ message: t('assistant.default_error'), severity: 'error' })
     }
   }
@@ -117,6 +133,7 @@ export const useAssistantDialog = ({ onClose, initialData = {} }) => {
     handleBack,
     handleNext,
     isNextDisabled,
-    handleChangeModel
+    handleChangeModel,
+    canSubmit
   }
 }

packages/cozy-search/src/components/Views/CreateAssistantDialog.jsx

@@ -18,12 +18,15 @@ import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from '../../locales'
 import AssistantDialogContent from '../CreateAssistantSteps/AssistantDialogContent'
+import { getSelectedProviderById } from '../CreateAssistantSteps/helpers'
 import styles from '../CreateAssistantSteps/styles.styl'
 import {
   useAssistantDialog,
   STEPS
 } from '../CreateAssistantSteps/useAssistantDialog'
 
+const defaultProvider = getSelectedProviderById('openrag')
+
 const CreateAssistantDialog = ({ open, onClose }) => {
   useExtendI18n(locales)
   const { t } = useI18n()
@@ -35,14 +38,21 @@ const CreateAssistantDialog = ({ open, onClose }) => {
     step,
     formData,
     selectedProvider,
+    canSubmit,
     handleBack,
     handleNext,
     handleChange,
     handleProviderSelection,
     handleAvatarChange,
     isNextDisabled,
     handleChangeModel
-  } = useAssistantDialog({ onClose })
+  } = useAssistantDialog({
+    onClose,
+    initialData: {
+      selectedProvider: defaultProvider,
+      model: defaultProvider.models[0]
+    }
+  })
 
   const getTitle = () => {
     if (step === STEPS.API_KEY) {
@@ -59,7 +69,7 @@ const CreateAssistantDialog = ({ open, onClose }) => {
       model: formData.model,
       apiKey: formData.apiKey,
       baseUrl: formData.baseUrl,
-      isCustomModel: formData.isCustomModel
+      providerId: selectedProvider.id
     })
     showAlert({ message: t('assistant_create.success'), severity: 'success' })
   }
@@ -102,7 +112,7 @@ const CreateAssistantDialog = ({ open, onClose }) => {
           onClick={() => handleNext(onSubmit)}
           disabled={isNextDisabled()}
           label={
-            step === STEPS.API_KEY
+            canSubmit
               ? t('assistant_create.buttons.create')
               : t('assistant_create.buttons.next')
           }

packages/cozy-search/src/components/Views/EditAssistantDialog.jsx

@@ -19,7 +19,7 @@ import { useI18n, useExtendI18n } from 'twake-i18n'
 import { locales } from '../../locales'
 import { useAssistant } from '../AssistantProvider'
 import AssistantDialogContent from '../CreateAssistantSteps/AssistantDialogContent'
-import { getSelectedProviderByModel } from '../CreateAssistantSteps/helpers'
+import { getSelectedProviderById } from '../CreateAssistantSteps/helpers'
 import styles from '../CreateAssistantSteps/styles.styl'
 import {
   useAssistantDialog,
@@ -38,6 +38,7 @@ const EditAssistantDialog = ({ open, onClose }) => {
     step,
     formData,
     selectedProvider,
+    canSubmit,
     setFormData,
     setSelectedProvider,
     handleBack,
@@ -60,23 +61,28 @@ const EditAssistantDialog = ({ open, onClose }) => {
       )
       const assistant = response.data
       const provider = response.included[0]
+      const providerId =
+        assistant?.relationships?.provider?.data?.metadata?.providerId
       setFormData({
         name: assistant.name || '',
         description: assistant.prompt || '',
         icon: assistant.icon || '',
-        isCustomModel: assistant.isCustomModel || false,
         model: provider?.auth?.login || '',
         baseUrl: provider?.data?.baseUrl || '',
-        apiKey: provider?.auth?.apiKey || ''
+        apiKey: provider?.auth?.apiKey || '',
+        encryptedApiKey: provider?.auth?.credentials_encrypted || '',
+        providerId
       })
 
-      const selectProviderDefault = getSelectedProviderByModel(
-        provider?.auth?.login
-      )
+      const selectProviderDefault = getSelectedProviderById(providerId)
       setSelectedProvider({
         ...selectProviderDefault,
         model: provider?.auth?.login,
-        baseUrl: provider?.data?.baseUrl
+        baseUrl: provider?.data?.baseUrl,
+        name:
+          selectProviderDefault.id === 'custom'
+            ? provider?.auth?.login
+            : selectProviderDefault.name
       })
     }
     fetchAssistant()
@@ -97,7 +103,7 @@ const EditAssistantDialog = ({ open, onClose }) => {
       model: formData.model,
       apiKey: formData.apiKey,
       baseUrl: formData.baseUrl,
-      isCustomModel: formData.isCustomModel
+      providerId: selectedProvider.id
     })
     showAlert({ message: t('assistant_edit.success'), severity: 'success' })
   }
@@ -138,9 +144,9 @@ const EditAssistantDialog = ({ open, onClose }) => {
         <Button
           variant="primary"
           onClick={() => handleNext(onSubmit)}
-          disabled={isNextDisabled(true)}
+          disabled={isNextDisabled(!!formData.encryptedApiKey)}
           label={
-            step === STEPS.API_KEY
+            canSubmit
               ? t('assistant_edit.buttons.edit')
               : t('assistant_edit.buttons.next')
           }

packages/cozy-search/src/components/constants.js

@@ -4,3 +4,5 @@ export const DEFAULT_ASSISTANT = {
 }
 
 export const FETCH_CONVERSATIONS_LIMIT = 50
+
+export const OPENRAG_MODEL = 'openrag'