Simplify rename assistant UI - replace inline editing with clean dialog

frontend/src/pages/Playground.tsx

@@ -98,12 +98,14 @@ export function Playground() {
   // Saved assistants state
   const [savedAssistants, setSavedAssistants] = useState<any[]>([])
   const [selectedAssistant, setSelectedAssistant] = useState<{id: string, name: string, type: 'user'|'template'|'new', originalTemplate?: string} | null>(null)
-  const [isRenaming, setIsRenaming] = useState(false)
-  const [tempAssistantName, setTempAssistantName] = useState('')
   
   // Save assistant dialog state
   const [showSaveDialog, setShowSaveDialog] = useState(false)
   const [saveAssistantName, setSaveAssistantName] = useState('')
+  
+  // Rename assistant dialog state
+  const [showRenameDialog, setShowRenameDialog] = useState(false)
+  const [renameAssistantName, setRenameAssistantName] = useState('')
 
   // Load saved assistants
   const loadSavedAssistants = () => {
@@ -228,7 +230,6 @@ export function Playground() {
       name: 'New Assistant',
       type: 'new'
     })
-    setTempAssistantName('New Assistant')
   }
 
   // Clear current assistant
@@ -236,27 +237,45 @@ export function Playground() {
     setSelectedAssistant(null)
   }
 
