From 7bb0ae4db4f0dc5c01f7c0ef8c696496efdf0652 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 17 Aug 2023 18:59:44 +0100
Subject: [PATCH] fix ai panel input

---
 src/lib/commandCenter/panels/ai.svelte       |  4 ++++
 src/lib/commandCenter/panels/template.svelte | 23 +++++++++++++++++++-
 src/routes/console/+layout.svelte            |  1 -
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
index 307263c2d..db956216c 100644
--- a/src/lib/commandCenter/panels/ai.svelte
+++ b/src/lib/commandCenter/panels/ai.svelte
@@ -8,6 +8,7 @@
 
     import { isLanguage, type Language } from '$lib/components/code.svelte';
     import { VARS } from '$lib/system';
+    import { key } from '$routes/console/project-[project]/overview/keys/[key]/store';
 
     const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
         api: VARS.ASSISTANT_ENDPOINT
@@ -97,6 +98,9 @@
               };
           })}
     clearOnCallback={false}
+    on:keydown={(e) => {
+        e.detail.cancel();
+    }}
     --min-height="40rem"
     --max-height="52.5rem">
     <div slot="search">
diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 9b83cd996..22e1e3937 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -4,7 +4,7 @@
     // This is the template for all panels used in the command center.
     // Use this component when you want to create a new panel.
 
-    import { tick } from 'svelte';
+    import { createEventDispatcher, tick } from 'svelte';
 
     import { getCommandCenterCtx } from '../commandCenter.svelte';
 
@@ -28,9 +28,25 @@
         }
     }
 
+    const dispatch = createEventDispatcher<{
+        keydown: {
+            originalEvent: KeyboardEvent;
+            cancel: () => void;
+            key: string;
+        };
+    }>();
+
     function handleKeyDown(event: KeyboardEvent) {
         if (!open) return;
 
+        let canceled = false;
+        dispatch('keydown', {
+            originalEvent: event,
+            cancel: () => (canceled = true),
+            key: event.key
+        });
+        if (canceled) return;
+
         if (options) {
             if (event.key === 'ArrowDown') {
                 event.preventDefault();
@@ -177,6 +193,10 @@
         selected = option.index;
     };
 
+    const getOptionBlurHandler = () => () => {
+        selected = -1;
+    };
+
     const castOption = (option: IndexedOption) => option as Option;
 
     function getBreadcrumbs(subPanels: typeof $subPanels) {
@@ -272,6 +292,7 @@
                                 class="option"
                                 on:click={getOptionClickHandler(item)}
                                 on:mouseover={getOptionFocusHandler(item)}
+                                on:mouseleave={getOptionBlurHandler()}
                                 on:focus={getOptionFocusHandler(item)}>
                                 <slot name="option" option={castOption(item)}>
                                     <div class="u-flex u-gap-8 u-cross-center">
diff --git a/src/routes/console/+layout.svelte b/src/routes/console/+layout.svelte
index 6556764fc..87f34689f 100644
--- a/src/routes/console/+layout.svelte
+++ b/src/routes/console/+layout.svelte
@@ -63,7 +63,6 @@
             group: 'navigation',
             rank: -2
         },
-
         {
             label: 'Create new organization',
             callback: () => {