Chat close on drag, and new open location

src/lib/components/studio/sidebarProject.svelte

@@ -13,7 +13,6 @@
     import { base } from '$app/paths';
     import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import type { ComponentType } from 'svelte';
-    import { showChat } from '$lib/stores/chat';
     import { page } from '$app/state';
 
     export let project;
@@ -57,17 +56,6 @@
                 {/if}
             {/each}
         </Layout.Stack>
-        {#if !$isSmallViewport}
-            <ActionMenu.Item.Button
-                on:click={() => {
-                    showChat.set(!$showChat);
-                    if ($isTabletViewport) {
-                        isOpen = false;
-                    }
-                }}>
-                <Icon icon={IconSparkles} />
-            </ActionMenu.Item.Button>
-        {/if}
     </Layout.Stack>
 </nav>
 

src/lib/layout/shellStudio.svelte

@@ -149,6 +149,10 @@
             if (resizerLeftPosition > maxSize) {
                 resizerLeftPosition = maxSize;
             } else if (resizerLeftPosition < minSize) {
+                if (resizerLeftPosition < minSize - 100) {
+                    showChat.set(false);
+                }
+
                 resizerLeftPosition = minSize;
             }
         }

src/routes/(console)/project-[project]/studio/artifact-[artifact]/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Layout, Card, Typography, Divider, Icon } from '@appwrite.io/pink-svelte';
+    import { Layout, Card, Typography, Divider, Icon, Button } from '@appwrite.io/pink-svelte';
     import { isTabSelected } from '$lib/helpers/load';
     import { page } from '$app/state';
     import { Tab, Tabs, Terminal } from '$lib/components';
@@ -14,6 +14,8 @@
         saveTerminalHeightToPrefs,
         saveTerminalOpenToPrefs
     } from '$lib/helpers/studioLayout';
+    import { showChat } from '$lib/stores/chat';
+    import { default as IconChatLayout } from '../assets/chat-layout.svelte';
 
     const { children } = $props();
 
@@ -101,16 +103,26 @@
     height={$isSmallViewport ? 'calc(100vh - 218px)' : 'calc(100vh - 88px)'}
     gap="none">
     <Layout.Stack direction="column" gap="none">
-        <Tabs>
-            {#each tabs as tab}
-                <Tab
-                    href={tab.href}
-                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
-                    event={tab.event}>
-                    {tab.title}
-                </Tab>
-            {/each}
-        </Tabs>
+        <Layout.Stack gap="xxs" direction="row" alignItems="center">
+            {#if !$showChat}
+                <Button.Button
+                    variant="compact"
+                    color="--fgcolor-neutral-secondary"
+                    on:click={() => {
+                        showChat.set(true);
+                    }}><Icon icon={IconChatLayout} size="l"></Icon></Button.Button>
+            {/if}
+            <Tabs>
+                {#each tabs as tab}
+                    <Tab
+                        href={tab.href}
+                        selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                        event={tab.event}>
+                        {tab.title}
+                    </Tab>
+                {/each}
+            </Tabs>
+        </Layout.Stack>
         <div class="divider-wrapper">
             <Divider />
         </div>

src/routes/(console)/project-[project]/studio/assets/chat-layout.svelte

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6.00488 16.2957C6.05278 16.7348 6.42703 17.0841 6.89746 17.1288L7 17.1333H17L17.1025 17.1288C17.573 17.0841 17.9472 16.7348 17.9951 16.2957L18 16.2V7.8C18 7.31683 17.6067 6.91913 17.1025 6.87122L17 6.86667V5C18.6569 5 20 6.2536 20 7.8V16.2C20 17.7464 18.6569 19 17 19H7C5.34315 19 4 17.7464 4 16.2V7.8C4 6.2536 5.34315 5 7 5V6.86667L6.89746 6.87122C6.39333 6.91913 6 7.31684 6 7.8V16.2L6.00488 16.2957ZM17 5V6.86667H7V5H17Z"
+        fill="currentcolor" />
+    <path d="M11 6V18H9V6H11Z" fill="currentcolor" />
+</svg>