AI question avatar

src/lib/commandCenter/panels/ai.svelte

@@ -76,6 +76,11 @@
     }
 
     $: answer = parseCompletion($completion);
+
+    function getInitials(name: string) {
+        const [first, last] = name.split(' ');
+        return `${first[0]}${last[0]}`;
+    }
 </script>
 
 <Template
@@ -105,7 +110,11 @@
 
     {#if $isLoading || answer}
         <div class="content">
-            <div class="u-flex u-gap-8">
+            <div class="u-flex u-gap-8 u-cross-center">
+                <div class="avatar is-size-x-small">{getInitials($user.name)}</div>
+                <p class="u-opacity-75">{$input}</p>
+            </div>
+            <div class="u-flex u-gap-8 u-margin-block-start-24">
                 <div class="logo">
                     <SvgIcon name="sparkles" type="color" />
                 </div>

src/lib/components/avatarInitials.svelte

@@ -4,8 +4,9 @@
 
     export let name: string;
     export let size: number;
+    export let background: string | undefined = undefined;
 
-    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2).toString();
+    $: src = sdk.forConsole.avatars.getInitials(name, size * 2, size * 2, background).toString();
 </script>
 
 <Avatar {name} {size} {src} />

src/routes/console/+layout.svelte

@@ -112,25 +112,22 @@
             group: 'help',
             icon: 'discord'
         },
-        {
-            label: 'Toggle theme',
-            callback: () => {
-                if ($app.theme === 'auto') {
-                    $app.theme = 'light';
-                } else if ($app.theme === 'light') {
-                    $app.theme = 'dark';
-                } else {
-                    $app.theme = 'auto';
-                }
-                addNotification({
-                    title: 'Theme changed',
-                    message: `Theme changed to ${$app.theme}`,
-                    type: 'success'
-                });
-            },
-            group: 'misc',
-            icon: 'switch-horizontal'
-        }
+        ...(['auto', 'dark', 'light'] as const).map((theme) => {
+            return {
+                label: `Set theme to ${theme}`,
+                callback: () => {
+                    $app.theme = theme;
+                    addNotification({
+                        title: 'Theme changed',
+                        message: `Theme changed to ${$app.theme}`,
+                        type: 'success'
+                    });
+                },
+                group: 'misc',
+                icon: 'switch-horizontal',
+                keys: ['t', theme[0]]
+            } as const;
+        })
     ]);
     let isOpen = false;