[#4175] UI improvements control center (#4176)

* [#3836] Hotfix crashing whatsapp (#3876)

* Update changelog #

* small improvements

frontend/control-center/src/actions/streams/index.ts

@@ -70,7 +70,6 @@ export const getTopicInfo = (topicName: string) => async (dispatch: Dispatch<any
 
 export const getSchemas = () => async (dispatch: Dispatch<any>) => {
   return getData('schemas.list').then(response => {
-    console.log(response);
     dispatch(setTopicSchemasAction(response));
     return Promise.resolve(true);
   });

frontend/control-center/src/components/ChannelAvatar/index.tsx

@@ -23,11 +23,15 @@ import {ReactComponent as MetaAvatar} from 'assets/images/icons/meta.svg';
 import {ReactComponent as OpenaiAvatar} from 'assets/images/icons/openai.svg';
 import {ReactComponent as PineconeAvatar} from 'assets/images/icons/pinecone.svg';
 import {ReactComponent as ChromaAvatar} from 'assets/images/icons/chroma.svg';
-import {ReactComponent as MosaicAvatar} from 'assets/images/icons/mosaic.svg';
 import {ReactComponent as WeaviateAvatar} from 'assets/images/icons/weaviate.svg';
 import {ReactComponent as GmailAvatar} from 'assets/images/icons/gmail.svg';
 import {ReactComponent as SlackAvatar} from 'assets/images/icons/slack.svg';
 import {ReactComponent as FlinkAvatar} from 'assets/images/icons/flink.svg';
+import {ReactComponent as AnthropicAvatar} from 'assets/images/icons/anthropic.svg';
+import {ReactComponent as MistralAvatar} from 'assets/images/icons/mistral-ai.svg';
+import {ReactComponent as GoogleAIAvatar} from 'assets/images/icons/google-ai.svg';
+import {ReactComponent as GroqAvatar} from 'assets/images/icons/groq.svg';
+import {ReactComponent as AWSBedrockAvatar} from 'assets/images/icons/aws.svg';
 
 import {Channel, Source} from 'model';
 import styles from './index.module.scss';
@@ -114,30 +118,37 @@ export const getChannelAvatar = (source: string) => {
     case 'FAISS connector':
       return <MetaAvatar />;
     case Source.llama2:
-    case 'LLama2':
+    case 'Llama2':
       return <MetaAvatar />;
     case Source.openaiConnector:
-    case 'OpenAI connector':
+    case 'OpenAI':
       return <OpenaiAvatar />;
     case Source.pineconeConnector:
-    case 'Pinecone connector':
+    case 'Pinecone':
       return <PineconeAvatar />;
     case Source.chroma:
     case 'Chroma':
       return <ChromaAvatar />;
-    case Source.mosaic:
-    case 'Mosaic':
-      return <MosaicAvatar />;
     case Source.weaviate:
     case 'Weaviate':
       return <WeaviateAvatar />;
     case Source.gmail:
-    case 'GMail connector':
+    case 'Gmail':
       return <GmailAvatar />;
-    case 'Slack connector':
+    case 'Slack':
       return <SlackAvatar />;
-    case 'Flink connector':
+    case 'Flink':
       return <FlinkAvatar />;
+    case 'Anthropic':
+      return <AnthropicAvatar />;
+    case 'Mistral AI':
+      return <MistralAvatar />;
+    case 'Google AI Studio':
+      return <GoogleAIAvatar />;
+    case 'groq':
+      return <GroqAvatar />;
+    case 'AWS Bedrock':
+      return <AWSBedrockAvatar />;
 
     default:
       return <AiryAvatar />;

frontend/control-center/src/pages/Connectors/ConfigureConnector/SetConfigInputs/SetConfigInputs.module.scss

@@ -14,3 +14,15 @@
   height: 80px;
   margin-right: 24px;
 }
+
+.dropdownTitle {
+  font-family: 'Lato', sans-serif;
+  font-size: 14px;
+  font-weight: bold;
+  display: flex;
+  color: var(--color-text-contrast);
+  height: 20px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+}

frontend/control-center/src/pages/Connectors/ConfigureConnector/SetConfigInputs/SetConfigInputs.tsx

@@ -1,4 +1,4 @@
-import {Input} from 'components';
+import {Dropdown, Input} from 'components';
 import {Source} from 'model';
 import React, {Dispatch, SetStateAction, useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
@@ -59,26 +59,44 @@ export const SetConfigInputs = (props: SetConfigInputsProps) => {
       const sensitive = label.includes('Token') || label.includes('Password') || label.includes('Secret');
       const placeholder = source === 'rasa' ? t(`rasaPlaceholder`) : hasSteps ? stepPlaceholder : defaultPlaceholder;
 
-      inputArr.push(
-        <div key={index} className={styles.input}>
-          <Input
-            type={sensitive ? 'password' : isUrl ? 'url' : hasSteps ? 'number' : 'text'}
-            step={hasSteps ? 0.01 : undefined}
-            min={hasSteps ? 0.1 : undefined}
-            max={hasSteps ? 0.9 : undefined}
-            name={key}
-            value={valueTyped === 'string' || valueTyped === 'optionalString' ? '' : valueTyped}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInput({...input, [keyTyped]: e.target.value})}
-            label={label}
-            placeholder={placeholder}
-            showLabelIcon
-            tooltipText={t(`inputTooltip${capitalSource}${toolTip}`)}
-            required={valueTyped !== 'optionalString'}
-            height={32}
-            fontClass="font-base"
-          />
-        </div>
-      );
+      if (configurationValues[key].split('/')[0] === 'dropdown') {
+        const dropdownOptions = configurationValues[key].replace('dropdown/', '').split('/');
+        const [option, setOption] = useState(dropdownOptions[0]);
+        inputArr.push(
+          <div key={index} className={styles.input}>
+            <div className={styles.dropdownTitle}>{key}</div>
+            <Dropdown
+              text={option}
+              variant="normal"
+              options={dropdownOptions}
+              onClick={(option: string) => {
+                setOption(option);
+              }}
+            />
+          </div>
+        );
+      } else {
+        inputArr.push(
+          <div key={index} className={styles.input}>
+            <Input
+              type={sensitive ? 'password' : isUrl ? 'url' : hasSteps ? 'number' : 'text'}
+              step={hasSteps ? 0.01 : undefined}
+              min={hasSteps ? 0.1 : undefined}
+              max={hasSteps ? 0.9 : undefined}
+              name={key}
+              value={valueTyped === 'string' || valueTyped === 'optionalString' ? '' : valueTyped}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setInput({...input, [keyTyped]: e.target.value})}
+              label={label}
+              placeholder={placeholder}
+              showLabelIcon
+              tooltipText={t(`inputTooltip${capitalSource}${toolTip}`)}
+              required={valueTyped !== 'optionalString'}
+              height={32}
+              fontClass="font-base"
+            />
+          </div>
+        );
+      }
     });
 
   return (

frontend/control-center/src/pages/Schemas/SchemaItem/SchemaDescription/EnrichedSchemaSection/index.tsx

@@ -114,7 +114,6 @@ const EnrichedSchemaSection = (props: EnrichedSchemaSectionProps) => {
 
       // Use map to create an array of promises
       const promises = (enrichedCode.fields || []).map(async field => {
-        console.log(typeof field.type);
         if (typeof field.type === 'object' && !Array.isArray(field.type)) {
           if (!field.type.doc) {
             const doc = await generateDocForField(field);