Self review

Author: AdityaHegde

web-common/src/features/chat/DeveloperChat.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { onDestroy } from "svelte";
   import { featureFlags } from "../feature-flags";
   import SidebarChat from "./layouts/sidebar/SidebarChat.svelte";
   import { chatOpen } from "./layouts/sidebar/sidebar-store";
-
   import { developerChatConfig } from "@rilldata/web-common/features/editor/chat-utils.ts";
   import { ConversationManager } from "@rilldata/web-common/features/chat/core/conversation-manager.ts";
   import { maybeNavigateToGeneratedFile } from "@rilldata/web-common/features/sample-data/generate-sample-data.ts";
@@ -15,6 +15,8 @@
     navigationUnsub?.();
     navigationUnsub = maybeNavigateToGeneratedFile(conversationManager);
   }
+
+  onDestroy(() => navigationUnsub?.());
 </script>
 
 {#if $developerChat && $chatOpen}

web-common/src/features/chat/layouts/sidebar/SidebarChat.svelte

@@ -55,40 +55,38 @@
   });
 </script>
 
-{#if conversationManager}
-  <div
-    class="chat-sidebar"
-    style="--sidebar-width: {$sidebarWidth}px;"
-    on:click|stopPropagation
-    role="presentation"
-  >
-    <Resizer
-      min={SIDEBAR_DEFAULTS.MIN_SIDEBAR_WIDTH}
-      max={SIDEBAR_DEFAULTS.MAX_SIDEBAR_WIDTH}
-      basis={SIDEBAR_DEFAULTS.SIDEBAR_WIDTH}
-      dimension={$sidebarWidth}
-      direction="EW"
-      side="left"
-      onUpdate={sidebarActions.updateSidebarWidth}
-    />
-    <div class="chat-sidebar-content">
-      <div class="chatbot-header-container">
-        <SidebarHeader
-          {conversationManager}
-          {onNewConversation}
-          onClose={sidebarActions.closeChat}
-        />
-      </div>
-      <Messages {conversationManager} layout="sidebar" {config} />
-      <ChatInput
+<div
+  class="chat-sidebar"
+  style="--sidebar-width: {$sidebarWidth}px;"
+  on:click|stopPropagation
+  role="presentation"
+>
+  <Resizer
+    min={SIDEBAR_DEFAULTS.MIN_SIDEBAR_WIDTH}
+    max={SIDEBAR_DEFAULTS.MAX_SIDEBAR_WIDTH}
+    basis={SIDEBAR_DEFAULTS.SIDEBAR_WIDTH}
+    dimension={$sidebarWidth}
+    direction="EW"
+    side="left"
+    onUpdate={sidebarActions.updateSidebarWidth}
+  />
+  <div class="chat-sidebar-content">
+    <div class="chatbot-header-container">
+      <SidebarHeader
         {conversationManager}
-        bind:this={chatInputComponent}
-        onSend={onMessageSend}
-        {config}
+        {onNewConversation}
+        onClose={sidebarActions.closeChat}
       />
     </div>
+    <Messages {conversationManager} layout="sidebar" {config} />
+    <ChatInput
+      {conversationManager}
+      bind:this={chatInputComponent}
+      onSend={onMessageSend}
+      {config}
+    />
   </div>
-{/if}
+</div>
 
 <style lang="postcss">
   .chat-sidebar {

web-common/src/features/connectors/connector-icon-mapping.ts

@@ -13,7 +13,7 @@ import SnowflakeIcon from "../../components/icons/connectors/SnowflakeIcon.svelt
 import ClickHouseCloudIcon from "../../components/icons/connectors/ClickHouseCloudIcon.svelte";
 import StarRocksIcon from "../../components/icons/connectors/StarRocksIcon.svelte";
 
-export const ConnectorIconMapping = {
+export const connectorIconMapping = {
   athena: AthenaIcon,
   bigquery: GoogleBigQueryIcon,
   clickhouse: ClickHouseIcon,
@@ -30,7 +30,7 @@ export const ConnectorIconMapping = {
   starrocks: StarRocksIcon,
 };
 
-export const ConnectorLabelMapping = {
+export const connectorLabelMapping = {
   duckdb: "DuckDB",
   clickhouse: "ClickHouse",
 };

web-common/src/features/connectors/explorer/ConnectorEntry.svelte

@@ -7,7 +7,7 @@
   } from "../../../runtime-client";
   import { runtime } from "../../../runtime-client/runtime-store";
   import type { ConnectorExplorerStore } from "./connector-explorer-store";
-  import { ConnectorIconMapping } from "../connector-icon-mapping";
+  import { connectorIconMapping } from "../connector-icon-mapping";
   import { getConnectorIconKey } from "../connectors-utils";
   import DatabaseExplorer from "./DatabaseExplorer.svelte";
 
@@ -52,7 +52,7 @@
         <span class="flex-none">
           {#if connector.driver?.name}
             <svelte:component
-              this={ConnectorIconMapping[getConnectorIconKey(connector)]}
+              this={connectorIconMapping[getConnectorIconKey(connector)]}
               size="16px"
             />
           {/if}