refactor: moved hook definitions for chat

app/CharacterEditor.tsx

@@ -31,10 +31,7 @@ const ChracterEditor = () => {
     const getTokenCount = Tokenizer.useTokenizer((state) => state.getTokenCount)
     const [characterCard, setCharacterCard] = useState<CharacterCardData | undefined>(currentCard)
 
-    const { chat, unloadChat } = Chats.useChat((state) => ({
-        chat: state.data,
-        unloadChat: state.reset,
-    }))
+    const { chat, unloadChat } = Chats.useChat()
 
     const setShowViewer = useViewerState((state) => state.setShow)
 

app/components/CharacterMenu/CharacterListing.tsx

@@ -34,7 +34,7 @@ const CharacterListing: React.FC<CharacterListingProps> = ({
         setCurrentCard: state.setCard,
     }))
 
-    const loadChat = Chats.useChat((state) => state.load)
+    const { loadChat } = Chats.useChat()
 
     const setCurrentCharacter = async (charId: number) => {
         if (nowLoading) return

app/components/CharacterMenu/CharacterNewMenu.tsx

@@ -68,7 +68,7 @@ const CharacterNewMenu: React.FC<CharacterNewMenuProps> = ({
             id: state.id,
         }))
     )
-    const loadChat = Chats.useChat((state) => state.load)
+    const { loadChat } = Chats.useChat()
 
     const router = useRouter()
     const [showNewChar, setShowNewChar] = useState<boolean>(false)

app/components/ChatMenu/ChatEditPopup.tsx

@@ -28,12 +28,7 @@ const ChatEditPopup: React.FC<ChatEditPopupProps> = ({ item, setNowLoading, nowL
         charName: state.card?.name ?? 'Unknown',
     }))
 
