Skip to content

Commit

Permalink
Chat input UI updates (#1641)
Browse files Browse the repository at this point in the history 
* remove extra margin

* chatinput

* add missing auto

* fix: lint

* feat: add fixed to parent container to prevent bouncy scroll on ios

---------

Co-authored-by: Nathan Sarrazin <[email protected]>
  • Loading branch information
@gary149 @nsarrazin
gary149 and nsarrazin authored Jan 10, 2025
1 parent d70dfb9 commit f82af0b
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 71 deletions.
105 changes: 52 additions & 53 deletions src/lib/components/chat/ChatInput.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script lang="ts">
import { browser } from "$app/environment";
import { createEventDispatcher, onMount, tick } from "svelte";
import { createEventDispatcher, onMount } from "svelte";
import HoverTooltip from "$lib/components/HoverTooltip.svelte";
import IconInternet from "$lib/components/icons/IconInternet.svelte";
Expand Down Expand Up @@ -31,7 +31,6 @@
export let placeholder = "";
export let loading = false;
export let disabled = false;
export let assistant: Assistant | undefined = undefined;
export let modelHasTools = false;
Expand All @@ -54,6 +53,21 @@
const dispatch = createEventDispatcher<{ submit: void }>();
onMount(() => {
if (!isVirtualKeyboard()) {
textareaElement.focus();
}
function onFormSubmit() {
adjustTextareaHeight();
}
const formEl = textareaElement.closest("form");
formEl?.addEventListener("submit", onFormSubmit);
return () => {
formEl?.removeEventListener("submit", onFormSubmit);
};
});
function isVirtualKeyboard(): boolean {
if (!browser) return false;
Expand All @@ -70,30 +84,24 @@
}
function adjustTextareaHeight() {
if (!textareaElement) return;
textareaElement.style.height = "auto";
const newHeight = Math.min(textareaElement.scrollHeight, parseInt("96em"));
textareaElement.style.height = `${newHeight}px`;
if (!textareaElement.parentElement) return;
textareaElement.parentElement.style.height = `${newHeight}px`;
textareaElement.style.height = `${textareaElement.scrollHeight}px`;
if (textareaElement.selectionStart === textareaElement.value.length) {
textareaElement.scrollTop = textareaElement.scrollHeight;
}
}
async function handleKeydown(event: KeyboardEvent) {
if (event.key === "Enter" && !event.shiftKey && !isCompositionOn) {
function handleKeydown(event: KeyboardEvent) {
if (
event.key === "Enter" &&
!event.shiftKey &&
!isCompositionOn &&
!isVirtualKeyboard() &&
value.trim() !== ""
) {
event.preventDefault();
if (isVirtualKeyboard()) {
// Insert a newline at the cursor position
const start = textareaElement.selectionStart;
const end = textareaElement.selectionEnd;
value = value.substring(0, start) + "\n" + value.substring(end);
textareaElement.selectionStart = textareaElement.selectionEnd = start + 1;
} else {
if (value.trim() !== "") {
dispatch("submit");
await tick();
adjustTextareaHeight();
}
}
dispatch("submit");
}
}
Expand All @@ -110,13 +118,6 @@
$: documentParserIsOn =
modelHasTools && files.length > 0 && files.some((file) => file.type.startsWith("application/"));
onMount(() => {
if (!isVirtualKeyboard()) {
textareaElement.focus();
}
adjustTextareaHeight();
});
$: extraTools = $page.data.tools
.filter((t: ToolFront) => $settings.tools?.includes(t._id))
.filter(
Expand All @@ -125,29 +126,27 @@
) satisfies ToolFront[];
</script>

<div class="min-h-full flex-1" on:paste>
<div class="relative w-full min-w-0">
<textarea
enterkeyhint={!isVirtualKeyboard() ? "enter" : "send"}
tabindex="0"
rows="1"
class="scrollbar-custom max-h-[96em] w-full resize-none scroll-p-3 overflow-y-auto overflow-x-hidden border-0 bg-transparent px-3 py-2.5 outline-none focus:ring-0 focus-visible:ring-0 max-sm:p-2.5 max-sm:text-[16px]"
class:text-gray-400={disabled}
bind:value
bind:this={textareaElement}
{disabled}
on:keydown={handleKeydown}
on:compositionstart={() => (isCompositionOn = true)}
on:compositionend={() => (isCompositionOn = false)}
on:input={adjustTextareaHeight}
on:beforeinput
{placeholder}
/>
</div>
<div class="flex min-h-full flex-1 flex-col" on:paste>
<textarea
rows="1"
tabindex="0"
inputmode="text"
class="scrollbar-custom max-h-[4lh] w-full resize-none overflow-y-auto overflow-x-hidden border-0 bg-transparent px-2.5 py-2.5 outline-none focus:ring-0 focus-visible:ring-0 max-sm:text-[16px] sm:px-3"
class:text-gray-400={disabled}
bind:value
bind:this={textareaElement}
on:keydown={handleKeydown}
on:compositionstart={() => (isCompositionOn = true)}
on:compositionend={() => (isCompositionOn = false)}
on:input={adjustTextareaHeight}
on:beforeinput
{placeholder}
{disabled}
/>

{#if !assistant}
<div
class="scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2 px-3 pb-2.5 pt-0.5 text-gray-500
dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto sm:gap-2.5"
class="scrollbar-custom -ml-0.5 flex max-w-[calc(100%-40px)] flex-wrap items-center justify-start gap-2.5 px-3 pb-2.5 pt-1.5 text-gray-500 dark:text-gray-400 max-md:flex-nowrap max-md:overflow-x-auto sm:gap-2"
>
<HoverTooltip
label="Search the web"
Expand Down Expand Up @@ -299,7 +298,7 @@
TooltipClassNames="text-xs !text-left !w-auto whitespace-nowrap !py-1 max-sm:hidden"
>
<a
class="base-tool flex !size-[20px] items-center justify-center rounded-full bg-white/10"
class="base-tool flex !size-[20px] items-center justify-center rounded-full border !border-gray-200 !bg-white !transition-none dark:!border-gray-500 dark:!bg-transparent"
href={`${base}/tools`}
title="Browse more tools"
>
Expand All @@ -321,10 +320,10 @@
}
.base-tool {
@apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap text-xs outline-none transition-all focus:outline-none active:outline-none dark:hover:text-gray-300 sm:hover:text-purple-600;
@apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap border border-transparent text-xs outline-none transition-all focus:outline-none active:outline-none dark:hover:text-gray-300 sm:hover:text-purple-600;
}
.active-tool {
@apply rounded-full bg-purple-500/15 pl-1 pr-2 text-purple-600 hover:text-purple-600 dark:bg-purple-600/40 dark:text-purple-300;
@apply rounded-full !border-purple-200 bg-purple-100 pl-1 pr-2 text-purple-600 hover:text-purple-600 dark:!border-purple-700 dark:bg-purple-600/40 dark:text-purple-200;
}
</style>
44 changes: 27 additions & 17 deletions src/lib/components/chat/ChatWindow.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
import type { Message, MessageFile } from "$lib/types/Message";
import { createEventDispatcher, onDestroy, tick } from "svelte";
import CarbonSendAltFilled from "~icons/carbon/send-alt-filled";
import CarbonExport from "~icons/carbon/export";
import CarbonCheckmark from "~icons/carbon/checkmark";
import CarbonCaretDown from "~icons/carbon/caret-down";
Expand Down Expand Up @@ -376,7 +375,7 @@
{/if}

<div class="w-full">
<div class="flex w-full pb-3">
<div class="flex w-full *:mb-3">
{#if loading}
<StopGeneratingBtn classNames="ml-auto" on:click={() => dispatch("stop")} />
{:else if lastIsError}
Expand All @@ -390,27 +389,25 @@
}
}}
/>
{:else}
{:else if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
<div class="ml-auto gap-2">
{#if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
<ContinueBtn
on:click={() => {
if (lastMessage && lastMessage.ancestors) {
dispatch("continue", {
id: lastMessage?.id,
});
}
}}
/>
{/if}
<ContinueBtn
on:click={() => {
if (lastMessage && lastMessage.ancestors) {
dispatch("continue", {
id: lastMessage?.id,
});
}
}}
/>
</div>
{/if}
</div>
<form
tabindex="-1"
aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
on:submit|preventDefault={handleSubmit}
class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 focus-within:border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:focus-within:border-gray-500
class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 dark:border-gray-600 dark:bg-gray-700
{isReadOnly ? 'opacity-30' : ''}"
>
{#if onDrag && isFileUploadEnabled}
Expand Down Expand Up @@ -453,13 +450,26 @@
</button>
{:else}
<button
class="btn absolute bottom-1 right-0.5 size-10 self-end rounded-lg bg-transparent text-gray-400 enabled:hover:text-gray-700 disabled:opacity-60 enabled:dark:hover:text-gray-100 dark:disabled:opacity-40"
class="btn absolute bottom-2 right-2 size-7 self-end rounded-full border bg-white text-black shadow transition-none enabled:hover:bg-white enabled:hover:shadow-inner disabled:opacity-60 dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:hover:enabled:bg-black"
disabled={!message || isReadOnly}
type="submit"
aria-label="Send message"
name="submit"
>
<CarbonSendAltFilled />
<svg
width="1em"
height="1em"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M17.0606 4.23197C16.4748 3.64618 15.525 3.64618 14.9393 4.23197L5.68412 13.4871C5.09833 14.0729 5.09833 15.0226 5.68412 15.6084C6.2699 16.1942 7.21965 16.1942 7.80544 15.6084L14.4999 8.91395V26.7074C14.4999 27.5359 15.1715 28.2074 15.9999 28.2074C16.8283 28.2074 17.4999 27.5359 17.4999 26.7074V8.91395L24.1944 15.6084C24.7802 16.1942 25.7299 16.1942 26.3157 15.6084C26.9015 15.0226 26.9015 14.0729 26.3157 13.4871L17.0606 4.23197Z"
fill="currentColor"
/>
</svg>
</button>
{/if}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@
/>

<div
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
class="fixed grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
? 'md:grid-cols-[290px,1fr]'
: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
>
Expand Down

0 comments on commit f82af0b

Please sign in to comment.