update ui changes

frontend/src/app/page.tsx

@@ -501,13 +501,12 @@ export default function Home() {
           <div className="flex items-center px-5 h-11 bg-[#28282a] border-b border-[#48484a]">
             <div className="flex items-center space-x-2">
               <div className="px-4 py-1.5 bg-[#1d1d1f] border-t-2 border-[#007aff] text-sm text-[#e5e5e7] rounded-t-lg shadow-sm font-medium">
-                {selectedLanguage}.{
-                  selectedLanguage === 'html' ? 'html' : 
-                  selectedLanguage === 'gradio' || selectedLanguage === 'streamlit' ? 'py' : 
-                  selectedLanguage === 'transformers.js' ? 'js' :
-                  selectedLanguage === 'comfyui' ? 'json' :
-                  'jsx'
-                }
+                {selectedLanguage === 'html' ? 'app.html' :
+                 selectedLanguage === 'gradio' || selectedLanguage === 'streamlit' ? 'app.py' : 
+                 selectedLanguage === 'transformers.js' ? 'app.js' :
+                 selectedLanguage === 'comfyui' ? 'app.json' :
+                 selectedLanguage === 'react' ? 'app.jsx' :
+                 `${selectedLanguage}.txt`}
               </div>
             </div>
             <div className="ml-auto flex items-center space-x-3 text-xs text-[#a1a1a6]">

frontend/src/components/ChatInterface.tsx

@@ -68,7 +68,7 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
                   <div className="text-base flex-shrink-0">
                     {message.role === 'user' ? '👤' : '🤖'}
                   </div>
-                  <div className="flex-1 text-sm leading-relaxed">
+                  <div className="flex-1 text-sm leading-relaxed min-w-0">
                     {message.role === 'assistant' ? (
                       <ReactMarkdown 
                         remarkPlugins={[remarkGfm]}
@@ -77,7 +77,7 @@ export default function ChatInterface({ messages, onSendMessage, isGenerating, i
                         {message.content}
                       </ReactMarkdown>
                     ) : (
-                      <p className="whitespace-pre-wrap font-medium">{message.content}</p>
+                      <p className="whitespace-pre-wrap font-medium break-words">{message.content}</p>
                     )}
                   </div>
                 </div>

frontend/src/components/CodeEditor.tsx

@@ -19,8 +19,8 @@ export default function CodeEditor({ code, language, onChange, readOnly = false
       'html': 'html',
       'gradio': 'python',
       'streamlit': 'python',
-      'transformers.js': 'javascript',
-      'react': 'typescript',
+      'transformers.js': 'html', // Contains HTML, CSS, and JavaScript - HTML is primary
+      'react': 'javascriptreact', // JSX syntax highlighting
       'comfyui': 'json',
     };
     return languageMap[lang] || 'plaintext';