fix: resolve all TypeScript errors in web app

apps/web/src/components/personalities/PersonalityPreview.tsx

@@ -27,7 +27,7 @@ const FORMALITY_LABELS: Record<string, string> = {
 };
 
 export function PersonalityPreview({ personality }: PersonalityPreviewProps): React.ReactElement {
-  const [selectedPrompt, setSelectedPrompt] = useState<string>(SAMPLE_PROMPTS[0]);
+  const [selectedPrompt, setSelectedPrompt] = useState<string>(SAMPLE_PROMPTS[0]!);
 
   return (
     <Card>
@@ -66,16 +66,19 @@ export function PersonalityPreview({ personality }: PersonalityPreviewProps): Re
         <div className="space-y-2">
           <label className="text-sm font-medium">Preview with Sample Prompt:</label>
           <div className="flex flex-wrap gap-2">
-            {SAMPLE_PROMPTS.map((prompt) => (
-              <Button
-                key={prompt}
-                variant={selectedPrompt === prompt ? "default" : "outline"}
-                size="sm"
-                onClick={() => setSelectedPrompt(prompt)}
-              >
-                {prompt.substring(0, 30)}...
-              </Button>
-            ))}
+            {SAMPLE_PROMPTS.map((prompt) => {
+              const variant = selectedPrompt === prompt ? "default" : "outline";
+              return (
+                <Button
+                  key={prompt}
+                  variant={variant}
+                  size="sm"
+                  onClick={() => setSelectedPrompt(prompt)}
+                >
+                  {prompt.substring(0, 30)}...
+                </Button>
+              );
+            })}
           </div>
         </div>