Spaces:
Sleeping
Sleeping
Commit
•
6bcab4c
1
Parent(s):
78ebb49
feat: loading state for sample image (#55)
Browse files- app/chat/page.tsx +11 -1
app/chat/page.tsx
CHANGED
@@ -16,6 +16,8 @@ import { Button } from '@/components/ui/Button';
|
|
16 |
import Img from '@/components/ui/Img';
|
17 |
import { MessageRaw } from '@/lib/db/types';
|
18 |
import { dbPostCreateChat } from '@/lib/db/functions';
|
|
|
|
|
19 |
|
20 |
// const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
|
21 |
const EXAMPLE_URL =
|
@@ -49,6 +51,7 @@ const exampleMessages = [
|
|
49 |
|
50 |
export default function Page() {
|
51 |
const router = useRouter();
|
|
|
52 |
return (
|
53 |
<div className="mx-auto max-w-2xl px-4 mt-8">
|
54 |
<div className="rounded-lg border bg-background p-8 mb-6">
|
@@ -90,19 +93,26 @@ export default function Page() {
|
|
90 |
{exampleMessages.map((example, index) => (
|
91 |
<div
|
92 |
key={index}
|
93 |
-
className={`cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
|
94 |
index > 1 && 'hidden md:block'
|
95 |
}`}
|
96 |
onClick={async () => {
|
|
|
97 |
const resp = await dbPostCreateChat({
|
98 |
mediaUrl: example.url,
|
99 |
initMessages: example.initMessages,
|
100 |
});
|
|
|
101 |
if (resp) {
|
102 |
router.push(`/chat/${resp.id}`);
|
103 |
}
|
104 |
}}
|
105 |
>
|
|
|
|
|
|
|
|
|
|
|
106 |
<Img src={example.url} alt="example images" className="w-1/4" />
|
107 |
<div className="flex items-start flex-col h-full ml-3 w-3/4">
|
108 |
<div className="text-sm font-semibold">{example.heading}</div>
|
|
|
16 |
import Img from '@/components/ui/Img';
|
17 |
import { MessageRaw } from '@/lib/db/types';
|
18 |
import { dbPostCreateChat } from '@/lib/db/functions';
|
19 |
+
import { useState } from 'react';
|
20 |
+
import Loading from '@/components/ui/Loading';
|
21 |
|
22 |
// const EXAMPLE_URL = 'https://landing-lens-support.s3.us-east-2.amazonaws.com/vision-agent-examples/cereal-example.jpg';
|
23 |
const EXAMPLE_URL =
|
|
|
51 |
|
52 |
export default function Page() {
|
53 |
const router = useRouter();
|
54 |
+
const [isUploading, setUploading] = useState<false | Number>(false);
|
55 |
return (
|
56 |
<div className="mx-auto max-w-2xl px-4 mt-8">
|
57 |
<div className="rounded-lg border bg-background p-8 mb-6">
|
|
|
93 |
{exampleMessages.map((example, index) => (
|
94 |
<div
|
95 |
key={index}
|
96 |
+
className={`relative cursor-pointer rounded-lg border bg-white p-4 hover:bg-zinc-50 dark:bg-zinc-950 dark:hover:bg-zinc-900 flex items-center size-full ${
|
97 |
index > 1 && 'hidden md:block'
|
98 |
}`}
|
99 |
onClick={async () => {
|
100 |
+
setUploading(index);
|
101 |
const resp = await dbPostCreateChat({
|
102 |
mediaUrl: example.url,
|
103 |
initMessages: example.initMessages,
|
104 |
});
|
105 |
+
setUploading(false);
|
106 |
if (resp) {
|
107 |
router.push(`/chat/${resp.id}`);
|
108 |
}
|
109 |
}}
|
110 |
>
|
111 |
+
{isUploading === index && (
|
112 |
+
<div className="absolute top-0 left-0 size-full flex items-center justify-center bg-white/60">
|
113 |
+
<Loading />
|
114 |
+
</div>
|
115 |
+
)}
|
116 |
<Img src={example.url} alt="example images" className="w-1/4" />
|
117 |
<div className="flex items-start flex-col h-full ml-3 w-3/4">
|
118 |
<div className="text-sm font-semibold">{example.heading}</div>
|