Compare commits
6 Commits
c5b3ee3875
...
aiassistan
| Author | SHA1 | Date | |
|---|---|---|---|
| 64bd5c429e | |||
| 52e0a65113 | |||
| 30e3dbb42b | |||
| caa9604704 | |||
| c62ee37538 | |||
| ead9548744 |
@@ -2,21 +2,12 @@
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui/dialog'
|
||||
import ChatInterface from '~/app/chat/_components/ChatInterface'
|
||||
import { useMessages } from '~/app/_providers/MessagesProvider';
|
||||
import { Spinner } from '~/components/ui/spinner';
|
||||
|
||||
type DBMessage = {
|
||||
id: string
|
||||
role: 'user' | 'assistant'
|
||||
content: string
|
||||
}
|
||||
|
||||
interface ChatModalProps {
|
||||
sessionId?: string
|
||||
// initialMessages: DBMessage[]
|
||||
}
|
||||
|
||||
export default function ChatModal({ sessionId }: ChatModalProps) {
|
||||
export default function ChatModal() {
|
||||
const router = useRouter()
|
||||
|
||||
const {messages,session,isLoading,error} = useMessages()
|
||||
return (
|
||||
<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">
|
||||
@@ -24,7 +15,15 @@ export default function ChatModal({ sessionId }: ChatModalProps) {
|
||||
<DialogTitle>Talk To My AI-Assistant</DialogTitle>
|
||||
</DialogHeader>
|
||||
<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>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@@ -1,16 +1,8 @@
|
||||
'use client'
|
||||
import { Skeleton } from '~/components/ui/skeleton';
|
||||
import ChatModal from './_components/ChatModal'
|
||||
import { trpc } from '~/app/_trpc/Client'
|
||||
import { useTimeLine } from '~/app/_providers/GsapProvicer';
|
||||
|
||||
export default function AssistantModalPage() {
|
||||
const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
|
||||
return (
|
||||
<>
|
||||
&& <ChatModal sessionId={session?.id} />
|
||||
{error && <div>{error.message}</div>}
|
||||
{isLoading && <Skeleton />}
|
||||
</>
|
||||
<ChatModal/>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
'use client'
|
||||
import Link from 'next/link'
|
||||
import { MessageCircle } from 'lucide-react'
|
||||
import { Show } from '@clerk/nextjs'
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { usePathname } from 'next/navigation'
|
||||
export default function ChatFAB() {
|
||||
@@ -10,7 +9,6 @@ export default function ChatFAB() {
|
||||
return (
|
||||
<>
|
||||
{!isChat &&
|
||||
<Show when="signed-in">
|
||||
<div className="fixed bottom-6 right-6 z-50">
|
||||
<Button asChild size="icon" className="h-14 w-14 rounded-full shadow-lg">
|
||||
<Link href="/assistant">
|
||||
@@ -18,7 +16,6 @@ export default function ChatFAB() {
|
||||
</Link>
|
||||
</Button>
|
||||
</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'
|
||||
import { clerkClient } from '@clerk/nextjs/server'
|
||||
import { clerkClient, auth } from '@clerk/nextjs/server'
|
||||
import { google } from 'googleapis'
|
||||
import { env } from '~/env'
|
||||
|
||||
@@ -10,7 +10,6 @@ export async function scheduleMeeting({
|
||||
durationMinutes,
|
||||
attendeeEmail,
|
||||
attendeeName,
|
||||
userId,
|
||||
}: {
|
||||
title: string
|
||||
description: string
|
||||
@@ -18,11 +17,11 @@ export async function scheduleMeeting({
|
||||
durationMinutes: number
|
||||
attendeeEmail?: string
|
||||
attendeeName?: string
|
||||
userId: string
|
||||
}) {
|
||||
try {
|
||||
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
|
||||
const adminTokenResponse = await clerk.users.getUserOauthAccessToken(
|
||||
env.ADMIN_USER_CLERK_ID,
|
||||
@@ -37,16 +36,7 @@ export async function scheduleMeeting({
|
||||
// Try to resolve visitor's Google email for the invite
|
||||
let visitorEmail: string | undefined = attendeeEmail
|
||||
if (!visitorEmail) {
|
||||
try {
|
||||
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
|
||||
}
|
||||
visitorEmail = user?.emailAddresses.at(0)?.emailAddress ?? undefined
|
||||
}
|
||||
|
||||
const oAuth2Client = new google.auth.OAuth2()
|
||||
@@ -71,6 +61,7 @@ export async function scheduleMeeting({
|
||||
end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
|
||||
attendees,
|
||||
},
|
||||
sendNotifications: true
|
||||
})
|
||||
|
||||
return {
|
||||
|
||||
@@ -8,6 +8,7 @@ import { db } from '~/server/db'
|
||||
import { chatSession, chatMessage } from '~/server/dbschema/schema'
|
||||
import { servTrpc } from '~/app/_trpc/ServerClient'
|
||||
import { scheduleMeeting } from '~/app/actions/scheduleMeeting'
|
||||
import currentTime from '~/app/actions/currentTime';
|
||||
|
||||
const openai = createOpenAI({ apiKey: env.OPENAI_API_KEY })
|
||||
|
||||
@@ -45,15 +46,15 @@ export async function POST(req: Request) {
|
||||
}
|
||||
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o'),
|
||||
model: openai('gpt-5-mini'),
|
||||
system: systemPrompt,
|
||||
messages: await convertToModelMessages(messages),
|
||||
tools: {
|
||||
scheduleMeeting: tool({
|
||||
description: 'Schedule a meeting with Gregor Lohaus and add it to his Google Calendar',
|
||||
inputSchema: z.object({
|
||||
title: z.string().describe('Meeting title'),
|
||||
description: z.string().describe('Meeting description / agenda'),
|
||||
title: z.string().describe('Meeting title, make something up if not provided'),
|
||||
description: z.string().describe('Meeting description / agenda, make something up if not provided'),
|
||||
dateTime: z
|
||||
.string()
|
||||
.describe(
|
||||
@@ -64,22 +65,22 @@ export async function POST(req: Request) {
|
||||
.int()
|
||||
.min(15)
|
||||
.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
|
||||
.string()
|
||||
.email()
|
||||
.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'),
|
||||
}),
|
||||
execute: async (input) => scheduleMeeting({ ...input, userId }),
|
||||
execute: async (input) => scheduleMeeting({ ...input }),
|
||||
}),
|
||||
getCurrentUnixTime: tool({
|
||||
description: 'Get the current unix time to reference for meeting dates',
|
||||
inputSchema: z.object({
|
||||
none: z.string().optional().describe("no inputs are needed")
|
||||
}),
|
||||
execute: async () => { return {success: true, currentTime: Date.now()} }
|
||||
execute: async () => currentTime()
|
||||
})
|
||||
},
|
||||
stopWhen: stepCountIs(5),
|
||||
|
||||
@@ -16,7 +16,7 @@ export const AssistantMessage = (props: { message: UIMessage }) => {
|
||||
{message.parts.map((part, i) => {
|
||||
if (part.type === 'text') {
|
||||
return (
|
||||
<Markdown key={i}>
|
||||
<Markdown>
|
||||
{part.text}
|
||||
</Markdown>
|
||||
)
|
||||
|
||||
@@ -4,13 +4,14 @@ import { useChat } from '@ai-sdk/react'
|
||||
import { DefaultChatTransport, type UIMessage } from 'ai'
|
||||
import { Button } from '~/components/ui/button'
|
||||
import { Textarea } from '~/components/ui/textarea'
|
||||
import { SignInButton } from '@clerk/nextjs'
|
||||
import {
|
||||
useGsapContext,
|
||||
} from '~/app/_providers/GsapProvicer';
|
||||
import Messages from './Messages'
|
||||
import { DeleteIcon } from 'lucide-react';
|
||||
import { trpc } from '~/app/_trpc/Client'
|
||||
import { Spinner } from '~/components/ui/spinner';
|
||||
import { useMessages } from '~/app/_providers/MessagesProvider';
|
||||
interface DBMessage {
|
||||
id: string
|
||||
role: 'user' | 'assistant'
|
||||
@@ -18,8 +19,24 @@ interface DBMessage {
|
||||
}
|
||||
|
||||
interface ChatInterfaceProps {
|
||||
sessionId?: string
|
||||
// initialMessages: DBMessage[]
|
||||
sessionId?: string,
|
||||
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[] {
|
||||
@@ -29,19 +46,10 @@ function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
|
||||
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') {
|
||||
messages.unshift({
|
||||
function addInitMessage(messageArray: UIMessage[]) {
|
||||
if (messageArray.at(0)?.id != 'init') {
|
||||
messageArray.unshift({
|
||||
id: "init",
|
||||
role: 'assistant',
|
||||
parts: [{
|
||||
@@ -50,46 +58,31 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
||||
}],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProps & { sessionId: string }) {
|
||||
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({
|
||||
api: '/api/chat', body: { sessionId },
|
||||
}),
|
||||
messages: messages,
|
||||
messages: initialMessages,
|
||||
})
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
refetchMessages()
|
||||
}
|
||||
}, [])
|
||||
const handleSend = () => {
|
||||
const text = input.trim()
|
||||
if (!text || status != 'ready') return
|
||||
if (!text || status != 'ready' || clearingChat) return
|
||||
setInput('')
|
||||
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()
|
||||
useEffect(() => {
|
||||
console.log(status)
|
||||
if (status == 'ready') {
|
||||
utils.chat.getMessages.invalidate();
|
||||
refetchMessages()
|
||||
}
|
||||
}, [status])
|
||||
useEffect(() => {
|
||||
let scroller = gsapContext?.getScroller()
|
||||
if (scroller instanceof Window) {
|
||||
@@ -101,9 +94,8 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{messages &&
|
||||
<Messages messages={messages} />
|
||||
<Messages status={status} messages={messages} />
|
||||
}
|
||||
|
||||
{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">
|
||||
<span className="flex-1">
|
||||
@@ -146,10 +138,16 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
||||
</Button>
|
||||
<Button
|
||||
variant='destructive'
|
||||
onClick={handleClear}
|
||||
disabled={status != "ready" || clearChatMutation.isPending}
|
||||
onClick={() => {
|
||||
clearChat(() => {
|
||||
let messages: UIMessage[] = [];
|
||||
addInitMessage(messages);
|
||||
setMessages(messages)
|
||||
})
|
||||
}}
|
||||
disabled={status != "ready" || clearingChat}
|
||||
>
|
||||
{clearChatMutation.isPending ?
|
||||
{clearingChat ?
|
||||
<Spinner /> :
|
||||
"Clear Chat"
|
||||
}
|
||||
@@ -159,3 +157,10 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
|
||||
</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 AnimateTextIn from '~/app/_components/Animated/AnimateIn';
|
||||
import { UserMessage } from './UserMessage';
|
||||
import { AssistantMessage } from './AssistantMessage';
|
||||
import { ScrollArea } from '~/components/ui/scroll-area';
|
||||
import { useTimeLine } from '~/app/_providers/GsapProvicer';
|
||||
import {
|
||||
memo
|
||||
} from 'react';
|
||||
const Messages = memo(({ messages}: { messages: UIMessage[]}) => {
|
||||
import { memo } from 'react';
|
||||
const Messages = memo(({messages,status}: { messages: UIMessage[],status:ChatStatus}) => {
|
||||
return (
|
||||
<ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
|
||||
{messages.map((message, i) => (
|
||||
<Card.AnimatedCard scrollOnly={true} tlId='chat' position={i * 0.2} key={i}>
|
||||
<Card.AnimatedCard scrollOnly={true} key={i}>
|
||||
<Card.CardContent>
|
||||
{message.role == 'assistant' && <AssistantMessage message={message} />}
|
||||
{message.role == 'user' && <UserMessage message={message} />}
|
||||
</Card.CardContent>
|
||||
</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>)
|
||||
})
|
||||
|
||||
|
||||
@@ -1,22 +1,28 @@
|
||||
'use client'
|
||||
import ChatInterface from './_components/ChatInterface'
|
||||
import { trpc } from '../_trpc/Client';
|
||||
import { Skeleton } from '~/components/ui/skeleton';
|
||||
import AnimatedPageTitle from '../_components/Animated/AnimatedPageTitle';
|
||||
import { useTimeLine } from '../_providers/GsapProvicer';
|
||||
import { useMessages } from '../_providers/MessagesProvider';
|
||||
import { Spinner } from '~/components/ui/spinner';
|
||||
|
||||
export default function ChatPage() {
|
||||
const { data: session, error, isLoading } = trpc.chat.getSession.useQuery();
|
||||
useTimeLine(session)
|
||||
const {messages,session,isLoading,error} = useMessages()
|
||||
useTimeLine(messages)
|
||||
return (
|
||||
<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
|
||||
<AnimatedPageTitle position={0}>
|
||||
<span>Talk To My </span> <span> AI-Assistant</span>
|
||||
</AnimatedPageTitle>
|
||||
<div className='flex items-center h-[80%] my-auto w-full'>
|
||||
<ChatInterface sessionId={session?.id} />
|
||||
{error && <div>{error.message}</div>}
|
||||
{isLoading && <Skeleton/>}
|
||||
<div className='flex items-center h-[80%] w-full my-auto w-full'>
|
||||
{!isLoading &&
|
||||
<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
|
||||
}
|
||||
{isLoading &&
|
||||
<><Spinner/> Loading Messages...</>
|
||||
}
|
||||
{error &&
|
||||
<div> {error} </div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -11,6 +11,7 @@ import TrpcProvider from "./_trpc/TrpcProvider";
|
||||
// const ThemeProvider = dynamic(() => import("./_providers/ThemeProvider"),{ssr:true})
|
||||
import ThemeProvider from './_providers/ThemeProvider'
|
||||
import GsapProvider from "./_providers/GsapProvicer";
|
||||
import {MessagesProvider} from "./_providers/MessagesProvider";
|
||||
import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
|
||||
import { cn } from "~/lib/utils";
|
||||
import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
|
||||
@@ -45,6 +46,7 @@ export default async function RootLayout({
|
||||
</head>
|
||||
<body className="flex flex-col bg-background text-foreground">
|
||||
<ThemeProvider>
|
||||
<MessagesProvider>
|
||||
<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
|
||||
<TopNav />
|
||||
<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}
|
||||
</AnimatedBackGroundContainer>
|
||||
<ChatFAB />
|
||||
</MessagesProvider>
|
||||
</ThemeProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -26,10 +26,9 @@ function AnimatedCard({
|
||||
className,
|
||||
position = 0,
|
||||
size = "default",
|
||||
tlId = undefined,
|
||||
scrollOnly = false,
|
||||
...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 ref = useRef<HTMLDivElement | null>(null)
|
||||
useGSAP(() => {
|
||||
@@ -47,7 +46,7 @@ function AnimatedCard({
|
||||
console.log(isInView)
|
||||
const fromVars = { x: -100, opacity: 0, duration: 0.5 }
|
||||
if (isInView && !scrollOnly) {
|
||||
gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position, tlId)
|
||||
gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position)
|
||||
} else {
|
||||
gsap.from(ref.current,
|
||||
{
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client'
|
||||
|
||||
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>(
|
||||
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 { TRPCError } from "@trpc/server";
|
||||
import { db } from '~/server/db'
|
||||
@@ -7,27 +6,29 @@ chatSession, systemSettings } from "../dbschema/schema";
|
||||
import { isAdmin } from '~/app/actions';
|
||||
import { z } from 'zod';
|
||||
import { eq } from 'drizzle-orm';
|
||||
import { clerkClient, auth } from '@clerk/nextjs/server'
|
||||
export const chatRouter = router({
|
||||
getSession: publicProcedure.query(async () => {
|
||||
const clerk = await clerkClient()
|
||||
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' });
|
||||
}
|
||||
let session = await db.query.chatSession.findFirst({
|
||||
where(fields, operators) {
|
||||
return operators.eq(fields.userId, userId)
|
||||
return operators.eq(fields.userId, user.id)
|
||||
},
|
||||
})
|
||||
if (session !== undefined) {
|
||||
return session;
|
||||
}
|
||||
let newSession = await db.insert(chatSession).values({ userId: userId }).returning().execute().then((r) => r.at(0));
|
||||
if (newSession == undefined) {
|
||||
let newSession = await db.insert(chatSession).values({ userId: user.id}).returning().execute().then((r) => r.at(0)); if (newSession == undefined) {
|
||||
throw new TRPCError({ message: "failed to create session", code: "INTERNAL_SERVER_ERROR" });
|
||||
}
|
||||
session = await db.query.chatSession.findFirst({
|
||||
where(fields, operators) {
|
||||
return operators.eq(fields.userId, userId)
|
||||
return operators.eq(fields.userId, user.id)
|
||||
},
|
||||
})
|
||||
if (session == undefined) {
|
||||
@@ -74,3 +75,5 @@ export const chatRouter = router({
|
||||
await db.insert(systemSettings).values({ systemPropmt: input.prompt })
|
||||
}),
|
||||
})
|
||||
|
||||
export type ChatRouter = typeof chatRouter;
|
||||
|
||||
@@ -140,3 +140,7 @@
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.cl-button__google {
|
||||
display: none
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user