AI assistant

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -16,6 +16,7 @@
   export let collapsed = null;
 
   export let storageName = null;
+  export let onClose = null;
 
   let size = 0;
 
@@ -70,7 +71,8 @@
   <WidgetTitle
     clickable={collapsible}
     on:click={collapsible ? () => (visible = !visible) : null}
-    data-testid={$$props['data-testid']}>{title}</WidgetTitle
+    data-testid={$$props['data-testid']}
+    {onClose}>{title}</WidgetTitle
   >
 
   {#if visible}

packages/web/src/widgets/WidgetTitle.svelte

@@ -1,18 +1,35 @@
 <script lang="ts">
+  import FontIcon from '../icons/FontIcon.svelte';
+
   export let clickable = false;
+  export let onClose = null;
 </script>
 
-<div on:click class:clickable {...$$restProps}>
+<div on:click class:clickable {...$$restProps} class="wrapper">
   <slot />
+  {#if onClose}
+    <div class="close" on:click={onClose}>
+      <FontIcon icon="icon close" />
+    </div>
+  {/if}
 </div>
 
 <style>
-  div {
+  .wrapper {
     padding: 5px;
     font-weight: bold;
     text-transform: uppercase;
     background-color: var(--theme-bg-1);
     border: 2px solid var(--theme-border);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .close {
+    cursor: pointer;
+  }
+  .close:hover {
+    color: var(--theme-font-hover);
   }
   div.clickable:hover {
     background-color: var(--theme-bg-2);