diff --git a/examples/ai_chat/frontend/src/api/chat/hook.ts b/examples/ai_chat/frontend/src/api/chat/hook.ts
index 895373b..3eb238a 100644
--- a/examples/ai_chat/frontend/src/api/chat/hook.ts
+++ b/examples/ai_chat/frontend/src/api/chat/hook.ts
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react'
import { fetchChatsWithMembers } from './fetch'
import { useChatsWithMembersStore } from './store'
+import { useChatReadStateStore } from './read-store'
interface UseGetContactsResult {
isLoading: boolean
@@ -9,14 +10,17 @@ interface UseGetContactsResult {
}
const useGetChatsWithMembers = (): UseGetContactsResult => {
- const { lastFetch, set } = useChatsWithMembersStore()
+ const { set } = useChatsWithMembersStore()
+ const initializeFromChats = useChatReadStateStore((state) => state.initializeFromChats)
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState
(null)
// Cache duration
const CACHE_DURATION = 3 * 1000 // 3 seconds
+ const POLL_INTERVAL = 7500
const fetchData = async () => {
+ const lastFetch = useChatsWithMembersStore.getState().lastFetch
if (lastFetch && Date.now() - lastFetch < CACHE_DURATION) return
setIsLoading(true)
@@ -24,6 +28,7 @@ const useGetChatsWithMembers = (): UseGetContactsResult => {
try {
const data = await fetchChatsWithMembers()
set(data)
+ initializeFromChats(data)
} catch (error: any) {
setError(error.message)
} finally {
@@ -34,6 +39,9 @@ const useGetChatsWithMembers = (): UseGetContactsResult => {
// Automatically run
useEffect(() => {
fetchData()
+
+ const intervalId = window.setInterval(fetchData, POLL_INTERVAL)
+ return () => window.clearInterval(intervalId)
}, [])
return { isLoading, error, refetch: fetchData }
diff --git a/examples/ai_chat/frontend/src/api/chat/read-store.ts b/examples/ai_chat/frontend/src/api/chat/read-store.ts
new file mode 100644
index 0000000..6f98544
--- /dev/null
+++ b/examples/ai_chat/frontend/src/api/chat/read-store.ts
@@ -0,0 +1,42 @@
+import { create } from 'zustand'
+import { createJSONStorage, devtools, persist } from 'zustand/middleware'
+
+import { ChatWithMembersRead } from './schemas'
+
+interface ChatReadState {
+ lastReadAtByChatId: Record
+
+ initializeFromChats: (chats: ChatWithMembersRead[]) => void
+ markChatRead: (chatId: string, at?: number) => void
+}
+
+export const useChatReadStateStore = create()(
+ devtools(
+ persist(
+ (set) => ({
+ lastReadAtByChatId: {},
+
+ initializeFromChats: (chats) =>
+ set((state) => {
+ const next = { ...state.lastReadAtByChatId }
+ for (const chat of chats) {
+ if (next[chat.id] == null) {
+ next[chat.id] = chat.last_message_time.getTime()
+ }
+ }
+ return { lastReadAtByChatId: next }
+ }),
+
+ markChatRead: (chatId, at) =>
+ set((state) => ({
+ lastReadAtByChatId: { ...state.lastReadAtByChatId, [chatId]: at ?? Date.now() },
+ })),
+ }),
+ {
+ name: 'ai-chat:last-read-at',
+ storage: createJSONStorage(() => localStorage),
+ }
+ )
+ )
+)
+
diff --git a/examples/ai_chat/frontend/src/api/chat/store.ts b/examples/ai_chat/frontend/src/api/chat/store.ts
index 6e06eb3..4a225a8 100644
--- a/examples/ai_chat/frontend/src/api/chat/store.ts
+++ b/examples/ai_chat/frontend/src/api/chat/store.ts
@@ -8,6 +8,7 @@ interface ContactState {
set: (chats: ChatWithMembersRead[]) => void
upsertChat: (chat: ChatWithMembersRead) => void
+ touchChat: (chat_id: string, last_message_time: Date) => void
}
export const useChatsWithMembersStore = create()(
@@ -15,24 +16,33 @@ export const useChatsWithMembersStore = create()(
chats: [],
lastFetch: null,
- set: (chats) => set({ chats, lastFetch: Date.now() }),
+ set: (chats) =>
+ set({
+ chats: [...chats].sort((a, b) => b.last_message_time.getTime() - a.last_message_time.getTime()),
+ lastFetch: Date.now(),
+ }),
upsertChat: (chat) =>
set((state) => {
- // Check if the chat already exists
const index = state.chats.findIndex((c) => c.id === chat.id)
- if (index === -1) {
- // If it doesn't, add it
- state.chats.push(chat)
- } else {
- // If it does, update it
- state.chats[index] = chat
- }
-
- // Sort for most recent first
- state.chats.sort((a, b) => b.last_message_time.getTime() - a.last_message_time.getTime())
-
- return { chats: state.chats }
+ const next = [...state.chats]
+ if (index === -1) next.push(chat)
+ else next[index] = chat
+
+ next.sort((a, b) => b.last_message_time.getTime() - a.last_message_time.getTime())
+ return { chats: next }
+ }),
+
+ touchChat: (chat_id, last_message_time) =>
+ set((state) => {
+ const next = state.chats.map((chat) => {
+ if (chat.id !== chat_id) return chat
+ if (chat.last_message_time.getTime() >= last_message_time.getTime()) return chat
+ return { ...chat, last_message_time }
+ })
+
+ next.sort((a, b) => b.last_message_time.getTime() - a.last_message_time.getTime())
+ return { chats: next }
}),
}))
)
diff --git a/examples/ai_chat/frontend/src/api/contact/fetch.ts b/examples/ai_chat/frontend/src/api/contact/fetch.ts
index 75788be..4533cfd 100644
--- a/examples/ai_chat/frontend/src/api/contact/fetch.ts
+++ b/examples/ai_chat/frontend/src/api/contact/fetch.ts
@@ -1,8 +1,13 @@
import { z } from 'zod'
-import { ContactRead, ContactReadSchema, CreateSetupContactResponse, CreateSetupContactResponseSchema } from './schemas'
+import { ContactRead, ContactReadSchema, CreateSetupContactResponse, CreateSetupContactResponseSchema, Sex } from './schemas'
-export const createSetupContact = async (): Promise => {
- const response = await fetch(`http://127.0.0.1:8000/api/contact`, {
+export const createSetupContact = async (sex?: Sex): Promise => {
+ const url = new URL('http://127.0.0.1:8000/api/contact')
+ if (sex) {
+ url.searchParams.set('sex', sex)
+ }
+
+ const response = await fetch(url.toString(), {
method: 'POST',
mode: 'cors',
headers: {
diff --git a/examples/ai_chat/frontend/src/api/contact/hooks/create-upsert-contact-hook.ts b/examples/ai_chat/frontend/src/api/contact/hooks/create-upsert-contact-hook.ts
index a3372fd..a9aed23 100644
--- a/examples/ai_chat/frontend/src/api/contact/hooks/create-upsert-contact-hook.ts
+++ b/examples/ai_chat/frontend/src/api/contact/hooks/create-upsert-contact-hook.ts
@@ -1,12 +1,13 @@
import { useState } from 'react'
import { createSetupContact } from '../fetch'
+import { Sex } from '../schemas'
import { useContactStore } from '../store'
import { useChatsWithMembersStore } from '../../chat/store'
interface UseCreateContactResult {
isLoading: boolean
error: string | null
- createContact: () => Promise // Added createContact function
+ createContact: (sex?: Sex) => Promise
}
const useCreateAndUpsertContact = (): UseCreateContactResult => {
@@ -15,12 +16,12 @@ const useCreateAndUpsertContact = (): UseCreateContactResult => {
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState(null)
- const createContactAndUpsert = async (): Promise => {
+ const createContactAndUpsert = async (sex?: Sex): Promise => {
setIsLoading(true)
setError(null)
try {
// Create and upsert the new contact into state
- const response = await createSetupContact()
+ const response = await createSetupContact(sex)
upsertContacts([response.contact])
upsertChat(response.chat_with_members)
diff --git a/examples/ai_chat/frontend/src/api/message/hooks/get-messages-hook.ts b/examples/ai_chat/frontend/src/api/message/hooks/get-messages-hook.ts
index 423bae8..c120b87 100644
--- a/examples/ai_chat/frontend/src/api/message/hooks/get-messages-hook.ts
+++ b/examples/ai_chat/frontend/src/api/message/hooks/get-messages-hook.ts
@@ -1,6 +1,7 @@
import { useRef, useState } from 'react'
import { useMessagesStore } from '../store'
import { fetchChatMessages, fetchNewerChatMessages } from '../fetch'
+import { useChatsWithMembersStore } from '../../chat/store'
interface UseGetMessagesResult {
isLoading: boolean
@@ -12,6 +13,7 @@ interface UseGetMessagesResult {
const useGetMessages = (): UseGetMessagesResult => {
const { upsertMessages } = useMessagesStore()
+ const touchChat = useChatsWithMembersStore((state) => state.touchChat)
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState(null)
const pollingActive = useRef(false)
@@ -24,6 +26,10 @@ const useGetMessages = (): UseGetMessagesResult => {
try {
const newMessages = await fetchChatMessages(chat_id)
upsertMessages(chat_id, newMessages)
+ if (newMessages.length > 0) {
+ const latest = new Date(Math.max(...newMessages.map((m) => m.created_at.getTime())))
+ touchChat(chat_id, latest)
+ }
} catch (error: any) {
setError(error.message)
} finally {
@@ -37,6 +43,10 @@ const useGetMessages = (): UseGetMessagesResult => {
try {
const newMessages = await fetchNewerChatMessages(chat_id, message_id)
upsertMessages(chat_id, newMessages)
+ if (newMessages.length > 0) {
+ const latest = new Date(Math.max(...newMessages.map((m) => m.created_at.getTime())))
+ touchChat(chat_id, latest)
+ }
} catch (error: any) {
setError(error.message)
} finally {
diff --git a/examples/ai_chat/frontend/src/components/ChatForm.tsx b/examples/ai_chat/frontend/src/components/ChatForm.tsx
index ab00188..e29cb46 100644
--- a/examples/ai_chat/frontend/src/components/ChatForm.tsx
+++ b/examples/ai_chat/frontend/src/components/ChatForm.tsx
@@ -1,6 +1,7 @@
import { useState } from 'react'
import useSendMessage from '../api/message/hooks/send-message-hook'
import useGetMessages from '../api/message/hooks/get-messages-hook'
+import { useChatReadStateStore } from '../api/chat/read-store'
export interface ChatFormProps {
chat_id: string | undefined
@@ -11,6 +12,7 @@ export default function ChatForm(props: ChatFormProps) {
const [message, setMessage] = useState('')
const { isLoading, error, sendMessage } = useSendMessage()
const { getChatMessages } = useGetMessages()
+ const markChatRead = useChatReadStateStore((state) => state.markChatRead)
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
@@ -19,6 +21,7 @@ export default function ChatForm(props: ChatFormProps) {
try {
await sendMessage({ chat_id, message })
setMessage('') // Clear the input field after sending
+ markChatRead(chat_id)
// Await a delay
await new Promise((resolve) => setTimeout(resolve, 150))
diff --git a/examples/ai_chat/frontend/src/components/ChatWindow.tsx b/examples/ai_chat/frontend/src/components/ChatWindow.tsx
index a5f3bdb..80232d3 100644
--- a/examples/ai_chat/frontend/src/components/ChatWindow.tsx
+++ b/examples/ai_chat/frontend/src/components/ChatWindow.tsx
@@ -4,6 +4,7 @@ import ChatReceiveBubble from './bubbles/ChatReceiveBubble'
import ChatReceiveImageBubble from './bubbles/ChatReceiveImageBubble'
import ChatSendBubble from './bubbles/ChatSendBubble'
import useGetMessages from '../api/message/hooks/get-messages-hook'
+import { useChatReadStateStore } from '../api/chat/read-store'
interface ChatWindowProps {
chat_id: string | undefined
@@ -13,11 +14,13 @@ export default function ChatWindow(props: ChatWindowProps) {
const { chat_id } = props
const chatWindowRef = useRef(null)
const { getChatMessages, pollForNewerMessages } = useGetMessages()
+ const markChatRead = useChatReadStateStore((state) => state.markChatRead)
const messages = useMessagesStore((state) => state.messages[chat_id ?? ''])
const messagesList = Object.values(messages ?? {})
+ const sortedMessagesList = [...messagesList].sort((a, b) => a.created_at.getTime() - b.created_at.getTime())
// Latest message
- const latestMessageId = messagesList[messagesList.length - 1]?.id ?? null
+ const latestMessageId = sortedMessagesList[sortedMessagesList.length - 1]?.id ?? null
// Automatically fetch initial round of messages if there are none
useEffect(() => {
@@ -30,13 +33,21 @@ export default function ChatWindow(props: ChatWindowProps) {
if (!chat_id) return
if (!latestMessageId) return
- if (messagesList.length > 0) {
+ if (sortedMessagesList.length > 0) {
pollForNewerMessages(chat_id, latestMessageId)
}
}, [latestMessageId])
+ // While viewing a chat, treat any incoming messages as read
+ useEffect(() => {
+ if (!chat_id) return
+ if (sortedMessagesList.length === 0) return
+ const latestReadAt = sortedMessagesList[sortedMessagesList.length - 1].created_at.getTime()
+ markChatRead(chat_id, latestReadAt)
+ }, [chat_id, latestMessageId, sortedMessagesList.length, markChatRead])
+
// Reverse the messages list to show the newest at the bottom
- const reversedList = [...messagesList].reverse()
+ const reversedList = [...sortedMessagesList].reverse()
return (
diff --git a/examples/ai_chat/frontend/src/components/avatars/SidebarAvatar.tsx b/examples/ai_chat/frontend/src/components/avatars/SidebarAvatar.tsx
index 45cad20..930db9b 100644
--- a/examples/ai_chat/frontend/src/components/avatars/SidebarAvatar.tsx
+++ b/examples/ai_chat/frontend/src/components/avatars/SidebarAvatar.tsx
@@ -6,10 +6,11 @@ interface SidebarAvatarProps {
contact_id: string
lastMessage: string
isActive: boolean
+ hasUnread?: boolean
}
export default function SidebarAvatar(props: SidebarAvatarProps) {
- const { contact_id, lastMessage, isActive } = props
+ const { contact_id, lastMessage, isActive, hasUnread } = props
const [isModalOpen, setIsModalOpen] = useState(false)
// Get contact from store
@@ -42,6 +43,13 @@ export default function SidebarAvatar(props: SidebarAvatarProps) {
View Profile
+
+