-    const { deleteChat, loadChat, currentChatId, unloadChat } = Chats.useChat((state) => ({
-        deleteChat: state.delete,
-        loadChat: state.load,
-        currentChatId: state.data?.id,
-        unloadChat: state.reset,
-    }))
+    const { deleteChat, loadChat, chatId, unloadChat } = Chats.useChat()
 
     const handleDeleteChat = (menuRef: MenuRef) => {
         Alert.alert({
@@ -45,13 +40,13 @@ const ChatEditPopup: React.FC<ChatEditPopupProps> = ({ item, setNowLoading, nowL
                     label: 'Delete Chat',
                     onPress: async () => {
                         await deleteChat(item.id)
-                        if (charId && currentChatId === item.id) {
+                        if (charId && chatId === item.id) {
                             const returnedChatId = await Chats.db.query.chatNewestId(charId)
                             const chatId = returnedChatId
                                 ? returnedChatId
                                 : await Chats.db.mutate.createChat(charId)
                             chatId && (await loadChat(chatId))
-                        } else if (item.id === currentChatId) {
+                        } else if (item.id === chatId) {
                             Logger.log(`Something went wrong with creating a default chat`, true)
                             unloadChat()
                         }

app/components/ChatMenu/ChatInput.tsx

@@ -1,18 +1,16 @@
 import { MaterialIcons } from '@expo/vector-icons'
-import { AppSettings, Characters, Chats, Logger, Style } from 'constants/Global'
 import { useInference } from 'constants/Chat'
+import { AppSettings, Characters, Chats, Logger, Style } from 'constants/Global'
 import { generateResponse } from 'constants/Inference'
 import React, { useState } from 'react'
-import { View, StyleSheet, TextInput, TouchableOpacity } from 'react-native'
+import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
 import { useMMKVBoolean } from 'react-native-mmkv'
 import { useShallow } from 'zustand/react/shallow'
 
 const ChatInput = () => {
     const [sendOnEnter, setSendOnEnter] = useMMKVBoolean(AppSettings.SendOnEnter)
 
-    const { insertEntry } = Chats.useChat((state) => ({
-        insertEntry: state.addEntry,
-    }))
+    const { addEntry } = Chats.useEntry()
 
     const { nowGenerating, abortFunction } = useInference((state) => ({
         nowGenerating: state.nowGenerating,
@@ -37,8 +35,8 @@ const ChatInput = () => {
     }
 
     const handleSend = async () => {
-        if (newMessage.trim() !== '') await insertEntry(userName ?? '', true, newMessage)
-        const swipeId = await insertEntry(charName ?? '', false, '')
+        if (newMessage.trim() !== '') await addEntry(userName ?? '', true, newMessage)
+        const swipeId = await addEntry(charName ?? '', false, '')
         setNewMessage((message) => '')
         if (swipeId) generateResponse(swipeId)
     }

app/components/ChatMenu/ChatMenu.tsx

@@ -23,12 +23,7 @@ const ChatMenu = () => {
         }))
     )
 
-    const { chat, unloadChat } = Chats.useChat(
-        useShallow((state) => ({
-            chat: state?.data?.id,
-            unloadChat: state.reset,
-        }))
-    )
+    const { chat, unloadChat } = Chats.useChat()
 
     const [showDrawer, setShowDrawer] = useState<boolean>(false)
     const [showChats, setShowChats] = useState<boolean>(false)

app/components/ChatMenu/ChatWindow/ChatBody.tsx

@@ -1,7 +1,6 @@
 import { Chats, Style } from 'constants/Global'
 import React, { useState } from 'react'
-import { View, TouchableOpacity, StyleSheet } from 'react-native'
-import { useShallow } from 'zustand/react/shallow'
+import { StyleSheet, TouchableOpacity, View } from 'react-native'
 
 import ChatText from './ChatText'
 import ChatTextLast from './ChatTextLast'
@@ -16,11 +15,7 @@ type ChatTextProps = {
 }
 
 const ChatBody: React.FC<ChatTextProps> = ({ id, nowGenerating, isLastMessage, isGreeting }) => {
-    const { message } = Chats.useChat(
-        useShallow((state) => ({
-            message: state?.data?.messages?.[id] ?? Chats.dummyEntry,
-        }))
-    )
+    const message = Chats.useEntryData(id)
     const [editMode, setEditMode] = useState(false)
 
     const handleEnableEdit = () => {

app/components/ChatMenu/ChatWindow/ChatFrame.tsx

@@ -1,11 +1,10 @@
 import Avatar from '@components/Avatar'
 import { useViewerState } from 'constants/AvatarViewer'
-import { Characters, Global, Style } from 'constants/Global'
 import { Chats } from 'constants/Chat'
+import { Characters, Global, Style } from 'constants/Global'
 import { ReactNode } from 'react'
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { useMMKVBoolean } from 'react-native-mmkv'
-import { useShallow } from 'zustand/react/shallow'
 
 import TTSMenu from './TTS'
 
@@ -17,11 +16,7 @@ type ChatFrameProps = {
 }
 
 const ChatFrame: React.FC<ChatFrameProps> = ({ children, id, nowGenerating, isLast }) => {
-    const { message } = Chats.useChat(
-        useShallow((state) => ({
-            message: state?.data?.messages?.[id] ?? Chats.dummyEntry,
-        }))
-    )
+    const message = Chats.useEntryData(id)
 
     const setShowViewer = useViewerState((state) => state.setShow)
 

app/components/ChatMenu/ChatWindow/ChatText.tsx

@@ -9,11 +9,7 @@ type ChatTextProps = {
 }
 
 const ChatText: React.FC<ChatTextProps> = ({ nowGenerating, id }) => {
-    const mes = Chats.useChat(
-        (state) =>
-            state?.data?.messages?.[id]?.swipes?.[state?.data?.messages?.[id].swipe_id ?? -1]
-                .swipe ?? ''
-    )
+    const { swipeText } = Chats.useSwipeData(id)
     const viewRef = useRef<View>(null)
 
     const animHeight = useAnimatedValue(-1)
@@ -47,7 +43,7 @@ const ChatText: React.FC<ChatTextProps> = ({ nowGenerating, id }) => {
             return
         }
         requestAnimationFrame(() => updateHeight())
-    }, [mes])
+    }, [swipeText])
 
     return (
         <Animated.View style={{ overflow: 'scroll', height: animHeight }}>
@@ -56,7 +52,7 @@ const ChatText: React.FC<ChatTextProps> = ({ nowGenerating, id }) => {
                     markdownit={MarkdownStyle.Rules}
                     rules={MarkdownStyle.RenderRules}
                     style={MarkdownStyle.Styles}>
-                    {mes.trim()}
+                    {swipeText.trim()}
                 </Markdown>
             </View>
         </Animated.View>

app/components/ChatMenu/ChatWindow/ChatTextLast.tsx

@@ -12,25 +12,11 @@ type ChatTextProps = {
 }
 
 const ChatTextLast: React.FC<ChatTextProps> = ({ nowGenerating, id }) => {
-    const { mes, swipeId } = Chats.useChat((state) => ({
-        mes:
-            state?.data?.messages?.[id]?.swipes?.[state?.data?.messages?.[id].swipe_id ?? -1]
-                .swipe ?? '',
+    const { swipeText, swipeId } = Chats.useSwipeData(id)
+    const { buffer } = Chats.useBuffer()
 
-        swipeId:
-            state?.data?.messages?.[id]?.swipes?.[state?.data?.messages?.[id].swipe_id ?? -1].id ??
-            -1,
-    }))
     const viewRef = useRef<View>(null)
-
     const currentSwipeId = useInference((state) => state.currentSwipeId)
-
-    const { buffer } = Chats.useChat(
-        useShallow((state) => ({
-            buffer: state.buffer,
-        }))
-    )
-
     const animHeight = useAnimatedValue(-1)
     const targetHeight = useRef(-1)
     const firstRender = useRef(true)
@@ -66,7 +52,7 @@ const ChatTextLast: React.FC<ChatTextProps> = ({ nowGenerating, id }) => {
             return
         }
         requestAnimationFrame(() => updateHeight())
-    }, [buffer, mes, nowGenerating])
+    }, [buffer, swipeText, nowGenerating])
 
     return (
         <Animated.View style={{ overflow: 'scroll', height: animHeight }}>
@@ -78,7 +64,7 @@ const ChatTextLast: React.FC<ChatTextProps> = ({ nowGenerating, id }) => {
                     markdownit={MarkdownStyle.Rules}
                     rules={MarkdownStyle.RenderRules}
                     style={MarkdownStyle.Styles}>
-                    {nowGenerating && swipeId === currentSwipeId ? buffer.trim() : mes.trim()}
+                    {nowGenerating && swipeId === currentSwipeId ? buffer.trim() : swipeText.trim()}
                 </Markdown>
             </View>
         </Animated.View>

app/components/ChatMenu/ChatWindow/ChatWindow.tsx

@@ -12,15 +12,15 @@ type ListItem = {
 }
 
 const ChatWindow = () => {
-    const data = Chats.useChat((state) => state.data)
+    const { chat } = Chats.useChat()
     const [autoScroll, setAutoScroll] = useMMKVBoolean(AppSettings.AutoScroll)
 
-    const list: ListItem[] = (data?.messages ?? [])
+    const list: ListItem[] = (chat?.messages ?? [])
         .map((item, index) => ({
             index: index,
             key: item.id.toString(),
             isGreeting: index === 0,
-            isLastMessage: !!data?.messages && index === data?.messages.length - 1,
+            isLastMessage: !!chat?.messages && index === chat?.messages.length - 1,
         }))
         .reverse()
 

app/components/ChatMenu/ChatWindow/EditorModal.tsx

@@ -47,20 +47,15 @@ type EditorProps = {
 }
 
 const EditorModal: React.FC<EditorProps> = ({ id, isLastMessage, setEditMode, editMode }) => {
-    const { updateChat, deleteChat } = Chats.useChat(
-        useShallow((state) => ({
-            updateChat: state.updateEntry,
-            deleteChat: state.deleteEntry,
-        }))
-    )
-    const message = Chats.useChat((state) => state?.data?.messages?.[id])
+    const { deleteChat } = Chats.useChat()
+    const { updateEntry } = Chats.useEntry()
+    const { swipeText } = Chats.useSwipeData(id)
+    const entry = Chats.useEntryData(id)
 
-    const [placeholderText, setPlaceholderText] = useState(
-        message?.swipes[message?.swipe_id]?.swipe ?? ''
-    )
+    const [placeholderText, setPlaceholderText] = useState(swipeText)
 
     const handleEditMessage = () => {
-        updateChat(id, placeholderText, false)
+        updateEntry(id, placeholderText, false)
         setEditMode(false)
     }
 
@@ -99,9 +94,9 @@ const EditorModal: React.FC<EditorProps> = ({ id, isLastMessage, setEditMode, ed
                 <View style={{ flex: 1 }} />
                 <Animated.View exiting={SlideOutDown.duration(100)} style={styles.editorContainer}>
                     <View style={styles.topText}>
-                        <Text style={styles.nameText}>{message?.name}</Text>
+                        <Text style={styles.nameText}>{entry?.name}</Text>
                         <Text style={styles.timeText}>
-                            {message?.swipes[message.swipe_id].send_date.toLocaleTimeString()}
+                            {entry?.swipes[entry.swipe_id].send_date.toLocaleTimeString()}
                         </Text>
                     </View>
 

app/components/ChatMenu/ChatWindow/Swipes.tsx

@@ -1,10 +1,9 @@
 import { AntDesign } from '@expo/vector-icons'
-import { Style } from 'constants/Global'
 import { Chats } from 'constants/Chat'
+import { Style } from 'constants/Global'
 import { continueResponse, generateResponse, regenerateResponse } from 'constants/Inference'
 import React from 'react'
-import { View, Text, StyleSheet, TouchableHighlight } from 'react-native'
-import { useShallow } from 'zustand/react/shallow'
+import { StyleSheet, Text, TouchableHighlight, View } from 'react-native'
 
 type SwipesProps = {
     nowGenerating: boolean
@@ -13,16 +12,8 @@ type SwipesProps = {
 }
 
 const Swipes: React.FC<SwipesProps> = ({ nowGenerating, isGreeting, index }) => {
-    const { swipeChat, addSwipe } = Chats.useChat(
-        useShallow((state) => ({
-            swipeChat: state.swipe,
-            addSwipe: state.addSwipe,
-        }))
-    )
-
-    const { message } = Chats.useChat((state) => ({
-        message: state?.data?.messages?.[index] ?? Chats.dummyEntry,
-    }))
+    const { swipeChat, addSwipe } = Chats.useSwipes()
+    const entry = Chats.useEntryData(index)
 
     const handleSwipeLeft = () => {
         swipeChat(index, -1)
@@ -38,19 +29,19 @@ const Swipes: React.FC<SwipesProps> = ({ nowGenerating, isGreeting, index }) =>
         }
     }
 
-    const isLastAltGreeting = isGreeting && message.swipe_id === message.swipes.length - 1
+    const isLastAltGreeting = isGreeting && entry.swipe_id === entry.swipes.length - 1
 
     return (
         <View style={styles.swipesItem}>
             <TouchableHighlight
                 style={styles.swipeButton}
                 onPress={handleSwipeLeft}
-                disabled={nowGenerating || message.swipe_id === 0}>
+                disabled={nowGenerating || entry.swipe_id === 0}>
                 <AntDesign
                     name="left"
                     size={20}
                     color={
-                        message.swipe_id === 0 || nowGenerating
+                        entry.swipe_id === 0 || nowGenerating
                             ? Style.getColor('primary-text3')
                             : Style.getColor('primary-text1')
                     }
@@ -59,10 +50,8 @@ const Swipes: React.FC<SwipesProps> = ({ nowGenerating, isGreeting, index }) =>
 
             {index !== 0 && (
                 <TouchableHighlight
-                    onPress={() => regenerateResponse(message.swipes[message.swipe_id].id)}
-                    onLongPress={() =>
-                        regenerateResponse(message.swipes[message.swipe_id].id, false)
-                    }
+                    onPress={() => regenerateResponse(entry.swipes[entry.swipe_id].id)}
+                    onLongPress={() => regenerateResponse(entry.swipes[entry.swipe_id].id, false)}
                     disabled={nowGenerating}
                     style={styles.swipeButton}>
                     <AntDesign
@@ -78,12 +67,12 @@ const Swipes: React.FC<SwipesProps> = ({ nowGenerating, isGreeting, index }) =>
             )}
 
             <Text style={styles.swipeText}>
-                {message.swipe_id + 1} / {message.swipes.length}
+                {entry.swipe_id + 1} / {entry.swipes.length}
             </Text>
 
             {index !== 0 && (
                 <TouchableHighlight
-                    onPress={() => continueResponse(message.swipes[message.swipe_id].id)}
+                    onPress={() => continueResponse(entry.swipes[entry.swipe_id].id)}
                     disabled={nowGenerating}
                     style={styles.swipeButton}>
                     <AntDesign
@@ -101,9 +90,7 @@ const Swipes: React.FC<SwipesProps> = ({ nowGenerating, isGreeting, index }) =>
             <TouchableHighlight
                 style={styles.swipeButton}
                 onPress={() => handleSwipeRight('')}
-                onLongPress={() =>
-                    handleSwipeRight(message?.swipes?.[message.swipe_id]?.swipe ?? '')
-                }
+                onLongPress={() => handleSwipeRight(entry?.swipes?.[entry.swipe_id]?.swipe ?? '')}
                 disabled={nowGenerating || isLastAltGreeting}>
                 <AntDesign
                     name="right"