fix: display chat at top layer

packages/kite-chat-component/package.json

@@ -70,6 +70,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@oddbird/popover-polyfill": "^0.3.1",
     "lit": "^2.8.0",
     "nanoid": "^4.0.2",
     "pretty-bytes": "^6.1.1"

packages/kite-chat-component/src/anchor-controller.ts

@@ -0,0 +1,74 @@
+import { ReactiveControllerHost } from 'lit';
+
+type Anchor = {
+    x: number; 
+    y: number;
+}
+
+type Size = {
+    width: string; 
+    height: string;
+}
+
+export class AnchorController {
+    private targetSelector = "[popovertarget]";
+    private popoverSelector = "[popover]";
+
+    constructor(
+        private host: ReactiveControllerHost & HTMLElement, 
+        private popoverSize: Size | null = null,
+    ) {
+        this.host.addController(this);
+    }
+
+    get popoverElement(): HTMLElement {
+        return this.host.shadowRoot?.querySelector(this.popoverSelector) as HTMLElement;
+    }
+
+    get targetElement(): HTMLElement {
+        return this.host.shadowRoot?.querySelector(this.targetSelector) as HTMLElement;
+    }
+
+    hostConnected() {
+        window.addEventListener('resize', this.positionPopover.bind(this));
+    }
+
+    hostUpdated() {
+        this.popoverElement.addEventListener('toggle', this.positionPopover.bind(this)); 
+    }
+
+    hostDisconnected() {
+        window.removeEventListener('resize', this.positionPopover.bind(this));
+    }
+
+    computePosition(targetElement: HTMLElement): Promise<Anchor> {
+        return new Promise((resolve) => {
+            const targetRect = targetElement.getBoundingClientRect();
+
+            const x = targetRect.right;
+            const y = targetRect.top;
+
+            resolve({ x, y });
+        });
+    }
+
+    positionPopover() {
+        if (this.popoverElement && this.targetElement) {
+            const popoverRect = this.popoverElement.getBoundingClientRect();
+            const width = this.popoverSize?.width || `${popoverRect.width}px`;
+            const height = this.popoverSize?.height || `${popoverRect.height}px`;
+            const calculatePosition = () => {
+                this.computePosition(this.targetElement).then(({ x, y }: Anchor) => {
+                    Object.assign(this.popoverElement.style, {
+                        margin: '0',
+                        left: `calc(${x}px - ${width})`,
+                        top: `calc(${y}px - ${height} - 1rem)`,
+                    });
+                });
+            };
+
+            // Use requestAnimationFrame to ensure synchronized calculation
+            requestAnimationFrame(calculatePosition);
+        }
+    }
+}

packages/kite-chat-component/src/index.ts

@@ -2,6 +2,7 @@ import type {KiteChatElement} from './kite-chat';
 import {KiteFileElement} from './kite-file';
 import type {KiteMsgElement} from './kite-msg';
 import type {KiteMsg} from './kite-payload';
+import "@oddbird/popover-polyfill";
 
 declare global {
   interface HTMLElementTagNameMap {

packages/kite-chat-component/src/kite-chat.css

@@ -75,4 +75,19 @@ main::-webkit-scrollbar-thumb {
   :host(:not([theme="light"])) .kite-dialog {
     @apply border-neutral-600 bg-neutral-800 text-white/95;
   }
+}
+
+@supports(anchor-name: --combobox) {
+  [popovertarget] {
+      anchor-name: --combobox;
+  }
+
+  [popover] {
+      position: fixed;
+      anchor-default: --combobox;
+      left: auto;
+      right: anchor(right);
+      bottom: calc(anchor(top) + 1rem);
+      top: auto;
+  }
 }

packages/kite-chat-component/src/kite-chat.ts

@@ -4,7 +4,7 @@
  * LGPLv3
  */
 
-import {LitElement, html, css, unsafeCSS} from 'lit';
+import {LitElement, html, css, unsafeCSS, PropertyValues} from 'lit';
 import {customElement, property, query, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {sharedStyles} from './shared-styles';
@@ -18,6 +18,7 @@ import {
   MsgStatus,
   PlaintextMsg,
 } from './kite-payload';
+import {AnchorController} from './anchor-controller';
 
 console.debug('kite-chat loaded');
 
@@ -59,16 +60,41 @@ export class KiteChatElement extends LitElement {
   @query('textarea')
   private textarea!: HTMLTextAreaElement;
 
+  @query('#kite-dialog')
+  private dialog!: HTMLElement;
+
   @state()
   private sendEnabled = false;
 
+  protected anchorController!: AnchorController;
+
+  constructor() {
+    super();
+
+    if (!CSS.supports('anchor-name', '--combobox')) {
+        // The anchor-name property is not supported
+        this.anchorController = new AnchorController(this, {width: '20rem', height: '30rem'})
+    }
+  }
+
+  override updated(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('open')) {
+      if (this.open) {
+        this.dialog.showPopover();
+      } else {
+        this.dialog.hidePopover();
+      }
+    }
+  }
+
   override render() {
     return html`
       <div class="kite">
         <div
           title="Show live chat dialog"
           class="kite-toggle bg-primary-color fixed right-4 bottom-4 z-30 h-12 w-12 cursor-pointer rounded-full p-2 text-secondary-color shadow hover:text-opacity-80"
           @click="${this._toggleOpen}"
+          popovertarget="kite-dialog"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -85,10 +111,12 @@ export class KiteChatElement extends LitElement {
           </svg>
         </div>
         <div
+          popover="manual"
+          id="kite-dialog"
           class="kite-dialog ${classMap({
             'scale-y-100': this.open,
             'scale-y-0': !this.open,
-          })} selection:bg-primary-color fixed right-4 bottom-20 z-40 flex h-[30rem] w-[20rem] origin-bottom flex-col rounded border shadow-lg transition-transform selection:text-white"
+          })} selection:bg-primary-color fixed p-0 z-40 flex h-[30rem] w-[20rem] origin-bottom flex-col rounded border shadow-lg transition-transform selection:text-white"
         >
           <header
             class="bg-primary-color flex h-12 select-none flex-row items-center justify-between rounded-t p-2 text-secondary-color"