feat: Change flow select provider and model ✨

Author: lethemanh

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

@@ -1,38 +1,24 @@
-import React, { useMemo, useState } from 'react'
-import { Link } from 'react-router-dom'
+import cx from 'classnames'
+import React, { useState } from 'react'
 import { useI18n } from 'twake-i18n'
 
 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'
 
-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
-      })),
-    [models]
-  )
-
   return (
     <div className="u-flex u-flex-column u-gap-1">
       <Typography variant="body1" className="u-mb-1 u-c-text-secondary">
@@ -84,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>
       )}
@@ -120,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>
@@ -132,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 Icon from 'cozy-ui/transpiled/react/Icon'
 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 { 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,7 +1,7 @@
 [
   {
     "id": "openrag",
-    "name": "LINAGORA",
+    "name": "OPENRAG",
     "models": ["openrag"],
     "description": "assistant_create.steps.provider_selection.openrag.description",
     "icon": "OpenRagLogo",

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

@@ -25,11 +25,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,10 +1,13 @@
 import { useMemo, useState } from 'react'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
+import Minilog from 'cozy-minilog'
 import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 
 import { locales } from '../../locales'
 
+const log = Minilog('[AssistantDialog]')
+
 export const STEPS = {
   BASIC_INFO: 0,
   MODEL_SELECTION: 1,
@@ -66,7 +69,8 @@ export const useAssistantDialog = ({ onClose, initialData = {} }) => {
       ...prev,
       baseUrl: provider.baseUrl,
       isCustomModel: provider.id === 'custom',
-      model: provider.id === 'openrag' ? provider.models[0] : prev.model
+      model: provider.id === 'openrag' ? provider.models[0] : prev.model,
+      providerId: provider.id
     }))
     setSelectedProvider({
       ...provider,
@@ -95,6 +99,7 @@ export const useAssistantDialog = ({ onClose, initialData = {} }) => {
         setStep(prev => prev + 1)
       }
     } catch (error) {
+      log.error('Error in handleNext:', error)
       showAlert({ message: t('assistant.default_error'), severity: 'error' })
     }
   }

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

@@ -41,7 +41,10 @@ const CreateAssistantDialog = ({ open, onClose }) => {
     handleAvatarChange,
     isNextDisabled,
     handleChangeModel
-  } = useAssistantDialog({ onClose })
+  } = useAssistantDialog({
+    onClose,
+    initialData: { selectedProvider: { id: 'openrag' } }
+  })
 
   const getTitle = () => {
     if (step === STEPS.API_KEY) {
@@ -58,7 +61,8 @@ const CreateAssistantDialog = ({ open, onClose }) => {
       model: formData.model,
       apiKey: formData.apiKey,
       baseUrl: formData.baseUrl,
-      isCustomModel: formData.isCustomModel
+      isCustomModel: formData.isCustomModel,
+      providerId: selectedProvider.id
     })
     showAlert({ message: t('assistant_create.success'), severity: 'success' })
   }

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

@@ -18,7 +18,7 @@ import { useAlert } from 'cozy-ui/transpiled/react/providers/Alert'
 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,
@@ -67,16 +67,21 @@ const EditAssistantDialog = ({ open, onClose }) => {
         model: provider?.auth?.login || '',
         baseUrl: provider?.data?.baseUrl || '',
         apiKey: provider?.auth?.apiKey || '',
-        encryptedApiKey: provider?.auth?.credentials_encrypted || ''
+        encryptedApiKey: provider?.auth?.credentials_encrypted || '',
+        providerId: assistant?.relationships?.provider?.cozyMetadata?.providerId
       })
 
-      const selectProviderDefault = getSelectedProviderByModel(
-        provider?.auth?.login
+      const selectProviderDefault = getSelectedProviderById(
+        assistant?.relationships?.provider?.cozyMetadata?.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 +102,8 @@ const EditAssistantDialog = ({ open, onClose }) => {
       model: formData.model,
       apiKey: formData.apiKey,
       baseUrl: formData.baseUrl,
-      isCustomModel: formData.isCustomModel
+      isCustomModel: formData.isCustomModel,
+      providerId: selectedProvider.id
     })
     showAlert({ message: t('assistant_edit.success'), severity: 'success' })
   }

packages/cozy-search/src/locales/en.json

@@ -127,7 +127,8 @@
         "description": "Enter provider URL, model and your API key to configure the new assistant. Your key will be stored securely.",
         "custom_provider_description": "Configure your custom AI provider settings",
         "model": {
-          "label": "Model"
+          "label": "Model",
+          "placeholder": "Enter the model name of the provider"
         },
         "provider": {
           "label": "Provider name",

packages/cozy-search/src/locales/fr.json

@@ -127,7 +127,8 @@
         "description": "Saisissez l'URL du fournisseur, le modèle et votre clé API pour configurer le nouvel assistant. Votre clé sera stockée de manière sécurisée.",
         "custom_provider_description": "Configurez les paramètres de votre fournisseur d'IA personnalisé",
         "model": {
-          "label": "Modèle"
+          "label": "Modèle",
+          "placeholder": "Entrez le nom du modèle du fournisseur"
         },
         "provider": {
           "label": "Nom du fournisseur",