adjust display and prefer Dropdown

sctg-development · Oct 1, 2024 · f2eb793 · f2eb793
1 parent 1b3c080
commit f2eb793
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 11 deletions.
diff --git a/src/aipane/AIPrompt.ts b/src/aipane/AIPrompt.ts
@@ -15,4 +15,4 @@ export interface AIModel {
   id: string;
   name: string;
   default: boolean;
-}
+}
diff --git a/src/aipane/components/Header.tsx b/src/aipane/components/Header.tsx
@@ -17,8 +17,8 @@ const useStyles = makeStyles({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    paddingBottom: "30px",
-    paddingTop: "100px",
+    paddingBottom: "10px",
+    paddingTop: "50px",
     backgroundColor: tokens.colorNeutralBackground3,
   },
   message: {

diff --git a/src/aipane/components/HeroComboPrompts.tsx b/src/aipane/components/HeroComboPrompts.tsx
@@ -4,7 +4,7 @@
 =========================================================
 */
 import * as React from "react";
-import { Combobox, Label, makeStyles, Option, useId } from "@fluentui/react-components";
+import { Dropdown, Label, makeStyles, Option, useId } from "@fluentui/react-components";
 import { useState, useEffect } from "react";
 import config from "../../config.json"; // Assurez-vous que le chemin est correct
 import type { AIPrompt } from "../AIPrompt";
@@ -49,18 +49,19 @@ const HeroComboPrompts: React.FC<HeroComboPromptsProps> = ({ onChange }) => {
       <Label htmlFor={inputId} size="large">
         AI Prompt
       </Label>
-      <Combobox
+      <Dropdown
         className={styles.combobox}
         id={inputId}
-        placeholder="Select a prompt"
         onActiveOptionChange={handleChange}
+        defaultSelectedOptions={[config.prompts[0].id]}
+        defaultValue={config.prompts[0].summary}
       >
         {config.prompts.map((option: AIPrompt) => (
-          <Option id={option.id} value={option.id} key={option.id}>
+          <Option value={option.id} key={option.id}>
             {option.summary}
           </Option>
         ))}
-      </Combobox>
+      </Dropdown>
     </div>
   );
 };

diff --git a/src/aipane/components/HeroModels.tsx b/src/aipane/components/HeroModels.tsx
@@ -15,7 +15,7 @@ interface HeroModelsProps {
 }
 
 function getDefaultModel(): AIModel {
-   return config.models.filter((model: AIModel) => model.default)[0];
+  return config.models.filter((model: AIModel) => model.default)[0];
 }
 const useStyles = makeStyles({
   root: {
@@ -61,7 +61,7 @@ const HeroModels: React.FC<HeroModelsProps> = ({ onChange }) => {
         onActiveOptionChange={handleChange}
         onChange={handleChange}
       >
-        {config.models.map((option:AIModel) => (
+        {config.models.map((option: AIModel) => (
           <Option value={option.id} key={option.id}>
             {option.name}
           </Option>

diff --git a/src/aipane/components/TextInsertion.tsx b/src/aipane/components/TextInsertion.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles({
   textPromptAndInsertion: {
     display: "flex",
     flexDirection: "column",
-    alignItems: "center", 
+    alignItems: "center",
     gap: "2px",
     margin: "10px",
   },