From 8f9ff1b4b14ea63408f23ff1a2fce70bd274ccb4 Mon Sep 17 00:00:00 2001
From: Darren Shepherd <darren@acorn.io>
Date: Mon, 23 Dec 2024 01:07:46 +0100
Subject: [PATCH] chore: small tweaks for mobile

---
 apiclient/task.go                             |  4 +-
 ui/user/src/lib/actions/div.ts                | 10 ++---
 ui/user/src/lib/actions/popover.ts            |  6 ++-
 ui/user/src/lib/components/Thread.svelte      |  9 ++++-
 .../src/lib/components/editor/Controls.svelte |  4 +-
 .../lib/components/messages/Message.svelte    |  1 -
 ui/user/src/lib/components/navbar/Menu.svelte | 40 ++++++++++---------
 .../src/lib/services/editor/index.svelte.ts   |  7 ++++
 ui/user/src/routes/+page.svelte               |  2 +-
 ui/user/src/routes/[agent]/+page.svelte       |  3 +-
 .../src/routes/login_complete/+page.svelte    |  2 +-
 11 files changed, 52 insertions(+), 36 deletions(-)

diff --git a/apiclient/task.go b/apiclient/task.go
index d67779dfc..404d0a8f5 100644
--- a/apiclient/task.go
+++ b/apiclient/task.go
@@ -124,9 +124,9 @@ type TaskRunOptions struct {
 func (c *Client) RunTask(ctx context.Context, taskID string, input string, opts TaskRunOptions) (*types.TaskRun, error) {
 	var url string
 	if opts.ThreadID != "" {
-		url = fmt.Sprintf("/threads/%s/tasks/%s/runs", opts.ThreadID, taskID)
+		url = fmt.Sprintf("/threads/%s/tasks/%s/run", opts.ThreadID, taskID)
 	} else {
-		url = fmt.Sprintf("/assistants/%s/tasks/%s/runs", opts.AssistantID, taskID)
+		url = fmt.Sprintf("/assistants/%s/tasks/%s/run", opts.AssistantID, taskID)
 	}
 
 	_, resp, err := c.postJSON(ctx, url, input)
diff --git a/ui/user/src/lib/actions/div.ts b/ui/user/src/lib/actions/div.ts
index 424da0ec0..f14c85185 100644
--- a/ui/user/src/lib/actions/div.ts
+++ b/ui/user/src/lib/actions/div.ts
@@ -2,7 +2,7 @@ import { tick } from 'svelte';
 
 export function autoscroll(node: HTMLElement) {
 	const observer = new MutationObserver(() => {
-		if (node.dataset.scroll !== 'false') {
+		if (node.dataset.autoscroll !== 'false') {
 			tick().then(() => {
 				node.scrollTop = node.scrollHeight;
 			});
@@ -17,11 +17,11 @@ export function autoscroll(node: HTMLElement) {
 		const scrollHeight = node.scrollHeight;
 		const clientHeight = node.clientHeight;
 
-		// Check if the user has scrolled to the bottom
-		if (scrollTop + clientHeight >= scrollHeight) {
-			node.dataset.scroll = 'true';
+		// Check if the user has scrolled to withing 40px of the bottom
+		if (scrollHeight - (scrollTop + clientHeight) <= 40) {
+			node.dataset.autoscroll = 'true';
 		} else {
-			node.dataset.scroll = 'false';
+			node.dataset.autoscroll = 'false';
 		}
 	});
 }
diff --git a/ui/user/src/lib/actions/popover.ts b/ui/user/src/lib/actions/popover.ts
index dfec182db..533bdaf59 100644
--- a/ui/user/src/lib/actions/popover.ts
+++ b/ui/user/src/lib/actions/popover.ts
@@ -20,6 +20,7 @@ interface Popover extends Readable<boolean> {
 interface PopoverOptions extends Partial<ComputePositionConfig> {
 	hover?: boolean;
 	assign?: (x: number, y: number) => void;
+	offset?: number;
 }
 
 let id = 0;
@@ -28,6 +29,7 @@ export default function popover(opts?: PopoverOptions): Popover {
 	let ref: HTMLElement;
 	let tooltip: HTMLElement;
 	const open = writable(false);
+	const offsetSize = opts?.offset ?? 8;
 
 	function build(): ActionReturn | void {
 		if (!ref || !tooltip) return;
@@ -45,9 +47,9 @@ export default function popover(opts?: PopoverOptions): Popover {
 				middleware: [
 					flip(),
 					shift({
-						padding: 8
+						padding: offsetSize
 					}),
-					offset(8)
+					offset(offsetSize)
 				],
 				...opts
 			}).then(({ x, y }) => {
diff --git a/ui/user/src/lib/components/Thread.svelte b/ui/user/src/lib/components/Thread.svelte
index b0393d0bd..a602c7913 100644
--- a/ui/user/src/lib/components/Thread.svelte
+++ b/ui/user/src/lib/components/Thread.svelte
@@ -15,6 +15,7 @@
 	let { assistant = '' }: Props = $props();
 	let messages: Messages = $state({ messages: [], inProgress: false });
 	let thread: Thread | undefined = $state<Thread>();
+	let messagesDiv = $state<HTMLDivElement>();
 
 	$effect(() => {
 		if (!assistant || thread) {
@@ -45,7 +46,8 @@
 
 <div>
 	<div
-		class="flex h-screen w-full justify-center overflow-auto transition-all scrollbar-none"
+		bind:this={messagesDiv}
+		class="flex h-dvh w-full justify-center overflow-auto transition-all scrollbar-none"
 		use:autoscroll
 	>
 		<div class="flex w-full max-w-[900px] flex-col px-8 pt-24 transition-all">
@@ -66,7 +68,10 @@
 			onAbort={async () => {
 				await thread?.abort();
 			}}
-			onSubmit={async (i) => await thread?.invoke(i)}
+			onSubmit={async (i) => {
+				messagesDiv?.scrollTo({ top: messagesDiv?.scrollHeight });
+				await thread?.invoke(i)
+			}}
 		/>
 	</div>
 </div>
diff --git a/ui/user/src/lib/components/editor/Controls.svelte b/ui/user/src/lib/components/editor/Controls.svelte
index 2d7b51677..9b2fc3930 100644
--- a/ui/user/src/lib/components/editor/Controls.svelte
+++ b/ui/user/src/lib/components/editor/Controls.svelte
@@ -21,7 +21,7 @@
 	<div class="flex">
 		{#if $editorMaxSize}
 			<button
-				class="icon-button"
+				class="icon-button hidden md:block"
 				onclick={() => {
 					editorMaxSize.set(false);
 				}}
@@ -30,7 +30,7 @@
 			</button>
 		{:else}
 			<button
-				class="icon-button"
+				class="icon-button hidden md:block"
 				onclick={() => {
 					editorMaxSize.set(true);
 				}}
diff --git a/ui/user/src/lib/components/messages/Message.svelte b/ui/user/src/lib/components/messages/Message.svelte
index 56a8215d0..641e42be5 100644
--- a/ui/user/src/lib/components/messages/Message.svelte
+++ b/ui/user/src/lib/components/messages/Message.svelte
@@ -95,7 +95,6 @@
 {#snippet files()}
 	{#if msg.file?.filename}
 		<div
-			onclick={fileLoad}
 			role="none"
 			class="m-5 flex cursor-pointer flex-col
 		 divide-y divide-gray-300
diff --git a/ui/user/src/lib/components/navbar/Menu.svelte b/ui/user/src/lib/components/navbar/Menu.svelte
index be098505a..0329cd1ba 100644
--- a/ui/user/src/lib/components/navbar/Menu.svelte
+++ b/ui/user/src/lib/components/navbar/Menu.svelte
@@ -15,7 +15,8 @@
 	let { onLoad, icon, body, title, description, show }: Props = $props();
 	let loading = $state(false);
 	const { ref, tooltip, toggle, open } = popover({
-		placement: 'bottom'
+		placement: 'bottom',
+		offset: 0
 	});
 
 	$effect(() => {
@@ -61,25 +62,26 @@
 	{@render icon()}
 </button>
 
-<div
-	use:tooltip
-	class="flex w-96 flex-col divide-y
-	divide-gray-200
-	rounded-3xl
-	 bg-gray-50 p-6 shadow dark:divide-gray-700 dark:bg-gray-950"
->
-	<div class="mb-4">
-		<div class="flex justify-between">
-			{title}
-			{#if onLoad}
-				<button onclick={load}>
-					<RotateCw class="h-4 w-4 {loading ? 'animate-spin' : ''}" />
-				</button>
+<div use:tooltip class="w-screen md:w-96 px-2" >
+	<div
+		class="flex w-full flex-col divide-y
+		divide-gray-200
+		rounded-3xl
+		 bg-gray-50 p-6 shadow dark:divide-gray-700 dark:bg-gray-950"
+	>
+		<div class="mb-4">
+			<div class="flex justify-between">
+				{title}
+				{#if onLoad}
+					<button onclick={load}>
+						<RotateCw class="h-4 w-4 {loading ? 'animate-spin' : ''}" />
+					</button>
+				{/if}
+			</div>
+			{#if description}
+				<p class="mt-1 text-xs font-normal text-gray-700 dark:text-gray-300">{description}</p>
 			{/if}
 		</div>
-		{#if description}
-			<p class="mt-1 text-xs font-normal text-gray-700 dark:text-gray-300">{description}</p>
-		{/if}
+		{@render body()}
 	</div>
-	{@render body()}
 </div>
diff --git a/ui/user/src/lib/services/editor/index.svelte.ts b/ui/user/src/lib/services/editor/index.svelte.ts
index 0844fdb0b..61b6b6ba5 100644
--- a/ui/user/src/lib/services/editor/index.svelte.ts
+++ b/ui/user/src/lib/services/editor/index.svelte.ts
@@ -151,6 +151,13 @@ async function loadFile(
 			modified: false,
 			selected: true
 		};
+		for (let i = 0; i < items.length; i++) {
+			if (items[i].id === targetFile.id) {
+				items[i] = targetFile;
+				select(targetFile.id);
+				return;
+			}
+		}
 		items.push(targetFile);
 		select(targetFile.id);
 	} catch {
diff --git a/ui/user/src/routes/+page.svelte b/ui/user/src/routes/+page.svelte
index ec406f507..99ac99a04 100644
--- a/ui/user/src/routes/+page.svelte
+++ b/ui/user/src/routes/+page.svelte
@@ -37,7 +37,7 @@
 
 <div
 	bind:this={div}
-	class="relative hidden h-screen w-full items-center text-black dark:text-white"
+	class="relative hidden h-dvh w-full items-center text-black dark:text-white"
 >
 	<div
 		class="absolute right-0 top-0 flex items-center gap-4 p-4 pr-6 text-white hover:text-blue-50"
diff --git a/ui/user/src/routes/[agent]/+page.svelte b/ui/user/src/routes/[agent]/+page.svelte
index 74dcf97d2..3b34ba338 100644
--- a/ui/user/src/routes/[agent]/+page.svelte
+++ b/ui/user/src/routes/[agent]/+page.svelte
@@ -11,6 +11,7 @@
 	const editorMaxSize = EditorService.maxSize;
 
 	let title = $derived($currentAssistant.name ?? '');
+	let splitWindow = $derived(editorVisible && !$editorMaxSize);
 
 	$effect(() => {
 		if ($profile.unauthorized) {
@@ -36,7 +37,7 @@
 	</div>
 
 	{#if $editorVisible}
-		<div class="pt-20 transition-all {$editorMaxSize ? 'w-full' : 'w-1/2'} h-screen">
+		<div class="pt-20 transition-all w-full {splitWindow ? 'md:w-3/5' : ''}" >
 			<Editor />
 		</div>
 	{/if}
diff --git a/ui/user/src/routes/login_complete/+page.svelte b/ui/user/src/routes/login_complete/+page.svelte
index d33a5306b..acfd5facf 100644
--- a/ui/user/src/routes/login_complete/+page.svelte
+++ b/ui/user/src/routes/login_complete/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 </script>
 
-<main id="main-content" class="flex h-screen justify-center">
+<main id="main-content" class="flex h-dvh justify-center">
 	<div class="relative mt-32 text-center">
 		<img src="/images/obot-icon-blue.svg" alt="Assistant logo" class="mx-auto mb-4 h-72 w-72" />
 		<h1 class="my-4 text-6xl font-extrabold text-black dark:text-gray-100">All Set!</h1>