Adrien Denat
GitHub
parent
ffa4f55109
commit
b2387f62c8
|
|
@ -2,7 +2,7 @@
|
|||
"useTabs": true,
|
||||
"trailingComma": "es5",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||
"pluginSearchDirs": ["."],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@
|
|||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.7",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^3.0.1",
|
||||
"tslib": "^2.4.1",
|
||||
|
|
@ -3135,6 +3136,80 @@
|
|||
"svelte": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.2.7",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.7.tgz",
|
||||
"integrity": "sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12.17.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ianvs/prettier-plugin-sort-imports": "*",
|
||||
"@prettier/plugin-php": "*",
|
||||
"@prettier/plugin-pug": "*",
|
||||
"@shopify/prettier-plugin-liquid": "*",
|
||||
"@shufo/prettier-plugin-blade": "*",
|
||||
"@trivago/prettier-plugin-sort-imports": "*",
|
||||
"prettier": ">=2.2.0",
|
||||
"prettier-plugin-astro": "*",
|
||||
"prettier-plugin-css-order": "*",
|
||||
"prettier-plugin-import-sort": "*",
|
||||
"prettier-plugin-jsdoc": "*",
|
||||
"prettier-plugin-organize-attributes": "*",
|
||||
"prettier-plugin-organize-imports": "*",
|
||||
"prettier-plugin-style-order": "*",
|
||||
"prettier-plugin-svelte": "*",
|
||||
"prettier-plugin-twig-melody": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@ianvs/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-php": {
|
||||
"optional": true
|
||||
},
|
||||
"@prettier/plugin-pug": {
|
||||
"optional": true
|
||||
},
|
||||
"@shopify/prettier-plugin-liquid": {
|
||||
"optional": true
|
||||
},
|
||||
"@shufo/prettier-plugin-blade": {
|
||||
"optional": true
|
||||
},
|
||||
"@trivago/prettier-plugin-sort-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-astro": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-css-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-import-sort": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-jsdoc": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-attributes": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-organize-imports": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-style-order": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-svelte": {
|
||||
"optional": true
|
||||
},
|
||||
"prettier-plugin-twig-melody": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.7",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^3.0.1",
|
||||
"tslib": "^2.4.1",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
</script>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900 h-full">
|
||||
<body data-sveltekit-preload-data="hover" class="h-full dark:bg-gray-900">
|
||||
<div class="contents h-full">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -15,9 +15,9 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="group relative rounded-lg my-4">
|
||||
<div class="group relative my-4 rounded-lg">
|
||||
<pre
|
||||
class="overflow-auto scrollbar-custom scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20 px-5"><code
|
||||
class="scrollbar-custom overflow-auto px-5 scrollbar-thumb-gray-500 hover:scrollbar-thumb-gray-400 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20"><code
|
||||
class="language-{lang}">{@html highlightedCode || code.replaceAll("<", "<")}</code
|
||||
></pre>
|
||||
<CopyToClipBoardBtn
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
</script>
|
||||
|
||||
<button
|
||||
class="btn text-sm rounded-lg border py-2 px-2 shadow-sm border-gray-200 active:shadow-inner dark:border-gray-600 hover:border-gray-300 dark:hover:border-gray-400 transition-all {classNames}
|
||||
class="btn rounded-lg border border-gray-200 px-2 py-2 text-sm shadow-sm transition-all hover:border-gray-300 active:shadow-inner dark:border-gray-600 dark:hover:border-gray-400 {classNames}
|
||||
{!isSuccess && 'text-gray-200 dark:text-gray-200'}
|
||||
{isSuccess && 'text-green-500'}
|
||||
"
|
||||
|
|
|
|||
|
|
@ -30,29 +30,29 @@
|
|||
</script>
|
||||
|
||||
<nav
|
||||
class="md:hidden flex items-center h-12 border-b px-4 justify-between dark:border-gray-800 bg-gray-50 dark:bg-gray-800/70"
|
||||
class="flex h-12 items-center justify-between border-b bg-gray-50 px-4 dark:border-gray-800 dark:bg-gray-800/70 md:hidden"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-9 h-9 -ml-3 shrink-0"
|
||||
class="-ml-3 flex h-9 w-9 shrink-0 items-center justify-center"
|
||||
on:click={() => dispatch("toggle", true)}
|
||||
aria-label="Open menu"
|
||||
bind:this={openEl}><CarbonTextAlignJustify /></button
|
||||
>
|
||||
<span class="px-4 truncate">{title}</span>
|
||||
<a href={base || "/"} class="flex items-center justify-center w-9 h-9 -mr-3 shrink-0"
|
||||
<span class="truncate px-4">{title}</span>
|
||||
<a href={base || "/"} class="-mr-3 flex h-9 w-9 shrink-0 items-center justify-center"
|
||||
><CarbonAdd /></a
|
||||
>
|
||||
</nav>
|
||||
<nav
|
||||
class="fixed inset-0 z-50 grid grid-rows-[auto,auto,1fr,auto] grid-cols-1 max-h-screen bg-white dark:bg-gray-900 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 {isOpen
|
||||
class="fixed inset-0 z-50 grid max-h-screen grid-cols-1 grid-rows-[auto,auto,1fr,auto] bg-white bg-gradient-to-l from-gray-50 dark:bg-gray-900 dark:from-gray-800/30 {isOpen
|
||||
? 'block'
|
||||
: 'hidden'}"
|
||||
>
|
||||
<div class="flex items-center px-4 h-12">
|
||||
<div class="flex h-12 items-center px-4">
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center ml-auto w-9 h-9 -mr-3"
|
||||
class="-mr-3 ml-auto flex h-9 w-9 items-center justify-center"
|
||||
on:click={() => dispatch("toggle", false)}
|
||||
aria-label="Close menu"
|
||||
bind:this={closeEl}><CarbonClose /></button
|
||||
|
|
|
|||
|
|
@ -21,26 +21,26 @@
|
|||
}> = [];
|
||||
</script>
|
||||
|
||||
<div class="flex-none max-sm:pt-0 sticky top-0 px-3 py-3.5 flex items-center justify-between">
|
||||
<a class="rounded-xl font-semibold text-lg flex items-center" href="{PUBLIC_ORIGIN}{base}/">
|
||||
<div class="sticky top-0 flex flex-none items-center justify-between px-3 py-3.5 max-sm:pt-0">
|
||||
<a class="flex items-center rounded-xl text-lg font-semibold" href="{PUBLIC_ORIGIN}{base}/">
|
||||
<Logo classNames="mr-1 text-3xl" />
|
||||
HuggingChat
|
||||
</a>
|
||||
<a
|
||||
href={base || "/"}
|
||||
class="flex border py-0.5 px-2 rounded-lg shadow-sm hover:shadow-none bg-white dark:bg-gray-700 dark:border-gray-600 text-center"
|
||||
class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700"
|
||||
>
|
||||
New Chat
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col overflow-y-auto scrollbar-custom px-3 pb-3 pt-2 gap-1 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl"
|
||||
class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl bg-gradient-to-l from-gray-50 px-3 pb-3 pt-2 dark:from-gray-800/30"
|
||||
>
|
||||
{#each conversations as conv}
|
||||
<a
|
||||
data-sveltekit-noscroll
|
||||
href="{base}/conversation/{conv.id}"
|
||||
class="group pl-3 pr-2 h-11 rounded-lg flex-none text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center gap-1.5 {conv.id ===
|
||||
class="group flex h-11 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 {conv.id ===
|
||||
$page.params.id
|
||||
? 'bg-gray-100 dark:bg-gray-700'
|
||||
: ''}"
|
||||
|
|
@ -49,34 +49,34 @@
|
|||
|
||||
<button
|
||||
type="button"
|
||||
class="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center rounded"
|
||||
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
|
||||
title="Share conversation"
|
||||
on:click|preventDefault={() =>
|
||||
dispatch("shareConversation", { id: conv.id, title: conv.title })}
|
||||
>
|
||||
<CarbonExport class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 text-xs" />
|
||||
<CarbonExport class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex md:hidden md:group-hover:flex w-5 h-5 items-center justify-center rounded"
|
||||
class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
|
||||
title="Delete conversation"
|
||||
on:click|preventDefault={() => dispatch("deleteConversation", conv.id)}
|
||||
>
|
||||
<CarbonTrashCan
|
||||
class="text-gray-400 hover:text-gray-500 dark:hover:text-gray-300 text-xs"
|
||||
class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300"
|
||||
/>
|
||||
</button>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col p-3 gap-2 bg-gradient-to-l from-gray-50 dark:from-gray-800/30 rounded-r-xl mt-0.5 text-sm"
|
||||
class="mt-0.5 flex flex-col gap-2 rounded-r-xl bg-gradient-to-l from-gray-50 p-3 text-sm dark:from-gray-800/30"
|
||||
>
|
||||
<button
|
||||
on:click={switchTheme}
|
||||
type="button"
|
||||
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
|
||||
class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
|
||||
>
|
||||
Theme
|
||||
</button>
|
||||
|
|
@ -84,13 +84,13 @@
|
|||
href="https://huggingface.co/spaces/huggingchat/chat-ui/discussions"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
|
||||
class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
|
||||
>
|
||||
Feedback
|
||||
</a>
|
||||
<a
|
||||
href="{base}/privacy"
|
||||
class="group pl-3 pr-2 h-9 rounded-lg flex-none text-gray-500 dark:text-gray-400 dark:hover:bg-gray-700 flex items-center gap-1.5 hover:bg-gray-100"
|
||||
class="group flex h-9 flex-none items-center gap-1.5 rounded-lg pl-3 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
|
||||
>
|
||||
About & Privacy
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
<button
|
||||
transition:fade={{ duration: 150 }}
|
||||
on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
|
||||
class="btn absolute flex rounded-full border w-[41px] h-[41px] shadow-md dark:shadow-gray-950 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all {className}"
|
||||
class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
|
||||
><IconChevron classNames="mt-[2px]" /></button
|
||||
>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
<button
|
||||
type="button"
|
||||
on:click
|
||||
class="absolute btn flex rounded-lg border py-1 px-3 shadow-sm bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 transition-all
|
||||
class="btn absolute flex rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600
|
||||
{className}
|
||||
{visible ? 'opacity-100 visible' : 'opacity-0 invisible'}
|
||||
{visible ? 'visible opacity-100' : 'invisible opacity-0'}
|
||||
"
|
||||
>
|
||||
<CarbonPause class="mr-1 -ml-1 w-[1.1875rem] h-[1.25rem] text-gray-400" /> Stop generating
|
||||
<CarbonPause class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-400" /> Stop generating
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
|
||||
<div
|
||||
transition:fade={{ duration: 300 }}
|
||||
class="fixed right-0 top-12 md:top-0 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pt-2 md:pt-5 pr-2 md:pr-8 pl-36 pb-36 z-20 pointer-events-none"
|
||||
class="pointer-events-none fixed right-0 top-12 z-20 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 md:top-0 md:pr-8 md:pt-5"
|
||||
>
|
||||
<div
|
||||
class="flex items-center bg-white/90 dark:bg-gray-900/80 rounded-full py-1 px-3 shadow-sm pointer-events-auto"
|
||||
class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
|
||||
>
|
||||
<IconDazzled classNames="text-2xl mr-2" />
|
||||
<h2 class="font-semibold">{message}</h2>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<div
|
||||
class="
|
||||
pointer-events-none absolute rounded bg-black py-1 px-2 font-normal leading-tight text-white shadow transition-opacity
|
||||
pointer-events-none absolute rounded bg-black px-2 py-1 font-normal leading-tight text-white shadow transition-opacity
|
||||
{position}
|
||||
{classNames}
|
||||
"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
export let disabled = false;
|
||||
export let autofocus = false;
|
||||
|
||||
const dispatch = createEventDispatcher<{submit: void}>();
|
||||
const dispatch = createEventDispatcher<{ submit: void }>();
|
||||
|
||||
$: minHeight = `${1 + minRows * 1.5}em`;
|
||||
$: maxHeight = maxRows ? `${1 + maxRows * 1.5}em` : `auto`;
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
let textareaElement: HTMLTextAreaElement;
|
||||
</script>
|
||||
|
||||
<div class="relative flex-1 min-w-0">
|
||||
<div class="relative min-w-0 flex-1">
|
||||
<pre
|
||||
class="invisible py-3"
|
||||
aria-hidden="true"
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
enterkeyhint="send"
|
||||
tabindex="0"
|
||||
rows="1"
|
||||
class="absolute m-0 w-full h-full top-0 resize-none border-0 bg-transparent p-3 focus:ring-0 focus-visible:ring-0 dark:bg-transparent outline-none scrollbar-custom overflow-x-hidden overflow-y-scroll"
|
||||
class="scrollbar-custom absolute top-0 m-0 h-full w-full resize-none overflow-x-hidden overflow-y-scroll border-0 bg-transparent p-3 outline-none focus:ring-0 focus-visible:ring-0 dark:bg-transparent"
|
||||
bind:value
|
||||
bind:this={textareaElement}
|
||||
{disabled}
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
const dispatch = createEventDispatcher<{ message: string }>();
|
||||
</script>
|
||||
|
||||
<div class="grid lg:grid-cols-3 gap-8 my-auto">
|
||||
<div class="my-auto grid gap-8 lg:grid-cols-3">
|
||||
<div class="lg:col-span-1">
|
||||
<div>
|
||||
<div class="text-2xl font-semibold mb-3 flex items-center">
|
||||
<div class="mb-3 flex items-center text-2xl font-semibold">
|
||||
<Logo classNames="mr-1 text-yellow-400 text-4xl" />
|
||||
HuggingChat
|
||||
<div
|
||||
class="text-base h-6 px-2 rounded-lg text-gray-400 bg-gray-50 ml-3 flex items-center border border-gray-100 dark:bg-gray-800 dark:border-gray-700/60"
|
||||
class="ml-3 flex h-6 items-center rounded-lg border border-gray-100 bg-gray-50 px-2 text-base text-gray-400 dark:border-gray-700/60 dark:bg-gray-800"
|
||||
>
|
||||
v0
|
||||
</div>
|
||||
|
|
@ -31,13 +31,13 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="lg:col-span-2 lg:pl-24">
|
||||
<div class="border dark:border-gray-800 rounded-xl overflow-hidden">
|
||||
<div class="overflow-hidden rounded-xl border dark:border-gray-800">
|
||||
<div class="p-3">
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
|
||||
<div class="font-semibold">{PUBLIC_MODEL_NAME}</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-5 px-3 py-2 bg-gray-100 rounded-xl text-sm text-gray-600 dark:text-gray-300 dark:bg-gray-800"
|
||||
class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-sm text-gray-600 dark:bg-gray-800 dark:text-gray-300"
|
||||
>
|
||||
<a
|
||||
href="https://huggingface.co/{PUBLIC_MODEL_ID}"
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
rel="noreferrer"
|
||||
class="flex items-center hover:underline"
|
||||
>
|
||||
<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
|
||||
<CarbonArrowUpRight class="mr-1.5 text-xs text-gray-400" />
|
||||
Model
|
||||
<div class="max-sm:hidden"> page</div>
|
||||
</a>
|
||||
|
|
@ -55,17 +55,17 @@
|
|||
rel="noreferrer"
|
||||
class="flex items-center hover:underline"
|
||||
>
|
||||
<CarbonArrowUpRight class="text-xs mr-1.5 text-gray-400" />
|
||||
<CarbonArrowUpRight class="mr-1.5 text-xs text-gray-400" />
|
||||
Dataset
|
||||
<div class="max-sm:hidden"> page</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://open-assistant.io/"
|
||||
target="_blank"
|
||||
class="flex items-center hover:underline ml-auto"
|
||||
class="ml-auto flex items-center hover:underline"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<CarbonEarth class="text-xs mr-1.5 text-gray-400" />
|
||||
<CarbonEarth class="mr-1.5 text-xs text-gray-400" />
|
||||
Open Assistant Website
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -74,10 +74,10 @@
|
|||
{#if PUBLIC_DISABLE_INTRO_TILES !== "true"}
|
||||
<div class="lg:col-span-3 lg:mt-12">
|
||||
<p class="mb-3 text-gray-600 dark:text-gray-300">Examples</p>
|
||||
<div class="grid lg:grid-cols-3 gap-3 lg:gap-5">
|
||||
<div class="grid gap-3 lg:grid-cols-3 lg:gap-5">
|
||||
<button
|
||||
type="button"
|
||||
class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
|
||||
class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
|
||||
on:click={() =>
|
||||
dispatch(
|
||||
"message",
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
|
||||
class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
|
||||
on:click={() =>
|
||||
dispatch(
|
||||
"message",
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="text-gray-600 dark:text-gray-300 p-2.5 sm:p-4 bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 border dark:border-gray-800 rounded-xl"
|
||||
class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:p-4"
|
||||
on:click={() => dispatch("message", "How do I make a delicious lemon cheesecake?")}
|
||||
>
|
||||
"Assist in a task"
|
||||
|
|
|
|||
|
|
@ -67,16 +67,16 @@
|
|||
<img
|
||||
alt=""
|
||||
src="https://huggingface.co/avatars/2edb18bd0206c16b433841a47f53fa8e.svg"
|
||||
class="mt-5 w-3 h-3 flex-none rounded-full shadow-lg"
|
||||
class="mt-5 h-3 w-3 flex-none rounded-full shadow-lg"
|
||||
/>
|
||||
<div
|
||||
class="relative rounded-2xl prose-pre:my-2 px-5 py-3.5 border border-gray-100 bg-gradient-to-br from-gray-50 dark:from-gray-800/40 dark:border-gray-800 text-gray-600 dark:text-gray-300 min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[100px]"
|
||||
class="relative min-h-[calc(2rem+theme(spacing[3.5])*2)] min-w-[100px] rounded-2xl border border-gray-100 bg-gradient-to-br from-gray-50 px-5 py-3.5 text-gray-600 prose-pre:my-2 dark:border-gray-800 dark:from-gray-800/40 dark:text-gray-300"
|
||||
>
|
||||
{#if !message.content}
|
||||
<IconLoading classNames="absolute inset-0 m-auto" />
|
||||
{/if}
|
||||
<div
|
||||
class="prose max-sm:prose-sm dark:prose-invert prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900 prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-headings:font-semibold max-w-none"
|
||||
class="prose max-w-none dark:prose-invert max-sm:prose-sm prose-headings:font-semibold prose-h1:text-lg prose-h2:text-base prose-h3:text-base prose-pre:bg-gray-800 dark:prose-pre:bg-gray-900"
|
||||
bind:this={contentEl}
|
||||
>
|
||||
{#each tokens as token}
|
||||
|
|
@ -92,8 +92,8 @@
|
|||
{/if}
|
||||
{#if message.from === "user"}
|
||||
<div class="flex items-start justify-start gap-4 max-sm:text-sm">
|
||||
<div class="mt-5 w-3 h-3 flex-none rounded-full" />
|
||||
<div class="rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400 whitespace-break-spaces">
|
||||
<div class="mt-5 h-3 w-3 flex-none rounded-full" />
|
||||
<div class="whitespace-break-spaces rounded-2xl px-5 py-3.5 text-gray-500 dark:text-gray-400">
|
||||
{message.content.trim()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class="overflow-y-auto h-full scrollbar-custom mr-1"
|
||||
class="scrollbar-custom mr-1 h-full overflow-y-auto"
|
||||
use:snapScrollToBottom={messages.length ? messages : false}
|
||||
bind:this={chatContainer}
|
||||
>
|
||||
<div class="max-w-3xl xl:max-w-4xl mx-auto px-5 pt-6 flex flex-col gap-5 sm:gap-8 h-full">
|
||||
<div class="mx-auto flex h-full max-w-3xl flex-col gap-5 px-5 pt-6 sm:gap-8 xl:max-w-4xl">
|
||||
{#each messages as message, i}
|
||||
<ChatMessage loading={loading && i === messages.length - 1} {message} />
|
||||
{:else}
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="h-32 flex-none" />
|
||||
</div>
|
||||
<ScrollToBottomBtn
|
||||
class="max-md:hidden bottom-36 right-4 lg:right-10"
|
||||
class="bottom-36 right-4 max-md:hidden lg:right-10"
|
||||
scrollNode={chatContainer}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
<div class="relative min-h-0 min-w-0">
|
||||
<ChatMessages {loading} {pending} {messages} on:message />
|
||||
<div
|
||||
class="flex flex-col pointer-events-none [&>*]:pointer-events-auto max-md:border-t dark:border-gray-800 items-center max-md:dark:bg-gray-900 max-md:bg-white bg-gradient-to-t from-white via-white/80 to-white/0 dark:from-gray-900 dark:via-gray-80 dark:to-gray-900/0 justify-center absolute inset-x-0 max-w-3xl xl:max-w-4xl mx-auto px-3.5 sm:px-5 bottom-0 py-4 md:py-8 w-full z-0"
|
||||
class="dark:via-gray-80 pointer-events-none absolute inset-x-0 bottom-0 z-0 mx-auto flex w-full max-w-3xl flex-col items-center justify-center bg-gradient-to-t from-white via-white/80 to-white/0 px-3.5 py-4 dark:border-gray-800 dark:from-gray-900 dark:to-gray-900/0 max-md:border-t max-md:bg-white max-md:dark:bg-gray-900 sm:px-5 md:py-8 xl:max-w-4xl [&>*]:pointer-events-auto"
|
||||
>
|
||||
<StopGeneratingBtn
|
||||
visible={loading}
|
||||
|
|
@ -38,9 +38,9 @@
|
|||
/>
|
||||
<form
|
||||
on:submit|preventDefault={handleSubmit}
|
||||
class="w-full relative flex items-center rounded-xl flex-1 max-w-4xl border bg-gray-100 focus-within:border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:focus-within:border-gray-500 "
|
||||
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 "
|
||||
>
|
||||
<div class="w-full flex flex-1 border-none bg-transparent">
|
||||
<div class="flex w-full flex-1 border-none bg-transparent">
|
||||
<ChatInput
|
||||
placeholder="Ask anything"
|
||||
bind:value={message}
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
maxRows={10}
|
||||
/>
|
||||
<button
|
||||
class="btn p-1 px-[0.7rem] self-end bg-transparent my-1 h-[2.4rem] text-gray-400 rounded-lg enabled:dark:hover:text-gray-100 enabled:hover:text-gray-700 disabled:opacity-60 dark:disabled:opacity-40 mx-1"
|
||||
class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 disabled:opacity-60 enabled:hover:text-gray-700 dark:disabled:opacity-40 enabled:dark:hover:text-gray-100"
|
||||
disabled={!message || loading || disabled}
|
||||
type="submit"
|
||||
>
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex text-xs text-gray-400/90 mt-2 justify-between self-stretch px-1 max-sm:gap-2">
|
||||
<div class="mt-2 flex justify-between self-stretch px-1 text-xs text-gray-400/90 max-sm:gap-2">
|
||||
<p>
|
||||
Model: <a
|
||||
href="https://huggingface.co/{PUBLIC_MODEL_ID}"
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
</p>
|
||||
{#if messages.length}
|
||||
<button
|
||||
class="flex flex-none items-center hover:underline hover:text-gray-400 dark:max-sm:bg-gray-800 max-sm:bg-gray-50 max-sm:px-2.5 max-sm:rounded-lg"
|
||||
class="flex flex-none items-center hover:text-gray-400 hover:underline max-sm:rounded-lg max-sm:bg-gray-50 max-sm:px-2.5 dark:max-sm:bg-gray-800"
|
||||
type="button"
|
||||
on:click={() => dispatch("share")}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-center text-gray-800 dark:text-gray-300 bg-gradient-to-t from-gray-200 dark:from-gray-700"
|
||||
class="flex items-center justify-center bg-gradient-to-t from-gray-200 text-gray-800 dark:from-gray-700 dark:text-gray-300"
|
||||
>
|
||||
<div
|
||||
class="dark:bg-gray-800 bg-white border rounded-xl pb-2 pt-4 px-8 flex flex-col justify-center align-center text-center -mt-24 dark:border-gray-700"
|
||||
class="align-center -mt-24 flex flex-col justify-center rounded-xl border bg-white px-8 pb-2 pt-4 text-center dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<h1 class="text-5xl mb-2 font-semibold">{$page.status}</h1>
|
||||
<div class="h-px dark:bg-gray-700 bg-gray-200 -mx-8 my-2" />
|
||||
<h1 class="mb-2 text-5xl font-semibold">{$page.status}</h1>
|
||||
<div class="-mx-8 my-2 h-px bg-gray-200 dark:bg-gray-700" />
|
||||
<h2 class="text-lg">{$page.error?.message}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
</svelte:head>
|
||||
|
||||
<div
|
||||
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] md:grid-rows-[1fr] md:grid-cols-[280px,1fr] overflow-hidden text-smd dark:text-gray-300"
|
||||
class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd dark:text-gray-300 md:grid-cols-[280px,1fr] md:grid-rows-[1fr]"
|
||||
>
|
||||
<MobileNav
|
||||
isOpen={isNavOpen}
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
on:deleteConversation={(ev) => deleteConversation(ev.detail)}
|
||||
/>
|
||||
</MobileNav>
|
||||
<nav class="max-md:hidden grid grid-rows-[auto,1fr,auto] grid-cols-1 max-h-screen">
|
||||
<nav class="grid max-h-screen grid-cols-1 grid-rows-[auto,1fr,auto] max-md:hidden">
|
||||
<NavMenu
|
||||
conversations={data.conversations}
|
||||
on:shareConversation={(ev) => shareConversation(ev.detail.id, ev.detail.title)}
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
try {
|
||||
loading = true;
|
||||
const res = await fetch(`${base}/conversation`, {
|
||||
method: 'POST',
|
||||
method: "POST",
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
import privacy from "../../../PRIVACY.md?raw";
|
||||
</script>
|
||||
|
||||
<div class="p-6 overflow-auto">
|
||||
<div class="mx-auto pt-6 md:pt-12 pb-24 px-4 prose dark:prose-invert">
|
||||
<div class="overflow-auto p-6">
|
||||
<div class="prose mx-auto px-4 pb-24 pt-6 dark:prose-invert md:pt-12">
|
||||
{@html marked(privacy, { gfm: true })}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@
|
|||
|
||||
@layer components {
|
||||
.btn {
|
||||
@apply cursor-pointer disabled:cursor-default select-none inline-flex flex-shrink-0 justify-center items-center whitespace-nowrap outline-none focus:ring transition-all;
|
||||
@apply inline-flex flex-shrink-0 cursor-pointer select-none items-center justify-center whitespace-nowrap outline-none transition-all focus:ring disabled:cursor-default;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.scrollbar-custom {
|
||||
@apply scrollbar-thin scrollbar-w-1 scrollbar-thumb-rounded-full scrollbar-track-transparent scrollbar-thumb-black/10 dark:scrollbar-thumb-white/10 hover:scrollbar-thumb-black/20 dark:hover:scrollbar-thumb-white/20;
|
||||
@apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-black/10 scrollbar-thumb-rounded-full scrollbar-w-1 hover:scrollbar-thumb-black/20 dark:scrollbar-thumb-white/10 dark:hover:scrollbar-thumb-white/20;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue