mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
feat(cli): upgrade to ai sdk v5 (#487)
This commit is contained in:
Aman Varshney
@@ -1,4 +1,4 @@
|
||||
import { useRef, useEffect } from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -9,11 +9,11 @@ import {
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
import { fetch as expoFetch } from "expo/fetch";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Container } from "@/components/container";
|
||||
|
||||
// Utility function to generate API URLs
|
||||
const generateAPIUrl = (relativePath: string) => {
|
||||
const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
|
||||
if (!serverUrl) {
|
||||
@@ -25,11 +25,13 @@ const generateAPIUrl = (relativePath: string) => {
|
||||
};
|
||||
|
||||
export default function AIScreen() {
|
||||
const { messages, input, handleInputChange, handleSubmit, error } = useChat({
|
||||
fetch: expoFetch as unknown as typeof globalThis.fetch,
|
||||
api: generateAPIUrl('/ai'),
|
||||
const [input, setInput] = useState("");
|
||||
const { messages, error, sendMessage } = useChat({
|
||||
transport: new DefaultChatTransport({
|
||||
fetch: expoFetch as unknown as typeof globalThis.fetch,
|
||||
api: generateAPIUrl('/ai'),
|
||||
}),
|
||||
onError: error => console.error(error, 'AI Chat Error'),
|
||||
maxSteps: 5,
|
||||
});
|
||||
|
||||
const scrollViewRef = useRef<ScrollView>(null);
|
||||
@@ -39,8 +41,10 @@ export default function AIScreen() {
|
||||
}, [messages]);
|
||||
|
||||
const onSubmit = () => {
|
||||
if (input.trim()) {
|
||||
handleSubmit();
|
||||
const value = input.trim();
|
||||
if (value) {
|
||||
sendMessage({ text: value });
|
||||
setInput("");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -100,9 +104,28 @@ export default function AIScreen() {
|
||||
<Text className="text-sm font-semibold mb-1 text-foreground">
|
||||
{message.role === "user" ? "You" : "AI Assistant"}
|
||||
</Text>
|
||||
<Text className="text-foreground leading-relaxed">
|
||||
{message.content}
|
||||
</Text>
|
||||
<View className="space-y-1">
|
||||
{message.parts.map((part, i) => {
|
||||
if (part.type === 'text') {
|
||||
return (
|
||||
<Text
|
||||
key={`${message.id}-${i}`}
|
||||
className="text-foreground leading-relaxed"
|
||||
>
|
||||
{part.text}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Text
|
||||
key={`${message.id}-${i}`}
|
||||
className="text-foreground leading-relaxed"
|
||||
>
|
||||
{JSON.stringify(part)}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
@@ -113,21 +136,13 @@ export default function AIScreen() {
|
||||
<View className="flex-row items-end space-x-2">
|
||||
<TextInput
|
||||
value={input}
|
||||
onChange={(e) =>
|
||||
handleInputChange({
|
||||
...e,
|
||||
target: {
|
||||
...e.target,
|
||||
value: e.nativeEvent.text,
|
||||
},
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>)
|
||||
}
|
||||
onChangeText={setInput}
|
||||
placeholder="Type your message..."
|
||||
placeholderTextColor="#6b7280"
|
||||
className="flex-1 border border-border rounded-md px-3 py-2 text-foreground bg-background min-h-[40px] max-h-[120px]"
|
||||
onSubmitEditing={(e) => {
|
||||
handleSubmit(e);
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}}
|
||||
autoFocus={true}
|
||||
/>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useRef, useEffect } from "react";
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
Platform,
|
||||
} from "react-native";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
import { fetch as expoFetch } from "expo/fetch";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
||||
@@ -18,21 +19,22 @@ const generateAPIUrl = (relativePath: string) => {
|
||||
const serverUrl = process.env.EXPO_PUBLIC_SERVER_URL;
|
||||
if (!serverUrl) {
|
||||
throw new Error(
|
||||
"EXPO_PUBLIC_SERVER_URL environment variable is not defined",
|
||||
"EXPO_PUBLIC_SERVER_URL environment variable is not defined"
|
||||
);
|
||||
}
|
||||
|
||||
const path = relativePath.startsWith("/") ? relativePath : `/${relativePath}`;
|
||||
return serverUrl.concat(path);
|
||||
};
|
||||
|
||||
export default function AIScreen() {
|
||||
const { theme } = useUnistyles();
|
||||
const { messages, input, handleInputChange, handleSubmit, error } = useChat({
|
||||
fetch: expoFetch as unknown as typeof globalThis.fetch,
|
||||
api: generateAPIUrl("/ai"),
|
||||
const [input, setInput] = useState("");
|
||||
const { messages, error, sendMessage } = useChat({
|
||||
transport: new DefaultChatTransport({
|
||||
fetch: expoFetch as unknown as typeof globalThis.fetch,
|
||||
api: generateAPIUrl("/ai"),
|
||||
}),
|
||||
onError: (error) => console.error(error, "AI Chat Error"),
|
||||
maxSteps: 5,
|
||||
});
|
||||
|
||||
const scrollViewRef = useRef<ScrollView>(null);
|
||||
@@ -42,8 +44,10 @@ export default function AIScreen() {
|
||||
}, [messages]);
|
||||
|
||||
const onSubmit = () => {
|
||||
if (input.trim()) {
|
||||
handleSubmit();
|
||||
const value = input.trim();
|
||||
if (value) {
|
||||
sendMessage({ text: value });
|
||||
setInput("");
|
||||
}
|
||||
};
|
||||
|
||||
@@ -100,7 +104,28 @@ export default function AIScreen() {
|
||||
<Text style={styles.messageRole}>
|
||||
{message.role === "user" ? "You" : "AI Assistant"}
|
||||
</Text>
|
||||
<Text style={styles.messageContent}>{message.content}</Text>
|
||||
<View style={styles.messageContentWrapper}>
|
||||
{message.parts.map((part, i) => {
|
||||
if (part.type === "text") {
|
||||
return (
|
||||
<Text
|
||||
key={`${message.id}-${i}`}
|
||||
style={styles.messageContent}
|
||||
>
|
||||
{part.text}
|
||||
</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Text
|
||||
key={`${message.id}-${i}`}
|
||||
style={styles.messageContent}
|
||||
>
|
||||
{JSON.stringify(part)}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
@@ -111,21 +136,13 @@ export default function AIScreen() {
|
||||
<View style={styles.inputContainer}>
|
||||
<TextInput
|
||||
value={input}
|
||||
onChange={(e) =>
|
||||
handleInputChange({
|
||||
...e,
|
||||
target: {
|
||||
...e.target,
|
||||
value: e.nativeEvent.text,
|
||||
},
|
||||
} as unknown as React.ChangeEvent<HTMLInputElement>)
|
||||
}
|
||||
onChangeText={setInput}
|
||||
placeholder="Type your message..."
|
||||
placeholderTextColor={theme.colors.border}
|
||||
style={styles.textInput}
|
||||
onSubmitEditing={(e) => {
|
||||
handleSubmit(e);
|
||||
e.preventDefault();
|
||||
onSubmit();
|
||||
}}
|
||||
autoFocus={true}
|
||||
/>
|
||||
@@ -141,7 +158,9 @@ export default function AIScreen() {
|
||||
name="send"
|
||||
size={20}
|
||||
color={
|
||||
input.trim() ? theme.colors.background : theme.colors.border
|
||||
input.trim()
|
||||
? theme.colors.background
|
||||
: theme.colors.border
|
||||
}
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
@@ -230,6 +249,9 @@ const styles = StyleSheet.create((theme) => ({
|
||||
marginBottom: theme.spacing.sm,
|
||||
color: theme.colors.typography,
|
||||
},
|
||||
messageContentWrapper: {
|
||||
gap: theme.spacing.xs,
|
||||
},
|
||||
messageContent: {
|
||||
color: theme.colors.typography,
|
||||
lineHeight: 20,
|
||||
@@ -276,4 +298,4 @@ const styles = StyleSheet.create((theme) => ({
|
||||
sendButtonDisabled: {
|
||||
backgroundColor: theme.colors.border,
|
||||
},
|
||||
}));
|
||||
}));
|
||||
@@ -1,15 +0,0 @@
|
||||
import { google } from '@ai-sdk/google';
|
||||
import { streamText } from 'ai';
|
||||
|
||||
export const maxDuration = 30;
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const { messages } = await req.json();
|
||||
|
||||
const result = streamText({
|
||||
model: google('gemini-2.0-flash'),
|
||||
messages,
|
||||
});
|
||||
|
||||
return result.toDataStreamResponse();
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { google } from '@ai-sdk/google';
|
||||
import { streamText, type UIMessage, convertToModelMessages } from 'ai';
|
||||
|
||||
export const maxDuration = 30;
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const { messages }: { messages: UIMessage[] } = await req.json();
|
||||
|
||||
const result = streamText({
|
||||
model: google('gemini-2.0-flash'),
|
||||
messages: convertToModelMessages(messages),
|
||||
});
|
||||
|
||||
return result.toUIMessageStreamResponse();
|
||||
}
|
||||
@@ -1,20 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { useChat } from '@ai-sdk/vue'
|
||||
import { Chat } from '@ai-sdk/vue'
|
||||
import { DefaultChatTransport } from 'ai'
|
||||
import { nextTick, ref, watch } from 'vue'
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const serverUrl = config.public.serverURL
|
||||
|
||||
const { messages, input, handleSubmit } = useChat({
|
||||
api: `${serverUrl}/ai`,
|
||||
const input = ref('')
|
||||
const chat = new Chat({
|
||||
transport: new DefaultChatTransport({
|
||||
api: `${serverUrl}/ai`,
|
||||
}),
|
||||
})
|
||||
|
||||
const messagesEndRef = ref<null | HTMLDivElement>(null)
|
||||
|
||||
watch(messages, async () => {
|
||||
await nextTick()
|
||||
messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
|
||||
})
|
||||
watch(
|
||||
() => chat.messages,
|
||||
async () => {
|
||||
await nextTick()
|
||||
messagesEndRef.value?.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
)
|
||||
|
||||
const handleSubmit = (e: Event) => {
|
||||
e.preventDefault()
|
||||
const text = input.value.trim()
|
||||
if (!text) return
|
||||
chat.sendMessage({ text })
|
||||
input.value = ''
|
||||
}
|
||||
|
||||
function getMessageText(message: any) {
|
||||
return message.parts
|
||||
@@ -27,11 +42,11 @@ function getMessageText(message: any) {
|
||||
<template>
|
||||
<div class="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
|
||||
<div class="overflow-y-auto space-y-4 pb-4">
|
||||
<div v-if="messages.length === 0" class="text-center text-muted-foreground mt-8">
|
||||
<div v-if="chat.messages.length === 0" class="text-center text-muted-foreground mt-8">
|
||||
Ask me anything to get started!
|
||||
</div>
|
||||
<div
|
||||
v-for="message in messages"
|
||||
v-for="message in chat.messages"
|
||||
:key="message.id"
|
||||
:class="[
|
||||
'p-3 rounded-lg',
|
||||
@@ -39,14 +54,14 @@ function getMessageText(message: any) {
|
||||
]"
|
||||
>
|
||||
<p class="text-sm font-semibold mb-1">
|
||||
{{ message.role === 'user' ? 'You' : 'AI Assistant' }}
|
||||
\{{ message.role === 'user' ? 'You' : 'AI Assistant' }}
|
||||
</p>
|
||||
<div class="whitespace-pre-wrap">{{ getMessageText(message) }}</div>
|
||||
<div class="whitespace-pre-wrap">\{{ getMessageText(message) }}</div>
|
||||
</div>
|
||||
<div ref="messagesEndRef" />
|
||||
<div ref="messagesEndRef"></div>
|
||||
</div>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
|
||||
<form @submit="handleSubmit" class="w-full flex items-center space-x-2 pt-2 border-t">
|
||||
<UInput
|
||||
name="prompt"
|
||||
v-model="input"
|
||||
@@ -60,4 +75,4 @@ function getMessageText(message: any) {
|
||||
</UButton>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
@@ -1,15 +1,18 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Send } from "lucide-react";
|
||||
import { useRef, useEffect } from "react";
|
||||
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
|
||||
export default function AIPage() {
|
||||
const { messages, input, handleInputChange, handleSubmit } = useChat({
|
||||
api: `${process.env.NEXT_PUBLIC_SERVER_URL}/ai`,
|
||||
const [input, setInput] = useState("");
|
||||
const { messages, sendMessage } = useChat({
|
||||
transport: new DefaultChatTransport({
|
||||
api: `${process.env.NEXT_PUBLIC_SERVER_URL}/ai`,
|
||||
}),
|
||||
});
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
@@ -18,6 +21,14 @@ export default function AIPage() {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
sendMessage({ text });
|
||||
setInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
|
||||
<div className="overflow-y-auto space-y-4 pb-4">
|
||||
@@ -38,7 +49,16 @@ export default function AIPage() {
|
||||
<p className="text-sm font-semibold mb-1">
|
||||
{message.role === "user" ? "You" : "AI Assistant"}
|
||||
</p>
|
||||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||||
{message.parts?.map((part, index) => {
|
||||
if (part.type === "text") {
|
||||
return (
|
||||
<div key={index} className="whitespace-pre-wrap">
|
||||
{part.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
@@ -52,7 +72,7 @@ export default function AIPage() {
|
||||
<Input
|
||||
name="prompt"
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Type your message..."
|
||||
className="flex-1"
|
||||
autoComplete="off"
|
||||
@@ -64,4 +84,4 @@ export default function AIPage() {
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,16 @@
|
||||
import React, { useRef, useEffect, useState } from "react";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Send } from "lucide-react";
|
||||
import { useRef, useEffect } from "react";
|
||||
|
||||
export default function AI() {
|
||||
const { messages, input, handleInputChange, handleSubmit } = useChat({
|
||||
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
|
||||
const AI: React.FC = () => {
|
||||
const [input, setInput] = useState("");
|
||||
const { messages, sendMessage } = useChat({
|
||||
transport: new DefaultChatTransport({
|
||||
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
|
||||
}),
|
||||
});
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
@@ -15,6 +19,14 @@ export default function AI() {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
sendMessage({ text });
|
||||
setInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
|
||||
<div className="overflow-y-auto space-y-4 pb-4">
|
||||
@@ -35,7 +47,16 @@ export default function AI() {
|
||||
<p className="text-sm font-semibold mb-1">
|
||||
{message.role === "user" ? "You" : "AI Assistant"}
|
||||
</p>
|
||||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||||
{message.parts?.map((part, index) => {
|
||||
if (part.type === "text") {
|
||||
return (
|
||||
<div key={index} className="whitespace-pre-wrap">
|
||||
{part.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
@@ -49,7 +70,7 @@ export default function AI() {
|
||||
<Input
|
||||
name="prompt"
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Type your message..."
|
||||
className="flex-1"
|
||||
autoComplete="off"
|
||||
@@ -61,4 +82,6 @@ export default function AI() {
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default AI;
|
||||
@@ -1,17 +1,21 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Send } from "lucide-react";
|
||||
import { useRef, useEffect } from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
|
||||
export const Route = createFileRoute("/ai")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { messages, input, handleInputChange, handleSubmit } = useChat({
|
||||
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
|
||||
const [input, setInput] = useState("");
|
||||
const { messages, sendMessage } = useChat({
|
||||
transport: new DefaultChatTransport({
|
||||
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
|
||||
}),
|
||||
});
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
@@ -20,6 +24,14 @@ function RouteComponent() {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
sendMessage({ text });
|
||||
setInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
|
||||
<div className="overflow-y-auto space-y-4 pb-4">
|
||||
@@ -40,7 +52,16 @@ function RouteComponent() {
|
||||
<p className="text-sm font-semibold mb-1">
|
||||
{message.role === "user" ? "You" : "AI Assistant"}
|
||||
</p>
|
||||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||||
{message.parts?.map((part, index) => {
|
||||
if (part.type === "text") {
|
||||
return (
|
||||
<div key={index} className="whitespace-pre-wrap">
|
||||
{part.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
@@ -54,7 +75,7 @@ function RouteComponent() {
|
||||
<Input
|
||||
name="prompt"
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Type your message..."
|
||||
className="flex-1"
|
||||
autoComplete="off"
|
||||
@@ -1,17 +1,21 @@
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useChat } from "@ai-sdk/react";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Send } from "lucide-react";
|
||||
import { useRef, useEffect } from "react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
|
||||
export const Route = createFileRoute("/ai")({
|
||||
component: RouteComponent,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { messages, input, handleInputChange, handleSubmit } = useChat({
|
||||
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
|
||||
const [input, setInput] = useState("");
|
||||
const { messages, sendMessage } = useChat({
|
||||
transport: new DefaultChatTransport({
|
||||
api: `${import.meta.env.VITE_SERVER_URL}/ai`,
|
||||
}),
|
||||
});
|
||||
|
||||
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||
@@ -20,6 +24,14 @@ function RouteComponent() {
|
||||
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [messages]);
|
||||
|
||||
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
sendMessage({ text });
|
||||
setInput("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-rows-[1fr_auto] overflow-hidden w-full mx-auto p-4">
|
||||
<div className="overflow-y-auto space-y-4 pb-4">
|
||||
@@ -40,7 +52,16 @@ function RouteComponent() {
|
||||
<p className="text-sm font-semibold mb-1">
|
||||
{message.role === "user" ? "You" : "AI Assistant"}
|
||||
</p>
|
||||
<div className="whitespace-pre-wrap">{message.content}</div>
|
||||
{message.parts?.map((part, index) => {
|
||||
if (part.type === "text") {
|
||||
return (
|
||||
<div key={index} className="whitespace-pre-wrap">
|
||||
{part.text}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
@@ -54,7 +75,7 @@ function RouteComponent() {
|
||||
<Input
|
||||
name="prompt"
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
placeholder="Type your message..."
|
||||
className="flex-1"
|
||||
autoComplete="off"
|
||||
@@ -66,4 +87,4 @@ function RouteComponent() {
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { PUBLIC_SERVER_URL } from '$env/static/public';
|
||||
import { Chat } from '@ai-sdk/svelte';
|
||||
|
||||
const chat = new Chat({
|
||||
api: `${PUBLIC_SERVER_URL}/ai`,
|
||||
});
|
||||
|
||||
let messagesEndElement: HTMLDivElement | null = null;
|
||||
|
||||
$effect(() => {
|
||||
const messageCount = chat.messages.length;
|
||||
if (messageCount > 0) {
|
||||
setTimeout(() => {
|
||||
messagesEndElement?.scrollIntoView({ behavior: 'smooth' });
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<div class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4">
|
||||
<div class="mb-4 space-y-4 overflow-y-auto pb-4">
|
||||
{#if chat.messages.length === 0}
|
||||
<div class="mt-8 text-center text-neutral-500">Ask the AI anything to get started!</div>
|
||||
{/if}
|
||||
|
||||
{#each chat.messages as message (message.id)}
|
||||
<div
|
||||
class="w-fit max-w-[85%] rounded-lg p-3 text-sm md:text-base"
|
||||
class:ml-auto={message.role === 'user'}
|
||||
class:bg-indigo-600={message.role === 'user'}
|
||||
class:text-white={message.role === 'user'}
|
||||
class:bg-neutral-700={message.role === 'assistant'}
|
||||
class:text-neutral-100={message.role === 'assistant'}
|
||||
>
|
||||
<p
|
||||
class="mb-1 text-xs font-semibold uppercase tracking-wide"
|
||||
class:text-indigo-200={message.role === 'user'}
|
||||
class:text-neutral-400={message.role === 'assistant'}
|
||||
>
|
||||
{message.role === 'user' ? 'You' : 'AI Assistant'}
|
||||
</p>
|
||||
<div class="whitespace-pre-wrap break-words">
|
||||
{#each message.parts as part, partIndex (partIndex)}
|
||||
{#if part.type === 'text'}
|
||||
{part.text}
|
||||
{:else if part.type === 'tool-invocation'}
|
||||
<pre class="mt-2 rounded bg-neutral-800 p-2 text-xs text-neutral-300"
|
||||
>{JSON.stringify(part.toolInvocation, null, 2)}</pre
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<div bind:this={messagesEndElement}></div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onsubmit={chat.handleSubmit}
|
||||
class="flex w-full items-center space-x-2 border-t border-neutral-700 pt-4"
|
||||
>
|
||||
<input
|
||||
name="prompt"
|
||||
bind:value={chat.input}
|
||||
placeholder="Type your message..."
|
||||
class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
|
||||
autocomplete="off"
|
||||
onkeydown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
chat.handleSubmit(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!chat.input.trim()}
|
||||
class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
aria-label="Send message"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m22 2-7 20-4-9-9-4Z" /><path d="M22 2 11 13" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,107 @@
|
||||
<script lang="ts">
|
||||
import { PUBLIC_SERVER_URL } from "$env/static/public";
|
||||
import { Chat } from "@ai-sdk/svelte";
|
||||
import { DefaultChatTransport } from "ai";
|
||||
|
||||
let input = $state("");
|
||||
const chat = new Chat({
|
||||
transport: new DefaultChatTransport({
|
||||
api: `${PUBLIC_SERVER_URL}/ai`,
|
||||
}),
|
||||
});
|
||||
|
||||
let messagesEndElement: HTMLDivElement | null = null;
|
||||
|
||||
$effect(() => {
|
||||
if (chat.messages.length > 0) {
|
||||
setTimeout(() => {
|
||||
messagesEndElement?.scrollIntoView({ behavior: "smooth" });
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
|
||||
function handleSubmit(e: Event) {
|
||||
e.preventDefault();
|
||||
const text = input.trim();
|
||||
if (!text) return;
|
||||
chat.sendMessage({ text });
|
||||
input = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="mx-auto grid h-full w-full max-w-2xl grid-rows-[1fr_auto] overflow-hidden p-4"
|
||||
>
|
||||
<div class="mb-4 space-y-4 overflow-y-auto pb-4">
|
||||
{#if chat.messages.length === 0}
|
||||
<div class="mt-8 text-center text-neutral-500">
|
||||
Ask me anything to get started!
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each chat.messages as message (message.id)}
|
||||
<div
|
||||
class="p-3 rounded-lg w-fit max-w-[85%] text-sm md:text-base"
|
||||
class:ml-auto={message.role === "user"}
|
||||
class:bg-primary={message.role === "user"}
|
||||
class:bg-secondary={message.role === "assistant"}
|
||||
>
|
||||
<p
|
||||
class="mb-1 text-sm font-semibold"
|
||||
class:text-indigo-600={message.role === "user"}
|
||||
class:text-neutral-400={message.role === "assistant"}
|
||||
>
|
||||
{message.role === "user" ? "You" : "AI Assistant"}
|
||||
</p>
|
||||
<div class="whitespace-pre-wrap break-words">
|
||||
{#each message.parts as part, partIndex (partIndex)}
|
||||
{#if part.type === "text"}
|
||||
{part.text}
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<div bind:this={messagesEndElement}></div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onsubmit={handleSubmit}
|
||||
class="w-full flex items-center space-x-2 pt-2 border-t"
|
||||
>
|
||||
<input
|
||||
name="prompt"
|
||||
bind:value={input}
|
||||
placeholder="Type your message..."
|
||||
class="flex-1 rounded border border-neutral-600 bg-neutral-800 px-3 py-2 text-neutral-100 placeholder-neutral-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:opacity-50"
|
||||
autocomplete="off"
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!input.trim()}
|
||||
class="inline-flex h-10 w-10 items-center justify-center rounded bg-indigo-600 text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-neutral-900 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
aria-label="Send message"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m22 2-7 20-4-9-9-4Z" />
|
||||
<path d="M22 2 11 13" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
Reference in New Issue
Block a user