commit 007

static/style.css

@@ -15,6 +15,8 @@ body {
   background: white;
   border-radius: 10px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
 }
 
 h2 {
@@ -24,13 +26,16 @@ h2 {
 }
 
 .chat-box {
-  max-height: 400px;
+  flex-grow: 1;
+  max-height: 450px;
   overflow-y: auto;
   padding: 10px;
   border: 1px solid #e5e7eb;
   border-radius: 8px;
   margin-bottom: 16px;
   background: #fafafa;
+  display: flex;
+  flex-direction: column;
 }
 
 .message {
@@ -66,6 +71,8 @@ textarea {
   border-radius: 6px;
   border: 1px solid #d1d5db;
   font-size: 14px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 button {
@@ -77,17 +84,18 @@ button {
   border-radius: 6px;
   cursor: pointer;
   align-self: flex-end;
+  transition: background 0.3s ease;
 }
 
 button:hover {
   background: #4f46e5;
 }
 
+/* Typing indicator */
 .typing-indicator {
   display: flex;
   gap: 6px;
-  margin-left: 10px;
-  margin-bottom: 10px;
+  margin: 5px 0 10px 5px;
 }
 
 .dot {
@@ -111,21 +119,26 @@ button:hover {
   40% { opacity: 1; }
 }
 
+/* Code block styling */
 .code-block {
   position: relative;
   background: #1f2937;
   color: #e5e7eb;
   border-radius: 6px;
   overflow: auto;
-  padding: 12px;
-  margin-top: 6px;
+  margin: 8px 0;
 }
 
 .code-block pre {
   margin: 0;
+  padding: 12px;
+  font-family: 'Courier New', monospace;
+  font-size: 14px;
   overflow-x: auto;
+  line-height: 1.5;
 }
 
+/* Copy button styling */
 .copy-btn {
   position: absolute;
   top: 8px;
@@ -137,8 +150,29 @@ button:hover {
   border-radius: 4px;
   font-size: 12px;
   cursor: pointer;
+  z-index: 10;
 }
 
 .copy-btn:hover {
   background: #4b5563;
 }
+
+/* Responsive tweaks */
+@media (max-width: 768px) {
+  .chat-container {
+    margin: 10px;
+    padding: 16px;
+  }
+
+  .chat-box {
+    max-height: 60vh;
+  }
+
+  textarea {
+    font-size: 13px;
+  }
+
+  button {
+    font-size: 14px;
+  }
+}

templates/index.html

@@ -15,14 +15,16 @@
 
     <div class="chat-box" ref="chatbox">
       <div v-for="(msg, i) in history" :key="i" class="message" :class="msg.role">
-        <div v-if="msg.role === 'assistant' && msg.content.includes('```')" v-html="renderCode(msg.content)"></div>
-        <div v-else>{{ '{{' }} msg.content {{ '}}' }}</div>
+        <template v-if="msg.role === 'assistant' && msg.content.includes('```')">
+          <div v-html="renderCode(msg.content)"></div>
+        </template>
+        <template v-else>
+          <div class="text-content" v-html="formatText(msg.content)"></div>
+        </template>
       </div>
 
       <div v-if="loading" class="typing-indicator">
-        <span class="dot"></span>
-        <span class="dot"></span>
-        <span class="dot"></span>
+        <span class="dot"></span><span class="dot"></span><span class="dot"></span>
       </div>
     </div>
 
@@ -52,15 +54,25 @@
           const match = text.match(/```([^]*)```/);
           if (!match) return text;
           const code = match[1].trim();
-          const escaped = hljs.highlightAuto(code).value;
+          const highlighted = hljs.highlightAuto(code).value;
+
           return `
             <div class="code-block">
-              <pre><code>${escaped}</code></pre>
-              <button class="copy-btn" onclick="copyToClipboard(\`${code.replace(/`/g, '\\`')}\`, this)">Copy</button>
+              <div class="code-toolbar">
+                <button class="copy-btn" onclick="copyToClipboard(\`${code.replace(/`/g, '\\`')}\`, this)">Copy</button>
+              </div>
+              <pre><code class="hljs">${highlighted}</code></pre>
             </div>
           `;
         };
 
+        const formatText = (text) => {
+          return text
+            .replace(/\n/g, "<br>")
+            .replace(/\*\*(.*?)\*\*/g, "<strong>$1</strong>")
+            .replace(/\*(.*?)\*/g, "<em>$1</em>");
+        };
+
         const sendMessage = async () => {
           if (!message.value.trim()) return;
           const userMsg = { role: 'user', content: message.value };
@@ -95,7 +107,7 @@
           loading.value = false;
         };
 
-        return { message, history, sendMessage, renderCode, loading, chatbox };
+        return { message, history, sendMessage, renderCode, formatText, loading, chatbox };
       }
     }).mount('#app');