Compare commits
8 Commits
e25fc39bac
...
aiassistan
| Author | SHA1 | Date | |
|---|---|---|---|
| 64bd5c429e | |||
| 52e0a65113 | |||
| 30e3dbb42b | |||
| caa9604704 | |||
| c62ee37538 | |||
| ead9548744 | |||
| c5b3ee3875 | |||
| 2b5c105abb |
@@ -2,21 +2,12 @@
|
|||||||
import { useRouter } from 'next/navigation'
|
import { useRouter } from 'next/navigation'
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
|
||||||
import ChatInterface from '~/app/chat/_components/ChatInterface'
|
import ChatInterface from '~/app/chat/_components/ChatInterface'
|
||||||
|
import { useMessages } from '~/app/_providers/MessagesProvider';
|
||||||
|
import { Spinner } from '~/components/ui/spinner';
|
||||||
|
|
||||||
type DBMessage = {
|
export default function ChatModal() {
|
||||||
id: string
|
|
||||||
role: 'user' | 'assistant'
|
|
||||||
content: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ChatModalProps {
|
|
||||||
sessionId?: string
|
|
||||||
// initialMessages: DBMessage[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function ChatModal({ sessionId }: ChatModalProps) {
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const {messages,session,isLoading,error} = useMessages()
|
||||||
return (
|
return (
|
||||||
<Dialog modal={true} open onOpenChange={() => router.back()}>
|
<Dialog modal={true} open onOpenChange={() => router.back()}>
|
||||||
<DialogContent className="w-full max-w-full rounded-none sm:max-w-full h-[100svh] lg:max-w-3xl lg:rounded-xl lg:h-[80vh] flex flex-col p-0 gap-0">
|
<DialogContent className="w-full max-w-full rounded-none sm:max-w-full h-[100svh] lg:max-w-3xl lg:rounded-xl lg:h-[80vh] flex flex-col p-0 gap-0">
|
||||||
@@ -24,7 +15,15 @@ export default function ChatModal({ sessionId }: ChatModalProps) {
|
|||||||
<DialogTitle>Talk To My AI-Assistant</DialogTitle>
|
<DialogTitle>Talk To My AI-Assistant</DialogTitle>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<div className="flex-1 overflow-hidden min-h-0">
|
<div className="flex-1 overflow-hidden min-h-0">
|
||||||
<ChatInterface sessionId={sessionId} />
|
{!isLoading &&
|
||||||
|
<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
|
||||||
|
}
|
||||||
|
{isLoading &&
|
||||||
|
<><Spinner/> Loading Messages...</>
|
||||||
|
}
|
||||||
|
{error &&
|
||||||
|
<div> {error} </div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|||||||
@@ -1,16 +1,8 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import { Skeleton } from '~/components/ui/skeleton';
|
|
||||||
import ChatModal from './_components/ChatModal'
|
import ChatModal from './_components/ChatModal'
|
||||||
import { trpc } from '~/app/_trpc/Client'
|
|
||||||
import { useTimeLine } from '~/app/_providers/GsapProvicer';
|
|
||||||
|
|
||||||
export default function AssistantModalPage() {
|
export default function AssistantModalPage() {
|
||||||
const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
|
|
||||||
return (
|
return (
|
||||||
<>
|
<ChatModal/>
|
||||||
&& <ChatModal sessionId={session?.id} />
|
|
||||||
{error && <div>{error.message}</div>}
|
|
||||||
{isLoading && <Skeleton />}
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { MessageCircle } from 'lucide-react'
|
import { MessageCircle } from 'lucide-react'
|
||||||
import { Show } from '@clerk/nextjs'
|
|
||||||
import { Button } from '~/components/ui/button'
|
import { Button } from '~/components/ui/button'
|
||||||
import { usePathname } from 'next/navigation'
|
import { usePathname } from 'next/navigation'
|
||||||
export default function ChatFAB() {
|
export default function ChatFAB() {
|
||||||
@@ -10,7 +9,6 @@ export default function ChatFAB() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{!isChat &&
|
{!isChat &&
|
||||||
<Show when="signed-in">
|
|
||||||
<div className="fixed bottom-6 right-6 z-50">
|
<div className="fixed bottom-6 right-6 z-50">
|
||||||
<Button asChild size="icon" className="h-14 w-14 rounded-full shadow-lg">
|
<Button asChild size="icon" className="h-14 w-14 rounded-full shadow-lg">
|
||||||
<Link href="/assistant">
|
<Link href="/assistant">
|
||||||
@@ -18,7 +16,6 @@ export default function ChatFAB() {
|
|||||||
</Link>
|
</Link>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
|
||||||
}
|
}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
|
|||||||
95
src/app/_providers/MessagesProvider.tsx
Normal file
95
src/app/_providers/MessagesProvider.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
'use client'
|
||||||
|
import type { inferRouterOutputs } from '@trpc/server';
|
||||||
|
import { useUser } from '@clerk/nextjs'
|
||||||
|
import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
|
||||||
|
import { trpc } from '~/app/_trpc/Client'
|
||||||
|
import { type ChatRouter } from '~/server/routers/chat'
|
||||||
|
const MessageContext = createContext<{
|
||||||
|
session?: inferRouterOutputs<ChatRouter>['getSession']
|
||||||
|
messages?: inferRouterOutputs<ChatRouter>['getMessages']
|
||||||
|
refetchMessages: () => void
|
||||||
|
clearChat: (callback?: () => void) => void
|
||||||
|
error: string|null
|
||||||
|
isLoading: boolean
|
||||||
|
clearingChat: boolean
|
||||||
|
clearedChat: boolean
|
||||||
|
}>({
|
||||||
|
session: undefined,
|
||||||
|
messages: undefined,
|
||||||
|
refetchMessages: () => undefined,
|
||||||
|
clearChat: () => undefined,
|
||||||
|
error: null,
|
||||||
|
isLoading: true,
|
||||||
|
clearingChat: false,
|
||||||
|
clearedChat: false
|
||||||
|
})
|
||||||
|
export const useMessages = () => useContext(MessageContext)
|
||||||
|
export const MessagesProvider = ({children}:{children:ReactNode}) => {
|
||||||
|
const [error,setError] = useState<string|null>(null)
|
||||||
|
const [isLoading,setIsLoading] = useState<boolean>(true)
|
||||||
|
const { isLoaded, isSignedIn } = useUser()
|
||||||
|
const { data: session,error:sessionError,isLoading:sessionLoading} = trpc.chat.getSession.useQuery(undefined, {
|
||||||
|
enabled: isSignedIn === true,
|
||||||
|
})
|
||||||
|
const { data: messages, refetch, error:messageError, isLoading:messagesLoading } = trpc.chat.getMessages.useQuery(session?.id ? session.id : "", {
|
||||||
|
enabled: isSignedIn === true && session?.id != undefined,
|
||||||
|
})
|
||||||
|
const { mutate ,isPending:clearingChat,isSuccess:clearedChat } = trpc.chat.clearChat.useMutation()
|
||||||
|
const utils = trpc.useUtils()
|
||||||
|
const refetchMessages = () => {
|
||||||
|
if (!isSignedIn) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
utils.chat.getMessages.invalidate()
|
||||||
|
refetch()
|
||||||
|
}
|
||||||
|
const clearChat = (callback?: () => void) => {
|
||||||
|
if (!isSignedIn) {
|
||||||
|
if (callback) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
mutate(undefined,{onSuccess: () => {
|
||||||
|
if (callback) {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
utils.chat.getMessages.invalidate()
|
||||||
|
}})
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if (isSignedIn !== true) {
|
||||||
|
setError(null)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
messageError && setError(messageError.message)
|
||||||
|
sessionError && setError(sessionError.message)
|
||||||
|
},[messageError,sessionError,isSignedIn])
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isLoaded) {
|
||||||
|
setIsLoading(true)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isSignedIn !== true) {
|
||||||
|
setIsLoading(false)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsLoading(sessionLoading || messagesLoading)
|
||||||
|
},[isLoaded,isSignedIn,sessionLoading,messagesLoading])
|
||||||
|
return (
|
||||||
|
<MessageContext.Provider value={
|
||||||
|
{
|
||||||
|
session: isSignedIn === true ? session : undefined,
|
||||||
|
messages: isSignedIn === true ? messages : undefined,
|
||||||
|
refetchMessages,
|
||||||
|
clearChat,
|
||||||
|
error,
|
||||||
|
isLoading,
|
||||||
|
clearingChat,
|
||||||
|
clearedChat
|
||||||
|
}
|
||||||
|
}>
|
||||||
|
{children}
|
||||||
|
</MessageContext.Provider>
|
||||||
|
)
|
||||||
|
}
|
||||||
8
src/app/actions/currentTime.ts
Normal file
8
src/app/actions/currentTime.ts
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
export default function currentTime() {
|
||||||
|
let now = Date.now();
|
||||||
|
console.log(now);
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
time: now
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
'use server'
|
'use server'
|
||||||
import { clerkClient } from '@clerk/nextjs/server'
|
import { clerkClient, auth } from '@clerk/nextjs/server'
|
||||||
import { google } from 'googleapis'
|
import { google } from 'googleapis'
|
||||||
import { env } from '~/env'
|
import { env } from '~/env'
|
||||||
|
|
||||||
@@ -10,7 +10,6 @@ export async function scheduleMeeting({
|
|||||||
durationMinutes,
|
durationMinutes,
|
||||||
attendeeEmail,
|
attendeeEmail,
|
||||||
attendeeName,
|
attendeeName,
|
||||||
userId,
|
|
||||||
}: {
|
}: {
|
||||||
title: string
|
title: string
|
||||||
description: string
|
description: string
|
||||||
@@ -18,11 +17,11 @@ export async function scheduleMeeting({
|
|||||||
durationMinutes: number
|
durationMinutes: number
|
||||||
attendeeEmail?: string
|
attendeeEmail?: string
|
||||||
attendeeName?: string
|
attendeeName?: string
|
||||||
userId: string
|
|
||||||
}) {
|
}) {
|
||||||
try {
|
try {
|
||||||
const clerk = await clerkClient()
|
const clerk = await clerkClient()
|
||||||
|
const userAuth = await auth()
|
||||||
|
const user = await clerk.users.getUser(userAuth.userId?userAuth.userId:"")
|
||||||
// Get admin's Google OAuth token to create the event on Gregor's calendar
|
// Get admin's Google OAuth token to create the event on Gregor's calendar
|
||||||
const adminTokenResponse = await clerk.users.getUserOauthAccessToken(
|
const adminTokenResponse = await clerk.users.getUserOauthAccessToken(
|
||||||
env.ADMIN_USER_CLERK_ID,
|
env.ADMIN_USER_CLERK_ID,
|
||||||
@@ -37,16 +36,7 @@ export async function scheduleMeeting({
|
|||||||
// Try to resolve visitor's Google email for the invite
|
// Try to resolve visitor's Google email for the invite
|
||||||
let visitorEmail: string | undefined = attendeeEmail
|
let visitorEmail: string | undefined = attendeeEmail
|
||||||
if (!visitorEmail) {
|
if (!visitorEmail) {
|
||||||
try {
|
visitorEmail = user?.emailAddresses.at(0)?.emailAddress ?? undefined
|
||||||
const visitorTokenResponse = await clerk.users.getUserOauthAccessToken(userId, 'oauth_google')
|
|
||||||
if (visitorTokenResponse.data[0]) {
|
|
||||||
const user = await clerk.users.getUser(userId)
|
|
||||||
const googleAccount = user.externalAccounts.find((a) => a.provider === 'google')
|
|
||||||
visitorEmail = googleAccount?.emailAddress ?? undefined
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// Visitor not signed in with Google — no invite
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const oAuth2Client = new google.auth.OAuth2()
|
const oAuth2Client = new google.auth.OAuth2()
|
||||||
@@ -71,6 +61,7 @@ export async function scheduleMeeting({
|
|||||||
end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
|
end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
|
||||||
attendees,
|
attendees,
|
||||||
},
|
},
|
||||||
|
sendNotifications: true
|
||||||
})
|
})
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ import { db } from '~/server/db'
|
|||||||
import { chatSession, chatMessage } from '~/server/dbschema/schema'
|
import { chatSession, chatMessage } from '~/server/dbschema/schema'
|
||||||
import { servTrpc } from '~/app/_trpc/ServerClient'
|
import { servTrpc } from '~/app/_trpc/ServerClient'
|
||||||
import { scheduleMeeting } from '~/app/actions/scheduleMeeting'
|
import { scheduleMeeting } from '~/app/actions/scheduleMeeting'
|
||||||
|
import currentTime from '~/app/actions/currentTime';
|
||||||
|
|
||||||
const openai = createOpenAI({ apiKey: env.OPENAI_API_KEY })
|
const openai = createOpenAI({ apiKey: env.OPENAI_API_KEY })
|
||||||
|
|
||||||
@@ -45,15 +46,15 @@ export async function POST(req: Request) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const result = streamText({
|
const result = streamText({
|
||||||
model: openai('gpt-4o'),
|
model: openai('gpt-5-mini'),
|
||||||
system: systemPrompt,
|
system: systemPrompt,
|
||||||
messages: await convertToModelMessages(messages),
|
messages: await convertToModelMessages(messages),
|
||||||
tools: {
|
tools: {
|
||||||
scheduleMeeting: tool({
|
scheduleMeeting: tool({
|
||||||
description: 'Schedule a meeting with Gregor Lohaus and add it to his Google Calendar',
|
description: 'Schedule a meeting with Gregor Lohaus and add it to his Google Calendar',
|
||||||
inputSchema: z.object({
|
inputSchema: z.object({
|
||||||
title: z.string().describe('Meeting title'),
|
title: z.string().describe('Meeting title, make something up if not provided'),
|
||||||
description: z.string().describe('Meeting description / agenda'),
|
description: z.string().describe('Meeting description / agenda, make something up if not provided'),
|
||||||
dateTime: z
|
dateTime: z
|
||||||
.string()
|
.string()
|
||||||
.describe(
|
.describe(
|
||||||
@@ -64,20 +65,22 @@ export async function POST(req: Request) {
|
|||||||
.int()
|
.int()
|
||||||
.min(15)
|
.min(15)
|
||||||
.max(120)
|
.max(120)
|
||||||
.describe('Duration of the meeting in minutes'),
|
.describe('Duration of the meeting in minutes, if none provided ask if 20 minutes is ok'),
|
||||||
attendeeEmail: z
|
attendeeEmail: z
|
||||||
.string()
|
.string()
|
||||||
.email()
|
.email()
|
||||||
.optional()
|
.optional()
|
||||||
.describe('Email of the visitor to invite (if provided)'),
|
.describe('Optional Email of the visitor to invite (if provided)'),
|
||||||
attendeeName: z.string().optional().describe('Name of the visitor'),
|
attendeeName: z.string().optional().describe('Name of the visitor'),
|
||||||
}),
|
}),
|
||||||
execute: async (input) => scheduleMeeting({ ...input, userId }),
|
execute: async (input) => scheduleMeeting({ ...input }),
|
||||||
}),
|
}),
|
||||||
getCurrentUnixTime: tool({
|
getCurrentUnixTime: tool({
|
||||||
description: 'Get the current unix time to reference for meeting dates',
|
description: 'Get the current unix time to reference for meeting dates',
|
||||||
inputSchema: z.undefined(),
|
inputSchema: z.object({
|
||||||
execute: async () => { return {success: true, currentTime: Date.now()} }
|
none: z.string().optional().describe("no inputs are needed")
|
||||||
|
}),
|
||||||
|
execute: async () => currentTime()
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
stopWhen: stepCountIs(5),
|
stopWhen: stepCountIs(5),
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ export const AssistantMessage = (props: { message: UIMessage }) => {
|
|||||||
{message.parts.map((part, i) => {
|
{message.parts.map((part, i) => {
|
||||||
if (part.type === 'text') {
|
if (part.type === 'text') {
|
||||||
return (
|
return (
|
||||||
<Markdown key={i}>
|
<Markdown>
|
||||||
{part.text}
|
{part.text}
|
||||||
</Markdown>
|
</Markdown>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -4,13 +4,14 @@ import { useChat } from '@ai-sdk/react'
|
|||||||
import { DefaultChatTransport, type UIMessage } from 'ai'
|
import { DefaultChatTransport, type UIMessage } from 'ai'
|
||||||
import { Button } from '~/components/ui/button'
|
import { Button } from '~/components/ui/button'
|
||||||
import { Textarea } from '~/components/ui/textarea'
|
import { Textarea } from '~/components/ui/textarea'
|
||||||
|
import { SignInButton } from '@clerk/nextjs'
|
||||||
import {
|
import {
|
||||||
useGsapContext,
|
useGsapContext,
|
||||||
} from '~/app/_providers/GsapProvicer';
|
} from '~/app/_providers/GsapProvicer';
|
||||||
import Messages from './Messages'
|
import Messages from './Messages'
|
||||||
import { DeleteIcon } from 'lucide-react';
|
import { DeleteIcon } from 'lucide-react';
|
||||||
import { trpc } from '~/app/_trpc/Client'
|
|
||||||
import { Spinner } from '~/components/ui/spinner';
|
import { Spinner } from '~/components/ui/spinner';
|
||||||
|
import { useMessages } from '~/app/_providers/MessagesProvider';
|
||||||
interface DBMessage {
|
interface DBMessage {
|
||||||
id: string
|
id: string
|
||||||
role: 'user' | 'assistant'
|
role: 'user' | 'assistant'
|
||||||
@@ -18,8 +19,24 @@ interface DBMessage {
|
|||||||
}
|
}
|
||||||
|
|
||||||
interface ChatInterfaceProps {
|
interface ChatInterfaceProps {
|
||||||
sessionId?: string
|
sessionId?: string,
|
||||||
// initialMessages: DBMessage[]
|
dbMessages: DBMessage[],
|
||||||
|
}
|
||||||
|
|
||||||
|
function SignInChatPrompt() {
|
||||||
|
return (
|
||||||
|
<div className="flex h-full w-full flex-col items-center justify-center gap-4 text-center">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<h2 className="text-xl font-semibold">Sign in to use the chat</h2>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
You need to be signed in before you can talk to Gregor's AI assistant.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<SignInButton mode="modal">
|
||||||
|
<Button type="button">Sign in</Button>
|
||||||
|
</SignInButton>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
|
function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
|
||||||
@@ -29,19 +46,10 @@ function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
|
|||||||
parts: [{ type: 'text' as const, text: m.content }],
|
parts: [{ type: 'text' as const, text: m.content }],
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
|
||||||
const utils = trpc.useUtils();
|
|
||||||
const { data: dbMessages, refetch: refetchMessages } = trpc.chat.getMessages.useQuery(sessionId ? sessionId : "")
|
|
||||||
const [messages, setMessages] = useState<UIMessage[]>([]);
|
|
||||||
function addMessage(newMessage: UIMessage) {
|
|
||||||
setMessages(prev => [...prev, newMessage]);
|
|
||||||
}
|
|
||||||
useEffect(() => {
|
|
||||||
setMessages(toUIMessages(dbMessages ?? []));
|
|
||||||
}, [dbMessages]);
|
|
||||||
|
|
||||||
if (messages.at(0)?.id != 'init') {
|
function addInitMessage(messageArray: UIMessage[]) {
|
||||||
messages.unshift({
|
if (messageArray.at(0)?.id != 'init') {
|
||||||
|
messageArray.unshift({
|
||||||
id: "init",
|
id: "init",
|
||||||
role: 'assistant',
|
role: 'assistant',
|
||||||
parts: [{
|
parts: [{
|
||||||
@@ -50,46 +58,31 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
|||||||
}],
|
}],
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProps & { sessionId: string }) {
|
||||||
const [input, setInput] = useState('')
|
const [input, setInput] = useState('')
|
||||||
const { sendMessage, status, error, clearError } = useChat({
|
const { clearingChat, clearChat, refetchMessages } = useMessages();
|
||||||
|
const initialMessages = toUIMessages(dbMessages)
|
||||||
|
addInitMessage(initialMessages)
|
||||||
|
const { messages, sendMessage, status, error, clearError, setMessages } = useChat({
|
||||||
transport: new DefaultChatTransport({
|
transport: new DefaultChatTransport({
|
||||||
api: '/api/chat', body: { sessionId },
|
api: '/api/chat', body: { sessionId },
|
||||||
}),
|
}),
|
||||||
messages: messages,
|
messages: initialMessages,
|
||||||
})
|
})
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
refetchMessages()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
const handleSend = () => {
|
const handleSend = () => {
|
||||||
const text = input.trim()
|
const text = input.trim()
|
||||||
if (!text || status != 'ready') return
|
if (!text || status != 'ready' || clearingChat) return
|
||||||
setInput('')
|
setInput('')
|
||||||
sendMessage({ text })
|
sendMessage({ text })
|
||||||
addMessage({
|
|
||||||
id: "", role: "user", parts: [
|
|
||||||
{ type: 'text', text }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
addMessage({
|
|
||||||
id: "", role: "assistant", parts: [
|
|
||||||
{ type: 'text', text: "Thinking..." }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const clearChatMutation = trpc.chat.clearChat.useMutation()
|
|
||||||
const handleClear = () => {
|
|
||||||
clearChatMutation.mutate(undefined, {
|
|
||||||
onSuccess: () => {
|
|
||||||
utils.chat.getMessages.invalidate()
|
|
||||||
refetchMessages()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
const gsapContext = useGsapContext()
|
const gsapContext = useGsapContext()
|
||||||
useEffect(() => {
|
|
||||||
console.log(status)
|
|
||||||
if (status == 'ready') {
|
|
||||||
utils.chat.getMessages.invalidate();
|
|
||||||
refetchMessages()
|
|
||||||
}
|
|
||||||
}, [status])
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let scroller = gsapContext?.getScroller()
|
let scroller = gsapContext?.getScroller()
|
||||||
if (scroller instanceof Window) {
|
if (scroller instanceof Window) {
|
||||||
@@ -101,9 +94,8 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
|||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full">
|
<div className="flex flex-col h-full">
|
||||||
{messages &&
|
{messages &&
|
||||||
<Messages messages={messages} />
|
<Messages status={status} messages={messages} />
|
||||||
}
|
}
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
<div className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
<div className="mx-4 mb-2 flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive">
|
||||||
<span className="flex-1">
|
<span className="flex-1">
|
||||||
@@ -146,10 +138,16 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
|||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant='destructive'
|
variant='destructive'
|
||||||
onClick={handleClear}
|
onClick={() => {
|
||||||
disabled={status != "ready" || clearChatMutation.isPending}
|
clearChat(() => {
|
||||||
|
let messages: UIMessage[] = [];
|
||||||
|
addInitMessage(messages);
|
||||||
|
setMessages(messages)
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
disabled={status != "ready" || clearingChat}
|
||||||
>
|
>
|
||||||
{clearChatMutation.isPending ?
|
{clearingChat ?
|
||||||
<Spinner /> :
|
<Spinner /> :
|
||||||
"Clear Chat"
|
"Clear Chat"
|
||||||
}
|
}
|
||||||
@@ -159,3 +157,10 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default function ChatInterface({ dbMessages, sessionId }: ChatInterfaceProps) {
|
||||||
|
if (sessionId == undefined) {
|
||||||
|
return <SignInChatPrompt />
|
||||||
|
}
|
||||||
|
return <AuthenticatedChatInterface sessionId={sessionId} dbMessages={dbMessages} />
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,24 +1,35 @@
|
|||||||
import { type UIMessage } from 'ai'
|
import { type ChatStatus, type UIMessage } from 'ai'
|
||||||
import * as Card from "~/components/ui/card"
|
import * as Card from "~/components/ui/card"
|
||||||
import AnimateTextIn from '~/app/_components/Animated/AnimateIn';
|
|
||||||
import { UserMessage } from './UserMessage';
|
import { UserMessage } from './UserMessage';
|
||||||
import { AssistantMessage } from './AssistantMessage';
|
import { AssistantMessage } from './AssistantMessage';
|
||||||
import { ScrollArea } from '~/components/ui/scroll-area';
|
import { ScrollArea } from '~/components/ui/scroll-area';
|
||||||
import { useTimeLine } from '~/app/_providers/GsapProvicer';
|
import { memo } from 'react';
|
||||||
import {
|
const Messages = memo(({messages,status}: { messages: UIMessage[],status:ChatStatus}) => {
|
||||||
memo
|
|
||||||
} from 'react';
|
|
||||||
const Messages = memo(({ messages}: { messages: UIMessage[]}) => {
|
|
||||||
return (
|
return (
|
||||||
<ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
|
<ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
|
||||||
{messages.map((message, i) => (
|
{messages.map((message, i) => (
|
||||||
<Card.AnimatedCard scrollOnly={true} tlId='chat' position={i * 0.2} key={i}>
|
<Card.AnimatedCard scrollOnly={true} key={i}>
|
||||||
<Card.CardContent>
|
<Card.CardContent>
|
||||||
{message.role == 'assistant' && <AssistantMessage message={message} />}
|
{message.role == 'assistant' && <AssistantMessage message={message} />}
|
||||||
{message.role == 'user' && <UserMessage message={message} />}
|
{message.role == 'user' && <UserMessage message={message} />}
|
||||||
</Card.CardContent>
|
</Card.CardContent>
|
||||||
</Card.AnimatedCard>
|
</Card.AnimatedCard>
|
||||||
))}
|
))}
|
||||||
|
{status == 'submitted' &&
|
||||||
|
<Card.AnimatedCard scrollOnly={true}>
|
||||||
|
<Card.CardContent>
|
||||||
|
<AssistantMessage message={{
|
||||||
|
id:"",
|
||||||
|
role:"assistant",
|
||||||
|
parts:[{
|
||||||
|
type:'text',
|
||||||
|
text:'Thinking ...'
|
||||||
|
}]
|
||||||
|
}}/>
|
||||||
|
</Card.CardContent>
|
||||||
|
</Card.AnimatedCard>
|
||||||
|
|
||||||
|
}
|
||||||
</ScrollArea>)
|
</ScrollArea>)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,22 +1,28 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import ChatInterface from './_components/ChatInterface'
|
import ChatInterface from './_components/ChatInterface'
|
||||||
import { trpc } from '../_trpc/Client';
|
|
||||||
import { Skeleton } from '~/components/ui/skeleton';
|
|
||||||
import AnimatedPageTitle from '../_components/Animated/AnimatedPageTitle';
|
import AnimatedPageTitle from '../_components/Animated/AnimatedPageTitle';
|
||||||
import { useTimeLine } from '../_providers/GsapProvicer';
|
import { useTimeLine } from '../_providers/GsapProvicer';
|
||||||
|
import { useMessages } from '../_providers/MessagesProvider';
|
||||||
|
import { Spinner } from '~/components/ui/spinner';
|
||||||
|
|
||||||
export default function ChatPage() {
|
export default function ChatPage() {
|
||||||
const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
|
const {messages,session,isLoading,error} = useMessages()
|
||||||
useTimeLine(session)
|
useTimeLine(messages)
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
|
<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
|
||||||
<AnimatedPageTitle position={0}>
|
<AnimatedPageTitle position={0}>
|
||||||
<span>Talk To My </span> <span> AI-Assistant</span>
|
<span>Talk To My </span> <span> AI-Assistant</span>
|
||||||
</AnimatedPageTitle>
|
</AnimatedPageTitle>
|
||||||
<div className='flex items-center h-[80%] my-auto w-full'>
|
<div className='flex items-center h-[80%] w-full my-auto w-full'>
|
||||||
<ChatInterface sessionId={session?.id} />
|
{!isLoading &&
|
||||||
{error && <div>{error.message}</div>}
|
<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
|
||||||
{isLoading && <Skeleton/>}
|
}
|
||||||
|
{isLoading &&
|
||||||
|
<><Spinner/> Loading Messages...</>
|
||||||
|
}
|
||||||
|
{error &&
|
||||||
|
<div> {error} </div>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import TrpcProvider from "./_trpc/TrpcProvider";
|
|||||||
// const ThemeProvider = dynamic(() => import("./_providers/ThemeProvider"),{ssr:true})
|
// const ThemeProvider = dynamic(() => import("./_providers/ThemeProvider"),{ssr:true})
|
||||||
import ThemeProvider from './_providers/ThemeProvider'
|
import ThemeProvider from './_providers/ThemeProvider'
|
||||||
import GsapProvider from "./_providers/GsapProvicer";
|
import GsapProvider from "./_providers/GsapProvicer";
|
||||||
|
import {MessagesProvider} from "./_providers/MessagesProvider";
|
||||||
import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
|
import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
|
||||||
import { cn } from "~/lib/utils";
|
import { cn } from "~/lib/utils";
|
||||||
import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
|
import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
|
||||||
@@ -45,6 +46,7 @@ export default async function RootLayout({
|
|||||||
</head>
|
</head>
|
||||||
<body className="flex flex-col bg-background text-foreground">
|
<body className="flex flex-col bg-background text-foreground">
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
|
<MessagesProvider>
|
||||||
<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
|
<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
|
||||||
<TopNav />
|
<TopNav />
|
||||||
<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
|
<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
|
||||||
@@ -53,6 +55,7 @@ export default async function RootLayout({
|
|||||||
{modal}
|
{modal}
|
||||||
</AnimatedBackGroundContainer>
|
</AnimatedBackGroundContainer>
|
||||||
<ChatFAB />
|
<ChatFAB />
|
||||||
|
</MessagesProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -26,10 +26,9 @@ function AnimatedCard({
|
|||||||
className,
|
className,
|
||||||
position = 0,
|
position = 0,
|
||||||
size = "default",
|
size = "default",
|
||||||
tlId = undefined,
|
|
||||||
scrollOnly = false,
|
scrollOnly = false,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm", position: gsap.Position, tlId?: string, scrollOnly?: boolean }) {
|
}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position, scrollOnly?: boolean }) {
|
||||||
const gsapContext = useGsapContext()
|
const gsapContext = useGsapContext()
|
||||||
const ref = useRef<HTMLDivElement | null>(null)
|
const ref = useRef<HTMLDivElement | null>(null)
|
||||||
useGSAP(() => {
|
useGSAP(() => {
|
||||||
@@ -47,7 +46,7 @@ function AnimatedCard({
|
|||||||
console.log(isInView)
|
console.log(isInView)
|
||||||
const fromVars = { x: -100, opacity: 0, duration: 0.5 }
|
const fromVars = { x: -100, opacity: 0, duration: 0.5 }
|
||||||
if (isInView && !scrollOnly) {
|
if (isInView && !scrollOnly) {
|
||||||
gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position, tlId)
|
gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position)
|
||||||
} else {
|
} else {
|
||||||
gsap.from(ref.current,
|
gsap.from(ref.current,
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import type { UseTRPCQueryResult } from "node_modules/@trpc/react-query/dist/getQueryKey.d-CruH3ncI.mjs"
|
import type { UseTRPCQueryResult } from "node_modules/@trpc/react-query/dist/getQueryKey.d-CruH3ncI.mjs"
|
||||||
import { useEffect, useState } from "react"
|
import { useEffect, useRef, useState } from "react"
|
||||||
|
|
||||||
function useRelationShipSuccess<T extends Record<string,any> & {id:string},K extends keyof T>(
|
function useRelationShipSuccess<T extends Record<string,any> & {id:string},K extends keyof T>(
|
||||||
relationShipData: T[] | undefined,
|
relationShipData: T[] | undefined,
|
||||||
@@ -56,3 +56,10 @@ export function makeUseRelationShipWithNameIndex<K extends string>(key:K) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function usePrevious<T>(value:T,initialValue:T) {
|
||||||
|
const ref = useRef(initialValue)
|
||||||
|
useEffect(() => {
|
||||||
|
ref.current = value
|
||||||
|
})
|
||||||
|
return ref.current;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { auth } from '@clerk/nextjs/server'
|
|
||||||
import { publicProcedure, router } from "../trpc";
|
import { publicProcedure, router } from "../trpc";
|
||||||
import { TRPCError } from "@trpc/server";
|
import { TRPCError } from "@trpc/server";
|
||||||
import { db } from '~/server/db'
|
import { db } from '~/server/db'
|
||||||
@@ -7,30 +6,29 @@ chatSession, systemSettings } from "../dbschema/schema";
|
|||||||
import { isAdmin } from '~/app/actions';
|
import { isAdmin } from '~/app/actions';
|
||||||
import { z } from 'zod';
|
import { z } from 'zod';
|
||||||
import { eq } from 'drizzle-orm';
|
import { eq } from 'drizzle-orm';
|
||||||
|
import { clerkClient, auth } from '@clerk/nextjs/server'
|
||||||
export const chatRouter = router({
|
export const chatRouter = router({
|
||||||
getSession: publicProcedure.query(async () => {
|
getSession: publicProcedure.query(async () => {
|
||||||
|
const clerk = await clerkClient()
|
||||||
const { userId } = await auth();
|
const { userId } = await auth();
|
||||||
if (userId == null) {
|
const user = await clerk.users.getUser(userId?userId:"")
|
||||||
|
if (user == undefined) {
|
||||||
throw new TRPCError({ message: "chat is only available to signed in users", code: 'UNAUTHORIZED' });
|
throw new TRPCError({ message: "chat is only available to signed in users", code: 'UNAUTHORIZED' });
|
||||||
}
|
}
|
||||||
let session = await db.query.chatSession.findFirst({
|
let session = await db.query.chatSession.findFirst({
|
||||||
where(fields, operators) {
|
where(fields, operators) {
|
||||||
return operators.eq(fields.userId, userId)
|
return operators.eq(fields.userId, user.id)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
if (session !== undefined) {
|
if (session !== undefined) {
|
||||||
return session;
|
return session;
|
||||||
}
|
}
|
||||||
let newSession = await db.insert(chatSession).values({ userId: userId }).returning().execute().then((r) => r.at(0));
|
let newSession = await db.insert(chatSession).values({ userId: user.id}).returning().execute().then((r) => r.at(0)); if (newSession == undefined) {
|
||||||
if (newSession == undefined) {
|
|
||||||
throw new TRPCError({ message: "failed to create session", code: "INTERNAL_SERVER_ERROR" });
|
throw new TRPCError({ message: "failed to create session", code: "INTERNAL_SERVER_ERROR" });
|
||||||
}
|
}
|
||||||
session = await db.query.chatSession.findFirst({
|
session = await db.query.chatSession.findFirst({
|
||||||
with: {
|
|
||||||
messages: true
|
|
||||||
},
|
|
||||||
where(fields, operators) {
|
where(fields, operators) {
|
||||||
return operators.eq(fields.id, newSession.id)
|
return operators.eq(fields.userId, user.id)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
if (session == undefined) {
|
if (session == undefined) {
|
||||||
@@ -77,3 +75,5 @@ export const chatRouter = router({
|
|||||||
await db.insert(systemSettings).values({ systemPropmt: input.prompt })
|
await db.insert(systemSettings).values({ systemPropmt: input.prompt })
|
||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
|
|
||||||
|
export type ChatRouter = typeof chatRouter;
|
||||||
|
|||||||
@@ -140,3 +140,7 @@
|
|||||||
-ms-overflow-style: none; /* IE and Edge */
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
scrollbar-width: none; /* Firefox */
|
scrollbar-width: none; /* Firefox */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.cl-button__google {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user