stylling

src/app.css

@@ -1,5 +1,5 @@
 :root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
@@ -33,6 +33,7 @@ body {
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 .card {
@@ -77,3 +78,222 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+/* Moved from src/routes/+page.svelte */
+body {
+  background: radial-gradient(1200px 600px at 10% 10%, #eef2ff 0%, transparent 60%),
+              radial-gradient(1200px 600px at 90% 20%, #fce7f3 0%, transparent 60%),
+              radial-gradient(1200px 600px at 50% 100%, #dcfce7 0%, transparent 60%);
+}
+
+.page-header {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px 24px 0 24px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 28px;
+  letter-spacing: -0.02em;
+  color: #0f172a;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.subtitle {
+  margin: 6px 0 0 0;
+  color: #475569;
+  font-size: 14px;
+}
+
+.container {
+  display: flex;
+  height: calc(100vh - 80px);
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  gap: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+.dataframe-section {
+  width: 75%;
+  padding: 16px;
+  overflow: hidden;
+  padding-bottom: 100px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.6);
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(2, 6, 23, 0.06);
+}
+
+.credits {
+  text-align: center;
+  margin-top: 20px;
+  padding: 10px;
+  color: #666;
+  font-size: 12px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  border-top: 1px solid #e0e0e0;
+  background-color: #f8f9fa;
+  border-radius: 0 0 8px 8px;
+}
+
+.chatbot-section {
+  width: 25%;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 16px;
+  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(2, 6, 23, 0.06);
+}
+
+h2 {
+  margin: 0 0 20px 0;
+  color: #333;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  margin-bottom: 20px;
+  padding: 8px;
+}
+
+.message {
+  margin-bottom: 12px;
+}
+
+.message.user {
+  text-align: right;
+}
+
+.message.bot {
+  text-align: left;
+}
+
+.message-content {
+  display: inline-block;
+  padding: 10px 14px;
+  border-radius: 14px;
+  max-width: 85%;
+  word-wrap: break-word;
+  font-size: 14px;
+  line-height: 1.4;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  border: 1px solid rgba(2, 6, 23, 0.06);
+}
+
+.message.user .message-content {
+  background: linear-gradient(135deg, #2563eb, #0ea5e9);
+  color: white;
+  font-weight: 500;
+  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
+}
+
+.message.bot .message-content {
+  background: rgba(248, 250, 252, 0.9);
+  color: #0f172a;
+  font-weight: 400;
+}
+
+.chat-input {
+  display: flex;
+  gap: 10px;
+}
+
+.chat-input input {
+  flex: 1;
+  padding: 12px 14px;
+  border: 1px solid rgba(2, 6, 23, 0.12);
+  border-radius: 12px;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  transition: border-color 0.2s ease;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.chat-input input:focus {
+  outline: none;
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
+}
+
+.send-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: linear-gradient(135deg, #2563eb, #0ea5e9);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  transition: transform 0.08s ease, box-shadow 0.2s ease;
+  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
+}
+
+.send-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.35);
+}
+
+.send-button:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  filter: grayscale(30%);
+}
+
+.chat-input-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, 0.8);
+  border-top: 1px solid #e1e5e9;
+  padding: 20px;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.chat-input {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  gap: 10px;
+}
+
+.spinner {
+  width: 16px;
+  height: 16px;
+  border-radius: 9999px;
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  border-top-color: white;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@media (max-width: 1024px) {
+  .container {
+    flex-direction: column;
+    height: auto;
+    padding-bottom: 120px;
+  }
+  .dataframe-section, .chatbot-section {
+    width: 100%;
+  }
+}

src/routes/+page.svelte

@@ -151,11 +151,16 @@ Keep your responses concise and helpful. Answer questions about the data above.`
   }
 </script>
 
+
+<header class="page-header">
+  <h1>Data Chat</h1>
+  <p>Ask questions about your employee table in real time</p>
+</header>
+
 <div class="container">
   <div class="dataframe-section">
     <Dataframe
       bind:value
-      {datatype}
       show_search="none"
       show_row_numbers={false}
       show_copy_button={false}
@@ -187,154 +192,19 @@ Keep your responses concise and helpful. Answer questions about the data above.`
       bind:value={newMessage}
       placeholder="What is Alice's salary?"
       on:keypress={handleKeyPress}
-      autofocus
+      aria-label="Chat input"
+      aria-busy={isGenerating}
+      disabled={!isModelReady || isGenerating}
     />
-    <button on:click={sendMessage}>Send</button>
+    <button class="send-button" on:click={sendMessage} disabled={!isModelReady || isGenerating}>
+      {#if isGenerating}
+        <span class="spinner" aria-hidden="true"></span>
+        <span>Thinking...</span>
+      {:else}
+        <span>Send</span>
+      {/if}
+    </button>
   </div>
 </div>
 
-<style>
-  .container {
-    display: flex;
-    height: 100vh;
-    width: 100vw;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  }
-
-  .dataframe-section {
-    width: 80%;
-    padding: 20px;
-    border-right: 2px solid #e0e0e0;
-    overflow: hidden;
-    padding-bottom: 100px;
-  }
-
-  .credits {
-    text-align: center;
-    margin-top: 20px;
-    padding: 10px;
-    color: #666;
-    font-size: 12px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    border-top: 1px solid #e0e0e0;
-    background-color: #f8f9fa;
-    border-radius: 0 0 8px 8px;
-  }
-
-  .chatbot-section {
-    width: 20%;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    background-color: #f8f9fa;
-  }
-
-  h2 {
-    margin: 0 0 20px 0;
-    color: #333;
-    font-size: 20px;
-    font-weight: 600;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  }
-
-  .chat-messages {
-    flex: 1;
-    overflow-y: auto;
-    margin-bottom: 20px;
-    padding: 15px;
-    background: white;
-    border-radius: 12px;
-    border: 1px solid #e1e5e9;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  }
-
-  .message {
-    margin-bottom: 12px;
-  }
-
-  .message.user {
-    text-align: right;
-  }
-
-  .message.bot {
-    text-align: left;
-  }
-
-  .message-content {
-    display: inline-block;
-    padding: 10px 16px;
-    border-radius: 20px;
-    max-width: 85%;
-    word-wrap: break-word;
-    font-size: 14px;
-    line-height: 1.4;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  }
-
-  .message.user .message-content {
-    background-color: #007acc;
-    color: white;
-    font-weight: 500;
-  }
-
-  .message.bot .message-content {
-    background-color: #f1f3f4;
-    color: #202124;
-    font-weight: 400;
-  }
-
-  .chat-input {
-    display: flex;
-    gap: 10px;
-  }
-
-  .chat-input input {
-    flex: 1;
-    padding: 12px 16px;
-    border: 2px solid #e1e5e9;
-    border-radius: 8px;
-    font-size: 14px;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    transition: border-color 0.2s ease;
-  }
-
-  .chat-input input:focus {
-    outline: none;
-    border-color: #007acc;
-  }
-
-  .chat-input button {
-    padding: 12px 20px;
-    background-color: #007acc;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 14px;
-    font-weight: 500;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-    transition: background-color 0.2s ease;
-  }
-
-  .chat-input button:hover {
-    background-color: #005a9e;
-  }
-
-  .chat-input-container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: white;
-    border-top: 1px solid #e1e5e9;
-    padding: 20px;
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
-  }
-
-  .chat-input {
-    max-width: 1200px;
-    margin: 0 auto;
-    display: flex;
-    gap: 10px;
-  }
-</style>
+<style></style>