update

ts_web/elements/sio-conversation-selector.ts

@@ -64,11 +64,18 @@ export class SioConversationSelector extends DeesElement {
         background: ${bdTheme('background')};
       }
 
+      .header-top {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: ${unsafeCSS(spacing["4"])};
+      }
+
       .title {
         font-size: 1.25rem;
         line-height: 1.2;
         font-weight: 600;
-        margin: 0 0 ${unsafeCSS(spacing["4"])} 0;
+        margin: 0;
         color: ${bdTheme('foreground')};
         letter-spacing: -0.025em;
       }
@@ -270,7 +277,17 @@ export class SioConversationSelector extends DeesElement {
 
     return html`
       <div class="header">
-        <h2 class="title">Messages</h2>
+        <div class="header-top">
+          <h2 class="title">Messages</h2>
+          <sio-button 
+            type="primary" 
+            size="sm"
+            @click=${() => this.startNewConversation()}
+          >
+            <sio-icon icon="plus" size="16"></sio-icon>
+            New
+          </sio-button>
+        </div>
         <div class="search-box">
           <input
             type="text"
@@ -321,4 +338,12 @@ export class SioConversationSelector extends DeesElement {
       composed: true
     }));
   }
+
+  private startNewConversation() {
+    // Dispatch event for parent components to handle new conversation creation
+    this.dispatchEvent(new CustomEvent('new-conversation', {
+      bubbles: true,
+      composed: true
+    }));
+  }
 }

ts_web/elements/sio-pdf-viewer.ts

@@ -8,7 +8,7 @@ import {
   css,
   unsafeCSS,
   state,
-  PropertyValues,
+  type PropertyValues,
 } from '@design.estate/dees-element';
 
 // Import design tokens