add xenova transformers

.gitignore

@@ -9,4 +9,6 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vercel
-/dev-dist
+/dev-dist
+/static/models/*
+!/static/models/README

.vercelignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vercel
+/dev-dist

package.json

@@ -11,7 +11,8 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"test:unit": "vitest",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"deploy": "vercel --prod --archive=tgz"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.31.2",
@@ -48,11 +49,12 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@xenova/transformers": "^2.9.0",
 		"class-variance-authority": "^0.6.0",
 		"clsx": "^1.2.1",
 		"lucide-svelte": "^0.233.0",
 		"radix-svelte": "^0.7.1",
 		"tailwind-merge": "^1.13.0",
 		"tailwindcss-animate": "^1.0.5"
 	}
-}
+}

src/app.postcss

@@ -76,9 +76,11 @@
 	}
 	html {
 		-webkit-tap-highlight-color: transparent;
+		height: 100%;
 	}
 	body {
 		@apply bg-background text-foreground;
 		font-feature-settings: 'rlig' 1, 'calt' 1;
+		height: 100%;
 	}
 }

src/lib/components/ChatMessage.svelte

@@ -1,35 +1,37 @@
-<script lang="ts">
-	import type { ChatCompletionRequestMessageRoleEnum } from 'openai'
+<script>
 	import { Avatar } from '$components/ui/avatar'
 	import { Skeleton } from '$components/ui/skeleton'
 	import AvatarImage from './ui/avatar/AvatarImage.svelte'
 	import AvatarFallback from './ui/avatar/AvatarFallback.svelte'
 	import { marked } from 'marked'
 	import DOMPurify from 'isomorphic-dompurify'
 
-	export let type: ChatCompletionRequestMessageRoleEnum
-	export let message: string
+	export let type
+	export let message
 
 	$: loading = message === 'Loading..'
 	$: isUser = type === 'user'
 </script>
 
-<div class="flex space-x-2 {isUser ? 'flex justify-end' : 'flex justify-start'}">
-	{#if type !== 'user'}
+<div class="flex items-center {isUser ? 'flex-row-reverse justify-start' : 'flex justify-start'}">
 		<Avatar class="w-6 h-6">
-			<AvatarImage src="/tatan.avif" alt="YD avatar" />
-			<AvatarFallback>YD</AvatarFallback>
+			{#if isUser}
+				<AvatarImage src="/mamede.png" alt="Mamede" />
+				<AvatarFallback>Mamede</AvatarFallback>
+			{:else}
+				<AvatarImage src="/bot.jpg" alt="Coli" />
+				<AvatarFallback>Coli</AvatarFallback>
+			{/if}
 		</Avatar>
-	{/if}
 	{#if loading}
 		<div class="space-y-2">
 			<Skeleton class="h-4 w-[250px]" />
 			<Skeleton class="h-4 w-[200px]" />
 		</div>
 	{:else}
 		<p
-			class="rounded-md border px-4 py-3 text-sm  transition-colors duration-500 {isUser
-				? 'bg-green-200'
+			class="rounded-md border px-4 py-3 text-sm mx-2 transition-colors duration-500 {isUser
+				? 'bg-lime-100 hover:bg-lime-200'
 				: 'hover:bg-gray-100'}"
 		>
 			{@html DOMPurify.sanitize(marked.parse(message))}

src/lib/components/InstallPrompt.svelte

@@ -22,4 +22,4 @@
 	}
 </script>
 
-<Button on:click={installApp} variant="secondary" class="ml-auto mx-4">Install</Button>
+<Button on:click={installApp} variant="secondary" class="mr-4">Install PWA</Button>

src/lib/components/ReloadPrompt.svelte

@@ -18,20 +18,21 @@
 		offlineReady.set(false)
 		needRefresh.set(false)
 	}
-	$: toast = $offlineReady || $needRefresh
+	// $: toast = $offlineReady || $needRefresh
+	$: toast = $needRefresh
 </script>
 
 {#if toast}
 	<div class="pwa-toast" role="alert">
 		<div class="message">
 			{#if $offlineReady}
-				<span> 已可线下使用 <br /> App ready to work offline</span>
+				<span>App ready to work offline</span>
 			{:else}
-				<span> 有新的更新，点刷新 <br /> New Update. Click on reload button to update. </span>
+				<span>New Update. Click on reload button to update.</span>
 			{/if}
 		</div>
 		{#if $needRefresh}
-			<button on:click={() => updateServiceWorker(true)}> Reload 刷新 </button>
+			<button on:click={() => updateServiceWorker(true)}>Reload</button>
 		{/if}
 		<button on:click={close}> Close </button>
 	</div>

src/lib/components/ui/alert-dialog/AlertDialogHeader.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <div
-	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	class={cn("flex flex-col space-y-2", className)}
 	{...$$restProps}
 >
 	<slot />

src/lib/components/ui/textarea/Textarea.svelte

@@ -10,7 +10,7 @@
 
 <textarea
 	class={cn(
-		"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:value

src/lib/utils.ts

@@ -1,6 +1,10 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
-
+import { writable } from 'svelte/store';
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export const chatMessages = writable([]);
+export const query = writable('');

src/routes/+layout.svelte

@@ -2,8 +2,10 @@
 	import '../app.postcss'
 	import { page } from '$app/stores'
 	import { pwaInfo } from 'virtual:pwa-info'
+	import { Button } from '$components/ui/button'
 	import { onMount } from 'svelte'
 	import InstallPrompt from '$components/InstallPrompt.svelte'
+	import { chatMessages, query } from '$lib/utils'
 
 	$: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ''
 
@@ -12,84 +14,116 @@
 	let pwaInstallable = false
 	let pwaInstalled = false
 
-	onMount(async () => {
-		pwaInfo && (ReloadPrompt = (await import('$lib/components/ReloadPrompt.svelte')).default)
+	// onMount(async () => {
+	// 	pwaInfo && (ReloadPrompt = (await import('$lib/components/ReloadPrompt.svelte')).default)
 
-		window.addEventListener('DOMContentLoaded', async (event) => {
-			if ('BeforeInstallPromptEvent' in window) {
-				console.log('⏳ BeforeInstallPromptEvent supported but not fired yet')
-			} else {
-				console.log('❌ BeforeInstallPromptEvent NOT supported')
-			}
-		})
+	// 	window.addEventListener('DOMContentLoaded', async (event) => {
+	// 		if ('BeforeInstallPromptEvent' in window) {
+	// 			console.log('⏳ BeforeInstallPromptEvent supported but not fired yet')
+	// 		} else {
+	// 			console.log('❌ BeforeInstallPromptEvent NOT supported')
+	// 		}
+	// 	})
 
-		window.addEventListener('beforeinstallprompt', (e) => {
-			// Prevents the default mini-infobar or install dialog from appearing on mobile
-			e.preventDefault()
-			// Save the event because you’ll need to trigger it later.
-			deferredPrompt = e
-			pwaInstallable = true
-			// Show your customized install prompt for your PWA
-			console.log('✅ BeforeInstallPromptEvent fired', true)
-		})
+	// 	window.addEventListener('beforeinstallprompt', (e) => {
+	// 		// Prevents the default mini-infobar or install dialog from appearing on mobile
+	// 		e.preventDefault()
+	// 		// Save the event because you’ll need to trigger it later.
+	// 		deferredPrompt = e
+	// 		pwaInstallable = true
+	// 		// Show your customized install prompt for your PWA
+	// 		console.log('✅ BeforeInstallPromptEvent fired', true)
+	// 	})
 
-		window.addEventListener('appinstalled', (e) => {
-			pwaInstalled = true
-			console.log('✅ AppInstalled fired', true)
-		})
-	})
+	// 	window.addEventListener('appinstalled', (e) => {
+	// 		pwaInstalled = true
+	// 		console.log('✅ AppInstalled fired', true)
+	// 	})
+	// })
+
+	function handleClearConfirm() {
+		const confirm = window.confirm('Are you sure you want to clear the chat?')
+		if (!confirm) return
+		chatMessages.set([])
+		query.set('')
+		sessionStorage.removeItem('sveltekit:snapshot')
+	}
 </script>
 
 <svelte:head>
-	<title>亿点</title>
-	{@html webManifestLink}
+	<title>🎁 💬</title>
+	<!-- {@html webManifestLink} -->
 </svelte:head>
 
-<div class="h-[100vh] flex flex-col items-center max-w-4xl mx-auto">
-	<div class="text-2xl font-bold px-2 py-4 flex items-center justify-between w-full">
-		<a href="about" class="text-sm p-4">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="16"
-				height="16"
-				fill="currentColor"
-				class="bi bi-info-circle"
-				viewBox="0 0 16 16"
-			>
-				<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
-				<path
-					d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
-				/>
-			</svg>
-		</a>
-		<h1>亿点问</h1>
-		{#if pwaInstallable && !pwaInstalled}
-			<InstallPrompt {deferredPrompt} />
-		{:else}
-			<span />
-		{/if}
-	</div>
-	<slot />
-	{#if $page.route.id === '/about'}
-		<div class="h-full w-full grid place-items-center">
-			<button class="p-4" on:click={() => history.back()}>
+<div class="h-full flex flex-col items-center max-w-4xl mx-auto">
+	<div class="text-2xl font-bold p-4 flex items-center justify-between w-full">
+		{#if $page.route.id === '/about'}
+			<Button href="/" variant="secondary">
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
+					width="16"
+					height="16"
 					fill="none"
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="w-6 h-6"
 				>
 					<path
 						stroke-linecap="round"
 						stroke-linejoin="round"
 						d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
 					/>
 				</svg>
-			</button>
+				<span class="ml-2">Back</span>
+			</Button>
+		{:else}
+			<Button href="/about" variant="secondary">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="16"
+					height="16"
+					fill="currentColor"
+					class="bi bi-info-circle"
+					viewBox="0 0 16 16"
+				>
+					<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
+					<path
+						d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
+					/>
+				</svg>
+				<span class="ml-2">About</span>
+			</Button>
+		{/if}
+		<h1>🎁 💬</h1>
+		{#if $page.route.id != '/about'}
+			<div class="flex">
+				{#if pwaInstallable && !pwaInstalled}
+					<InstallPrompt {deferredPrompt} />
+				{/if}
+				<Button on:click={handleClearConfirm} variant="secondary">
+					<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="16"
+					height="16"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					>
+						<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+						/>
+					</svg>
+					<span class="ml-2">Restart</span>
+				</Button>
 		</div>
-	{/if}
+		{:else}
+			<span class="w-20"/>
+		{/if}
+	</div>
+	<slot />
 </div>
 
 {#if ReloadPrompt}