Add assistant rename and template auto-conversion features

frontend/src/pages/Playground.tsx

@@ -97,7 +97,9 @@ export function Playground() {
 
   // Saved assistants state
   const [savedAssistants, setSavedAssistants] = useState<any[]>([])
-  const [selectedAssistant, setSelectedAssistant] = useState<{id: string, name: string, type: 'user'|'template'} | null>(null)
+  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('')
 
   // Load saved assistants
   const loadSavedAssistants = () => {
@@ -180,7 +182,12 @@ export function Playground() {
     setSystemPrompt('')
     setTemperature(0.7)
     setMaxTokens(1024)
-    setSelectedAssistant(null)
+    setSelectedAssistant({
+      id: 'new_assistant',
+      name: 'New Assistant',
+      type: 'new'
+    })
+    setTempAssistantName('New Assistant')
   }
 
   // Clear current assistant
@@ -188,6 +195,57 @@ export function Playground() {
     setSelectedAssistant(null)
   }
 
+  // Rename assistant
+  const startRenaming = () => {
+    if (selectedAssistant) {
+      setTempAssistantName(selectedAssistant.name)
+      setIsRenaming(true)
+    }
+  }
+
+  const confirmRename = () => {
+    if (selectedAssistant && tempAssistantName.trim()) {
+      setSelectedAssistant({
+        ...selectedAssistant,
+        name: tempAssistantName.trim()
+      })
+      setIsRenaming(false)
+    }
+  }
+
+  const cancelRename = () => {
+    setIsRenaming(false)
+    setTempAssistantName('')
+  }
+
+  // Convert template to new assistant when settings change
+  const convertTemplateToNew = () => {
+    if (selectedAssistant && selectedAssistant.type === 'template') {
+      setSelectedAssistant({
+        id: 'new_assistant',
+        name: `Custom ${selectedAssistant.name}`,
+        type: 'new',
+        originalTemplate: selectedAssistant.name
+      })
+    }
+  }
+
+  // Wrapped setters that trigger template conversion
+  const handleSystemPromptChange = (prompt: string) => {
+    setSystemPrompt(prompt)
+    convertTemplateToNew()
+  }
+
+  const handleTemperatureChange = (temp: number) => {
+    setTemperature(temp)
+    convertTemplateToNew()
+  }
+
+  const handleMaxTokensChange = (tokens: number) => {
+    setMaxTokens(tokens)
+    convertTemplateToNew()
+  }
+
   // Load available models and saved assistants on startup
   useEffect(() => {
     fetchModels()
@@ -526,6 +584,12 @@ export function Playground() {
                         selectedAssistant={selectedAssistant}
                         createNewAssistant={createNewAssistant}
                         clearCurrentAssistant={clearCurrentAssistant}
+                        isRenaming={isRenaming}
+                        tempAssistantName={tempAssistantName}
+                        setTempAssistantName={setTempAssistantName}
+                        startRenaming={startRenaming}
+                        confirmRename={confirmRename}
+                        cancelRename={cancelRename}
                       />
                     </div>
 
@@ -549,16 +613,16 @@ export function Playground() {
                     setSelectedModel={setSelectedModel}
                     autoLoadingModel={autoLoadingModel}
                     temperature={temperature}
-                    setTemperature={setTemperature}
+                    setTemperature={handleTemperatureChange}
                     maxTokens={maxTokens}
-                    setMaxTokens={setMaxTokens}
+                    setMaxTokens={handleMaxTokensChange}
                   />
                 </TabsContent>
 
                 <TabsContent value="instructions" className="p-6 space-y-6 m-0">
                   <SystemInstructionsTab 
                     systemPrompt={systemPrompt}
-                    setSystemPrompt={setSystemPrompt}
+                    setSystemPrompt={handleSystemPromptChange}
                     isLoading={isLoading}
                   />
                 </TabsContent>
@@ -756,7 +820,13 @@ function AssistantSelector({
   isLoading,
   selectedAssistant,
   createNewAssistant,
-  clearCurrentAssistant
+  clearCurrentAssistant,
+  isRenaming,
+  tempAssistantName,
+  setTempAssistantName,
+  startRenaming,
+  confirmRename,
+  cancelRename
 }: {
   savedAssistants: any[]
   loadSavedAssistant: (id: string) => void
@@ -764,9 +834,15 @@ function AssistantSelector({
   presets: Array<{name: string; prompt: string}>
   onPresetSelect: (presetName: string) => void
   isLoading: boolean
-  selectedAssistant: {id: string, name: string, type: 'user'|'template'} | null
+  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
 }) {
   const handleAssistantSelect = (value: string) => {
     if (value === 'create_new') {
@@ -789,11 +865,25 @@ function AssistantSelector({
     
     if (selectedAssistant.type === 'user') {
       return `user_${selectedAssistant.id}`
+    } else if (selectedAssistant.type === 'new') {
+      return 'new_assistant'
     } else {
       return selectedAssistant.id
     }
   }
 
+  // Get badge for assistant type
+  const getAssistantBadge = (type: 'user'|'template'|'new') => {
+    switch (type) {
+      case 'user':
+        return { variant: 'secondary' as const, text: 'Mine' }
+      case 'template':
+        return { variant: 'outline' as const, text: 'Template' }
+      case 'new':
+        return { variant: 'default' as const, text: 'New', className: 'bg-green-100 text-green-700' }
+    }
+  }
+
   const totalAssistants = savedAssistants.length + presets.length
 
   return (
@@ -807,8 +897,16 @@ function AssistantSelector({
                 <div className="flex items-center gap-2">
                   <Bot className="h-4 w-4" />
                   <span>{selectedAssistant.name}</span>
-                  <Badge variant={selectedAssistant.type === 'user' ? 'secondary' : 'outline'} className="text-xs ml-auto">
-                    {selectedAssistant.type === 'user' ? 'Mine' : 'Template'}
+                  {selectedAssistant.originalTemplate && (
+                    <span className="text-xs text-muted-foreground">
+                      (from {selectedAssistant.originalTemplate})
+                    </span>
+                  )}
+                  <Badge 
+                    variant={getAssistantBadge(selectedAssistant.type).variant} 
+                    className={`text-xs ml-auto ${getAssistantBadge(selectedAssistant.type).className || ''}`}
+                  >
+                    {getAssistantBadge(selectedAssistant.type).text}
                   </Badge>
                 </div>
               ) : (
@@ -895,6 +993,48 @@ function AssistantSelector({
         </Select>
       </div>
 
+      {/* Rename Assistant Section */}
+      {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>
+          )}
+        </>
+      )}
+
       {/* Save Current Configuration */}
       <Button 
         onClick={saveAssistant} 

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-92339890.js"></script>
+    <script type="module" crossorigin src="/assets/index-39cedd31.js"></script>
     <link rel="stylesheet" href="/assets/index-b386becc.css">
   </head>
   <body>