feat: redesign AI test page with Ethereal Precision v2 (horizontal layout, ultra-wide) and fix Dockerfile OpenSSL issue

memento-note/app/(admin)/admin/ai-test/ai-tester.tsx

@@ -1,11 +1,10 @@
 'use client'
 
 import { Button } from '@/components/ui/button'
-import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
 import { useState, useEffect } from 'react'
 import { toast } from 'sonner'
-import { Loader2, CheckCircle2, XCircle, Clock, Zap, Info } from 'lucide-react'
+import { Loader2, CheckCircle2, XCircle, Clock, Zap, Info, Shield, Brain, MessageSquare, Search } from 'lucide-react'
 import { useLanguage } from '@/lib/i18n'
 
 interface TestResult {
@@ -65,14 +64,14 @@ export function AI_TESTER({ type }: { type: 'tags' | 'embeddings' | 'chat' }) {
 
       if (data.success) {
         toast.success(
-          `✅ ${t('admin.aiTest.testSuccessToast', { type: type === 'tags' ? 'Tags' : 'Embeddings' })}`,
+          `${t('admin.aiTest.testSuccessToast', { type: type === 'tags' ? 'Tags' : type === 'chat' ? 'Chat' : 'Embeddings' })}`,
           {
             description: `Provider: ${data.provider} | Time: ${endTime - startTime}ms`
           }
         )
       } else {
         toast.error(
-          `❌ ${t('admin.aiTest.testFailedToast', { type: type === 'tags' ? 'Tags' : 'Embeddings' })}`,
+          `${t('admin.aiTest.testFailedToast', { type: type === 'tags' ? 'Tags' : type === 'chat' ? 'Chat' : 'Embeddings' })}`,
           {
             description: data.error || 'Unknown error'
           }
@@ -93,7 +92,7 @@ export function AI_TESTER({ type }: { type: 'tags' | 'embeddings' | 'chat' }) {
   }
 
   const getProviderInfo = () => {
-    if (!config) return { provider: t('admin.aiTest.testing'), model: t('admin.aiTest.testing') }
+    if (!config) return { provider: '...', model: '...' }
 
     if (type === 'tags') {
       return {
@@ -116,127 +115,164 @@ export function AI_TESTER({ type }: { type: 'tags' | 'embeddings' | 'chat' }) {
   const providerInfo = getProviderInfo()
 
   return (
-    <div className="space-y-4">
-      {/* Provider Info */}
-      <div className="space-y-3 p-4 bg-muted/50 rounded-lg">
-        <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">{t('admin.aiTest.provider')}</span>
-          <Badge variant="outline" className="text-xs">
-            {providerInfo.provider.toUpperCase()}
-          </Badge>
+    <div className="space-y-8">
+      {/* Current Config Summary */}
+      <div className="rounded-2xl border border-border bg-muted/20 overflow-hidden shadow-inner">
+        <div className="px-4 py-2.5 border-b border-border/50 bg-muted/40 flex items-center gap-2">
+          {type === 'tags' ? <Brain className="h-4 w-4 text-primary" /> : 
+           type === 'embeddings' ? <Search className="h-4 w-4 text-green-600" /> : 
+           <MessageSquare className="h-4 w-4 text-violet-600" />}
+          <span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">{t('admin.aiTest.provider')}</span>
         </div>
-        <div className="flex items-center justify-between">
-          <span className="text-sm font-medium">{t('admin.aiTest.model')}</span>
-          <span className="text-sm text-muted-foreground font-mono">
-            {providerInfo.model}
-          </span>
+        <div className="p-6 space-y-5">
+          <div className="flex items-center justify-between gap-6">
+            <span className="text-sm font-bold text-muted-foreground truncate">{t('admin.aiTest.provider')}</span>
+            <Badge variant="secondary" className="font-mono text-xs py-1 h-7 px-4 bg-background border-border rounded-xl shadow-sm">
+              {providerInfo.provider}
+            </Badge>
+          </div>
+          <div className="flex items-center justify-between gap-6">
+            <span className="text-sm font-bold text-muted-foreground truncate">{t('admin.aiTest.model')}</span>
+            <span className="text-xs font-mono font-bold text-foreground truncate bg-background/80 px-3 py-1 rounded-lg border border-border/50" title={providerInfo.model}>
+              {providerInfo.model}
+            </span>
+          </div>
         </div>
       </div>
 
-      {/* Test Button */}
+      {/* Run Test Action */}
       <Button
         onClick={runTest}
         disabled={isLoading}
-        className="w-full"
-        variant={result?.success ? 'default' : result?.success === false ? 'destructive' : 'default'}
+        className={`w-full shadow-lg py-7 h-auto rounded-2xl transition-all duration-300 relative overflow-hidden group/btn ${
+          isLoading ? 'opacity-90' : 'hover:scale-[1.02] active:scale-[0.98] hover:shadow-xl'
+        } ${
+          result?.success ? 'bg-primary' : result?.success === false ? 'bg-destructive hover:bg-destructive/90' : 'bg-primary hover:bg-primary/90'
+        }`}
       >
+        <div className="absolute inset-0 bg-gradient-to-r from-white/0 via-white/10 to-white/0 -translate-x-full group-hover/btn:animate-[shimmer_2s_infinite] pointer-events-none" />
+        
         {isLoading ? (
-          <>
-            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-            {t('admin.aiTest.testing')}
-          </>
+          <div className="flex flex-col items-center gap-2">
+            <Loader2 className="h-6 w-6 animate-spin" />
+            <span className="text-xs font-bold tracking-widest uppercase">{t('admin.aiTest.testing')}...</span>
+          </div>
         ) : (
-          <>
-            <Zap className="mr-2 h-4 w-4" />
-            {t('admin.aiTest.runTest')}
-          </>
+          <div className="flex items-center justify-center gap-4">
+            <div className={`w-10 h-10 rounded-xl flex items-center justify-center transition-all ${
+              result?.success ? 'bg-white/20' : 'bg-white/20 group-hover/btn:scale-110'
+            }`}>
+              <Zap className="h-5 w-5" />
+            </div>
+            <span className="font-black tracking-tight text-lg py-1">
+              {t('admin.aiTest.runTest')}
+            </span>
+          </div>
         )}
       </Button>
 
-      {/* Results */}
+      {/* Result Display */}
       {result && (
-        <Card className={result.success ? 'border-green-200 dark:border-green-900' : 'border-red-200 dark:border-red-900'}>
-          <CardContent className="pt-6">
-            {/* Status */}
-            <div className="flex items-center gap-2 mb-4">
-              {result.success ? (
-                <>
-                  <CheckCircle2 className="h-5 w-5 text-green-600" />
-                  <span className="font-semibold text-green-600 dark:text-green-400">{t('admin.aiTest.testPassed')}</span>
-                </>
-              ) : (
-                <>
-                  <XCircle className="h-5 w-5 text-red-600" />
-                  <span className="font-semibold text-red-600 dark:text-red-400">{t('admin.aiTest.testFailed')}</span>
-                </>
+        <div className={`rounded-xl border transition-all duration-300 animate-in fade-in slide-in-from-top-2 ${
+          result.success 
+            ? 'bg-green-500/[0.03] border-green-500/20 shadow-green-500/[0.02] shadow-lg' 
+            : 'bg-destructive/[0.03] border-destructive/20 shadow-destructive/[0.02] shadow-lg'
+        }`}>
+          <div className="p-5 space-y-5">
+            {/* Status Header */}
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                {result.success ? (
+                  <div className="w-8 h-8 rounded-full bg-green-500/20 flex items-center justify-center text-green-600">
+                    <CheckCircle2 className="h-5 w-5" />
+                  </div>
+                ) : (
+                  <div className="w-8 h-8 rounded-full bg-destructive/20 flex items-center justify-center text-destructive">
+                    <XCircle className="h-5 w-5" />
+                  </div>
+                )}
+                <span className={`font-bold tracking-tight ${result.success ? 'text-green-700 dark:text-green-400' : 'text-destructive'}`}>
+                  {result.success ? t('admin.aiTest.testPassed') : t('admin.aiTest.testFailed')}
+                </span>
+              </div>
+              {result.responseTime && (
+                <div className="flex items-center gap-1.5 px-2 py-1 bg-background/50 rounded-md border border-border/50 text-[10px] font-bold text-muted-foreground">
+                  <Clock className="h-3 w-3" />
+                  {result.responseTime}ms
+                </div>
               )}
             </div>
 
-            {/* Response Time */}
-            {result.responseTime && (
-              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-4">
-                <Clock className="h-4 w-4" />
-                <span>{t('admin.aiTest.responseTime', { time: result.responseTime })}</span>
-              </div>
-            )}
-
-            {/* Tags Results */}
+            {/* Response Content - Tags */}
             {type === 'tags' && result.success && result.tags && (
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <Info className="h-4 w-4 text-primary" />
-                  <span className="text-sm font-medium">{t('admin.aiTest.generatedTags')}</span>
+              <div className="space-y-3 pt-3 border-t border-border/10">
+                <div className="flex items-center gap-2 text-xs font-semibold text-muted-foreground uppercase tracking-widest">
+                  <Info className="h-3.5 w-3.5" />
+                  {t('admin.aiTest.generatedTags')}
                 </div>
                 <div className="flex flex-wrap gap-2">
                   {result.tags.map((tag, idx) => (
-                    <Badge
+                    <div
                       key={idx}
-                      variant="secondary"
-                      className="text-sm"
+                      className="group relative flex items-center gap-2 px-3 py-1.5 bg-background border border-border rounded-lg text-sm font-medium hover:border-primary/30 hover:bg-primary/[0.02] transition-colors"
                     >
-                      {tag.tag}
-                      <span className="ml-1 text-xs opacity-70">
-                        ({Math.round(tag.confidence * 100)}%)
+                      <span className="text-foreground">{tag.tag}</span>
+                      <span className="text-[10px] text-muted-foreground bg-muted px-1 rounded font-mono">
+                        {Math.round(tag.confidence * 100)}%
                       </span>
-                    </Badge>
+                    </div>
                   ))}
                 </div>
               </div>
             )}
 
-            {/* Chat Response */}
+            {/* Response Content - Chat */}
             {type === 'chat' && result.success && result.chatResponse && (
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <Info className="h-4 w-4 text-violet-600" />
-                  <span className="text-sm font-medium">Réponse du modèle</span>
+              <div className="space-y-3 pt-3 border-t border-border/10">
+                <div className="flex items-center gap-2 text-xs font-semibold text-muted-foreground uppercase tracking-widest">
+                  <MessageSquare className="h-3.5 w-3.5" />
+                  Modèle Réponse
                 </div>
-                <div className="p-3 bg-muted rounded-lg">
-                  <p className="text-sm italic">&quot;{result.chatResponse}&quot;</p>
+                <div className="p-4 bg-background/50 border border-border/50 rounded-xl relative">
+                  <div className="absolute -left-1.5 top-4 w-3 h-3 bg-background border-l border-t border-border/50 rotate-[-45deg] rounded-sm" />
+                  <p className="text-sm leading-relaxed text-foreground italic">
+                    &quot;{result.chatResponse}&quot;
+                  </p>
                 </div>
               </div>
             )}
 
-            {/* Embeddings Results */}
+            {/* Response Content - Embeddings */}
             {type === 'embeddings' && result.success && result.embeddingLength && (
-              <div className="space-y-3">
-                <div className="flex items-center gap-2">
-                  <Info className="h-4 w-4 text-green-600" />
-                  <span className="text-sm font-medium">{t('admin.aiTest.embeddingDimensions')}</span>
-                </div>
-                <div className="p-3 bg-muted rounded-lg">
-                  <div className="text-2xl font-bold text-center">
-                    {result.embeddingLength}
+              <div className="space-y-4 pt-3 border-t border-border/10">
+                <div className="grid grid-cols-2 gap-4">
+                  <div className="bg-background/50 border border-border/50 rounded-xl p-4 text-center">
+                    <div className="text-2xl font-black tracking-tighter text-foreground">
+                      {result.embeddingLength}
+                    </div>
+                    <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground mt-1">
+                      {t('admin.aiTest.vectorDimensions')}
+                    </div>
                   </div>
-                  <div className="text-xs text-center text-muted-foreground mt-1">
-                    {t('admin.aiTest.vectorDimensions')}
+                  <div className="bg-background/50 border border-border/50 rounded-xl p-4 text-center flex flex-col justify-center">
+                    <div className="flex items-center justify-center gap-1">
+                      <div className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+                      <span className="text-xs font-bold text-foreground">Active Vector</span>
+                    </div>
                   </div>
                 </div>
+                
                 {result.firstValues && result.firstValues.length > 0 && (
-                  <div className="space-y-1">
-                    <span className="text-xs font-medium">{t('admin.aiTest.first5Values')}</span>
-                    <div className="p-2 bg-muted rounded font-mono text-xs">
-                      [{result.firstValues.slice(0, 5).map((v, i) => v.toFixed(4)).join(', ')}]
+                  <div className="space-y-2">
+                    <div className="text-[10px] font-bold uppercase tracking-widest text-muted-foreground">
+                      {t('admin.aiTest.first5Values')}
+                    </div>
+                    <div className="p-3 bg-muted/50 rounded-lg font-mono text-[11px] leading-none flex justify-between overflow-x-auto whitespace-nowrap gap-2 scrollbar-hide border border-border/50">
+                      {result.firstValues.slice(0, 5).map((v, i) => (
+                        <span key={i} className="text-foreground tabular-nums">
+                          {v.toFixed(4)}
+                        </span>
+                      ))}
                     </div>
                   </div>
                 )}
@@ -245,32 +281,30 @@ export function AI_TESTER({ type }: { type: 'tags' | 'embeddings' | 'chat' }) {
 
             {/* Error Details */}
             {!result.success && result.error && (
-              <div className="mt-4 p-3 bg-red-50 dark:bg-red-950/20 rounded-lg border border-red-200 dark:border-red-900">
-                <p className="text-sm font-medium text-red-900 dark:text-red-100">{t('admin.aiTest.error')}</p>
-                <p className="text-sm text-red-700 dark:text-red-300 mt-1">{result.error}</p>
-                {result.details && (
-                  <details className="mt-2">
-                    <summary className="text-xs cursor-pointer text-red-600 dark:text-red-400">
-                      {t('admin.aiTest.technicalDetails')}
-                    </summary>
-                    <pre className="mt-2 text-xs overflow-auto p-2 bg-red-100 dark:bg-red-900/30 rounded">
-                      {JSON.stringify(result.details, null, 2)}
-                    </pre>
-                  </details>
-                )}
+              <div className="space-y-3 pt-3 border-t border-border/10">
+                <div className="p-4 bg-destructive/[0.05] border border-destructive/20 rounded-xl">
+                  <div className="flex items-center gap-2 mb-2">
+                    <Info className="h-4 w-4 text-destructive" />
+                    <span className="text-xs font-bold text-destructive uppercase tracking-widest">Détails de l&apos;erreur</span>
+                  </div>
+                  <p className="text-sm text-destructive font-medium leading-relaxed">{result.error}</p>
+                  
+                  {result.details && (
+                    <details className="mt-4 group">
+                      <summary className="text-[10px] font-bold uppercase tracking-widest cursor-pointer text-muted-foreground hover:text-destructive transition-colors">
+                        {t('admin.aiTest.technicalDetails')}
+                      </summary>
+                      <div className="mt-2 p-3 bg-black/5 dark:bg-black/20 rounded-lg overflow-x-auto border border-border/50">
+                        <pre className="text-[10px] font-mono text-muted-foreground leading-tight">
+                          {JSON.stringify(result.details, null, 2)}
+                        </pre>
+                      </div>
+                    </details>
+                  )}
+                </div>
               </div>
             )}
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Loading State */}
-      {isLoading && (
-        <div className="text-center py-4">
-          <Loader2 className="h-8 w-8 animate-spin mx-auto text-primary" />
-          <p className="text-sm text-muted-foreground mt-2">
-            {t('admin.aiTest.testingType', { type: type === 'tags' ? 'tags generation' : 'embeddings' })}
-          </p>
+          </div>
         </div>
       )}
     </div>