-  // Rename assistant
-  const startRenaming = () => {
+  // Open rename assistant dialog
+  const openRenameDialog = () => {
     if (selectedAssistant) {
-      setTempAssistantName(selectedAssistant.name)
-      setIsRenaming(true)
+      setRenameAssistantName(selectedAssistant.name)
+      setShowRenameDialog(true)
     }
   }
 
-  const confirmRename = () => {
-    if (selectedAssistant && tempAssistantName.trim()) {
-      setSelectedAssistant({
-        ...selectedAssistant,
-        name: tempAssistantName.trim()
-      })
-      setIsRenaming(false)
+  // Confirm rename assistant
+  const confirmRenameAssistant = () => {
+    if (!selectedAssistant || !renameAssistantName.trim()) return
+    
+    // Update selectedAssistant state
+    const updatedAssistant = {
+      ...selectedAssistant,
+      name: renameAssistantName.trim()
     }
+    setSelectedAssistant(updatedAssistant)
+    
+    // If it's a saved user assistant, update localStorage
+    if (selectedAssistant.type === 'user') {
+      const updatedAssistants = savedAssistants.map(assistant => 
+        assistant.id === selectedAssistant.id 
+          ? { ...assistant, name: renameAssistantName.trim() }
+          : assistant
+      )
+      setSavedAssistants(updatedAssistants)
+      localStorage.setItem('savedAssistants', JSON.stringify(updatedAssistants))
+    }
+    
+    // Close dialog
+    setShowRenameDialog(false)
+    setRenameAssistantName('')
   }
 
-  const cancelRename = () => {
-    setIsRenaming(false)
-    setTempAssistantName('')
+  // Cancel rename dialog
+  const cancelRenameDialog = () => {
+    setShowRenameDialog(false)
+    setRenameAssistantName('')
   }
 
   // Convert template to new assistant when settings change
@@ -625,12 +644,7 @@ export function Playground() {
                         selectedAssistant={selectedAssistant}
                         createNewAssistant={createNewAssistant}
                         clearCurrentAssistant={clearCurrentAssistant}
-                        isRenaming={isRenaming}
-                        tempAssistantName={tempAssistantName}
-                        setTempAssistantName={setTempAssistantName}
-                        startRenaming={startRenaming}
-                        confirmRename={confirmRename}
-                        cancelRename={cancelRename}
+                        openRenameDialog={openRenameDialog}
                         systemPrompt={systemPrompt}
                       />
                     </div>
@@ -748,6 +762,56 @@ export function Playground() {
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
+
+      {/* Rename Assistant Dialog */}
+      <AlertDialog open={showRenameDialog} onOpenChange={setShowRenameDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Rename Assistant</AlertDialogTitle>
+            <AlertDialogDescription>
+              Enter a new name for "{selectedAssistant?.name}".
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <div className="py-4">
+            <Label htmlFor="rename-assistant-name" className="text-sm font-medium">
+              Assistant Name
+            </Label>
+            <input
+              id="rename-assistant-name"
+              type="text"
+              value={renameAssistantName}
+              onChange={(e) => setRenameAssistantName(e.target.value)}
+              className="mt-2 w-full px-3 py-2 text-sm border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+              placeholder="Enter new assistant name..."
+              maxLength={100}
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' && renameAssistantName.trim()) {
+                  confirmRenameAssistant()
+                }
+                if (e.key === 'Escape') {
+                  cancelRenameDialog()
+                }
+              }}
+            />
+            <div className="mt-1 text-xs text-muted-foreground">
+              {renameAssistantName.length}/100 characters
+            </div>
+          </div>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={cancelRenameDialog}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction 
+              onClick={confirmRenameAssistant}
+              disabled={!renameAssistantName.trim()}
+            >
+              <Settings className="h-4 w-4 mr-2" />
+              Rename
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   )
 }
@@ -913,12 +977,7 @@ function AssistantSelector({
   selectedAssistant,
   createNewAssistant,
   clearCurrentAssistant,
-  isRenaming,
-  tempAssistantName,
-  setTempAssistantName,
-  startRenaming,
-  confirmRename,
-  cancelRename,
+  openRenameDialog,
   systemPrompt
 }: {
   savedAssistants: any[]
@@ -930,12 +989,7 @@ function AssistantSelector({
   selectedAssistant: {id: string, name: string, type: 'user'|'template'|'new', originalTemplate?: string} | null
   createNewAssistant: () => void
   clearCurrentAssistant: () => void
-  isRenaming: boolean
-  tempAssistantName: string
-  setTempAssistantName: (name: string) => void
-  startRenaming: () => void
-  confirmRename: () => void
-  cancelRename: () => void
+  openRenameDialog: () => void
   systemPrompt: string
 }) {
   const handleAssistantSelect = (value: string) => {
@@ -1087,46 +1141,18 @@ function AssistantSelector({
         </Select>
       </div>
 
-      {/* Rename Assistant Section */}
+      {/* Rename Assistant */}
       {selectedAssistant && selectedAssistant.type !== 'template' && (
-        <>
-          {isRenaming ? (
-            <div className="space-y-2">
-              <Label className="text-sm font-medium">Rename Assistant</Label>
-              <div className="flex gap-2">
-                <input
-                  type="text"
-                  value={tempAssistantName}
-                  onChange={(e) => setTempAssistantName(e.target.value)}
-                  className="flex-1 px-3 py-1.5 text-sm border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
-                  placeholder="Enter assistant name..."
-                  autoFocus
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter') confirmRename()
-                    if (e.key === 'Escape') cancelRename()
-                  }}
-                />
-                <Button size="sm" onClick={confirmRename} disabled={!tempAssistantName.trim()}>
-                  ✓
-                </Button>
-                <Button size="sm" variant="ghost" onClick={cancelRename}>
-                  ✗
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <Button 
-              onClick={startRenaming} 
-              size="sm" 
-              variant="ghost" 
-              className="w-full justify-start"
-              disabled={isLoading}
-            >
-              <Settings className="h-4 w-4 mr-2" />
-              Rename "{selectedAssistant.name}"
-            </Button>
-          )}
-        </>
+        <Button 
+          onClick={openRenameDialog} 
+          size="sm" 
+          variant="ghost" 
+          className="w-full justify-start"
+          disabled={isLoading}
+        >
+          <Settings className="h-4 w-4 mr-2" />
+          Rename
+        </Button>
       )}
 
       {/* Save Current Configuration */}

static/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Edge LLM</title>
-    <script type="module" crossorigin src="/assets/index-5287eec6.js"></script>
+    <script type="module" crossorigin src="/assets/index-cfecd2e3.js"></script>
     <link rel="stylesheet" href="/assets/index-b386becc.css">
   </head>
   <body>