Added the possibility to expand the input area

app/[lng]/create/create.tsx

@@ -77,6 +77,7 @@ import {
 } from "@/components/ui/dialog";
 import { DialogClose } from "@radix-ui/react-dialog";
 import PeyronnetLogo from "@/components/peyronnet-logo";
+import { Checkbox } from "@/components/ui/checkbox";
 
 type Subscription = Database["public"]["Tables"]["subscriptions"]["Row"];
 type Product = Database["public"]["Tables"]["products"]["Row"];
@@ -129,6 +130,7 @@ export default function Create(props: Props) {
   const [variables, setVariables] = useState<Variable[]>([]);
   const [tone, setTone] = useState("tones-none");
   const [textToAnalyse, setTextToAnalyse] = useState("");
+  const [expandInput, setExpandInput] = useState(false);
 
   async function getMs() {
     let m = await getModels();
@@ -635,8 +637,16 @@ export default function Create(props: Props) {
 
       <section>
         <p className="m-2 font-bold print:hidden">{t("prompt")}</p>
-        <div className="m-2 flex flex-col items-stretch space-y-1 sm:flex-row sm:items-center sm:space-x-2 sm:space-y-0 print:hidden">
-          <Input onChange={(v) => setPrompt(v.target.value)} />
+        <div className="m-2 flex flex-col items-stretch space-y-1 sm:flex-row sm:items-start sm:space-x-2 sm:space-y-0 print:hidden">
+          {expandInput ? (
+            <Textarea
+              value={prompt}
+              onChange={(v) => setPrompt(v.target.value)}
+            />
+          ) : (
+            <Input value={prompt} onChange={(v) => setPrompt(v.target.value)} />
+          )}
+
           <div className="grid grid-cols-[1fr,auto] space-x-1 sm:flex sm:space-x-2">
             <FormatDialog lng={lng} setVal={setType} />
 
@@ -849,6 +859,14 @@ export default function Create(props: Props) {
             </Dialog>
           )}
         </div>
+        <div className="flex items-center space-x-2 px-2">
+          <Checkbox
+            id="expandChk"
+            checked={expandInput}
+            onCheckedChange={() => setExpandInput(!expandInput)}
+          />
+          <label htmlFor="expandChk">{t("expand-input")}</label>
+        </div>
         {type.startsWith("ph_analysis_") && (
           <div className="p-2">
             <p className="mb-2 font-bold print:hidden">

app/i18n/locales/en/common.json

@@ -249,5 +249,6 @@
   "partially-available": "Partially available",
   "unavailable": "Unavailable",
   "motivation-letter": "Cover letter",
-  "rephraser": "Rephraser"
+  "rephraser": "Rephraser",
+  "expand-input": "Expand input area"
 }

app/i18n/locales/fr/common.json

@@ -247,5 +247,6 @@
   "partially-available": "Partiellement disponible",
   "unavailable": "Indisponible",
   "motivation-letter": "Lettre de motivation",
-  "rephraser": "Reformulateur"
+  "rephraser": "Reformulateur",
+  "expand-input": "Élargir la zone de saisie"
 }

components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-violet-500 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-violet-500 data-[state=checked]:text-white",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",