chore: frontend components refactoring

packages/chat-component/index.html

@@ -43,6 +43,6 @@ <h1>Welcome to this Azure OpenAI JavaScript Chat Sample</h1>
         }
       }
     </style>
-    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/index.ts"></script>
   </body>
 </html>

packages/chat-component/package.json

@@ -22,6 +22,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@types/dom-speech-recognition": "^0.0.4",
     "dompurify": "^3.0.6",
     "lit": "^2.8.0",
     "marked": "^9.1.5"

packages/chat-component/src/components/chat-action-button.ts

@@ -0,0 +1,46 @@
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { styles } from '../styles/chat-action-button.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+
+export interface ChatActionButton {
+  label: string;
+  svgIcon: string;
+  isDisabled: boolean;
+  id: string;
+}
+
+@customElement('chat-action-button')
+export class ChatActionButtonComponent extends LitElement {
+  static override styles = [styles];
+
+  @property({ type: String })
+  label = '';
+
+  @property({ type: String })
+  svgIcon = '';
+
+  @property({ type: Boolean })
+  isDisabled = false;
+
+  @property({ type: String })
+  actionId = '';
+
+  @property({ type: String })
+  tooltip: string | undefined = undefined;
+
+  override render() {
+    return html`
+      <button
+        title="${this.label}"
+        class="button chat__header--button"
+        data-testid="${this.actionId}"
+        ?disabled="${this.isDisabled}"
+      >
+        <span class="chat__header--span">${this.tooltip ?? this.label}</span>
+        ${unsafeSVG(this.svgIcon)}
+      </button>
+    `;
+  }
+}