Properly memoize Search to not rely on messagesByGuid hook

Nuvotion-Visuals · Sep 20, 2023 · 3103501 · 3103501
1 parent 7a98298
commit 3103501
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 109 deletions.
diff --git a/components/Channel.tsx b/components/Channel.tsx
@@ -1,5 +1,5 @@
 import { scrollToElementById, Box, Button, Dropdown, Item, useBreakpoint } from '@avsync.live/formation'
-import React, { useState } from 'react'
+import React, { memo, useState } from 'react'
 import { use100vh } from 'react-div-100vh'
 import { useLayout_decrementActiveSwipeIndex } from 'redux-tk/layout/hook'
 import { useSpaces_activeChannel, useSpaces_activeGroup, useSpaces_activeSpace } from 'redux-tk/spaces/hook'
@@ -9,32 +9,28 @@ import { Threads } from './Threads'
 
 import { ChatBox } from './ChatBox'
 
-interface Props {
-
-}
-
-export const Channel = React.memo(({ }: Props) => {
-  const true100vh = use100vh()
-
-  const { isDesktop } = useBreakpoint()
-
-  const decrementActiveSwipeIndex = useLayout_decrementActiveSwipeIndex()
-
-  const activeChannel = useSpaces_activeChannel()
-  const activeSpace = useSpaces_activeSpace()
-  const activeGroup = useSpaces_activeGroup()
 
-  const handleClickBottom = () => {
-    scrollToElementById(`bottom_channel`, {
-      behavior: 'smooth',
-      block: 'end',
-      inline: 'nearest'
-    })
-  }
-
-  const [height, setHeight] = useState(160);
+type ChannelHeaderProps = {
+  activeSpace: {
+    name: string,
+    guid: string
+  } | null,
+  activeGroup: {
+    name: string,
+    guid: string
+  } | null,
+  activeChannel: {
+    name: string,
+    guid: string,
+    threadGuids: string[]
+  } | null,
+  isDesktop: boolean,
+  decrementActiveSwipeIndex: () => void,
+  handleClickBottom: () => void
+}
 
-  return (<S.Channel true100vh={true100vh || 0}>
+const ChannelHeader = memo(({ activeSpace, activeGroup, activeChannel, isDesktop, decrementActiveSwipeIndex, handleClickBottom }: ChannelHeaderProps) => {
+  return (
     <Box height='var(--F_Header_Height)' width={'100%'}>
       <Item>
 
@@ -78,12 +74,49 @@ export const Channel = React.memo(({ }: Props) => {
             {
               icon: 'trash-alt',
               iconPrefix: 'fas',
-              name: 'Delete',
+              name: 'Delete'
             }
           ]}
         />
       </Item>
     </Box>
+  )
+})
+
+interface Props {
+
+}
+
+export const Channel = React.memo(({ }: Props) => {
+  const true100vh = use100vh()
+
+  const { isDesktop } = useBreakpoint()
+
+  const decrementActiveSwipeIndex = useLayout_decrementActiveSwipeIndex()
+
+  const activeChannel = useSpaces_activeChannel()
+  const activeSpace = useSpaces_activeSpace()
+  const activeGroup = useSpaces_activeGroup()
+
+  const handleClickBottom = () => {
+    scrollToElementById(`bottom_channel`, {
+      behavior: 'smooth',
+      block: 'end',
+      inline: 'nearest'
+    })
+  }
+
+  const [height, setHeight] = useState(160);
+
+  return (<S.Channel true100vh={true100vh || 0}>
+    <ChannelHeader 
+      activeSpace={activeSpace}
+      activeGroup={activeGroup}
+      activeChannel={activeChannel}
+      isDesktop={isDesktop}
+      decrementActiveSwipeIndex={decrementActiveSwipeIndex}
+      handleClickBottom={handleClickBottom}
+    />
 
     <S.Content height={height}>
       <Threads />

diff --git a/components/ChatBox.tsx b/components/ChatBox.tsx
@@ -169,19 +169,23 @@ export const ChatBox = ({
     addMessage({ guid: responseGuid, message: newResponse })
     addMessageToThread({ threadGuid: guid, messageGuid: responseGuid })
 
+    const messageWithContext = `
+      Space Description: ${activeSpace?.description}
+      Group Description: ${activeGroup?.description}
+      Channel Description: ${activeChannel?.description}
+
+      User Message: ${message}
+
+      Action: given the context, respond directy to the user.
+    `
+
+    console.log(messageWithContext)
+
     // send message to server
     const action = {
       type: 'message',
       guid,
-      message: `
-        Space Description: ${activeSpace?.description}
-        Group Description: ${activeGroup?.description}
-        Channel Description: ${activeChannel?.description}
-
-        User Message: ${message}
-
-        Action: given the context, respond directy to the user.
-      `,
+      message: messageWithContext,
       conversationId: guid,
       parentMessageId: 'initial',
       personaLabel: 'Harmony',

diff --git a/components/Search/Search.tsx b/components/Search/Search.tsx
@@ -127,7 +127,6 @@ export const Search = React.memo(({ hero } : Props) => {
 
   const Content = () => (
     <>
-      <LineBreak />
         {
           searchResults?.data?.results?.knowledge_panel?.title && (
             <KnowledgePanel knowledge_panel={searchResults.data.results.knowledge_panel} />

diff --git a/components/SearchSuggestions.tsx b/components/SearchSuggestions.tsx
@@ -1,10 +1,11 @@
 import { Box, Button, Gap, TextInput } from '@avsync.live/formation'
 import { getWebsocketClient } from 'client/connectivity/websocket-client'
 import { useLanguageAPI } from 'client/language/hooks'
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useSpaces_activeChannel, useSpaces_messagesByGuid, useSpaces_threadsByGuid } from 'redux-tk/spaces/hook'
 import styled from 'styled-components'
 import { ResponseStream } from './ResponseStream'
+import { getStore } from 'redux-tk/store'
 
 interface Props {
   onSend: (message: string) => void,
@@ -13,60 +14,47 @@ interface Props {
 }
 
 export const SearchSuggestions = ({ onSend, guid, query }: Props) => {
-    const threadsByGuid = useSpaces_threadsByGuid()
-    const activeChannel = useSpaces_activeChannel()
-    const messagesByGuid = useSpaces_messagesByGuid()
+  const threadsByGuid = useSpaces_threadsByGuid()
+  const activeChannel = useSpaces_activeChannel()
+  const { language, response, loading, error, completed } = useLanguageAPI('')
+  const { generate_searchQueries } = language
+  const [suggestedPrompts, set_suggestedPrompts] = useState([])
+  const [feedback, set_feedback] = useState('')
 
-    const { language, response, loading, error, completed } = useLanguageAPI('')
-    const { generate_searchQueries } = language
+  const generateSearchQueries = useCallback(async () => {
+    const state = getStore().getState()
+    const { messagesByGuid } = state.spaces
 
-    const [suggestedPrompts, set_suggestedPrompts] = useState([])
-
-    useEffect(() => {
-      if (response) {
-        try {
-          let obj = JSON.parse(response);
-          set_suggestedPrompts(obj.suggestions)
-        } catch (e) {}
-      }
-    }, [response, completed]);
-
-    const [ existingMessages, set_existingMessages ] = useState('')
-    useEffect(() => {
-      if (activeChannel?.threadGuids) {
-        set_existingMessages(threadsByGuid?.[guid]?.messageGuids.map((messageGuid, index) => (
-          `Existing message: ${messagesByGuid?.[messageGuid]?.message}`
-        )).join('\n'))
-      }
-    }, [threadsByGuid?.[guid]?.messageGuids])
-
-    const [feedback, set_feedback] = useState('')
-
-    useEffect(() => {
-      set_suggestedPrompts([])
-      // @ts-ignore
-      if (activeChannel?.description && getWebsocketClient?.send) {
-        generate_searchQueries(`
-          Channel name: ${activeChannel?.name}
-          Channel description: ${activeChannel?.description} 
+    const existingMessages = threadsByGuid?.[guid]?.messageGuids.map((messageGuid) => (
+      `Existing message: ${messagesByGuid?.[messageGuid]?.message}`
+    )).join('\n')
 
-          Thread name ${threadsByGuid?.[guid]?.name}
-          Thread description ${threadsByGuid?.[guid]?.description}
-          
-          Existing messages in thread: \n${existingMessages}
-          
-          Your previous suggestions (optional): ${suggestedPrompts}
+    await generate_searchQueries(`
+      Channel name: ${activeChannel?.name}
+      Channel description: ${activeChannel?.description}
+      Thread name: ${threadsByGuid?.[guid]?.name}
+      Thread description: ${threadsByGuid?.[guid]?.description}
+      Existing messages in thread: \n${existingMessages}
+      Your previous suggestions (optional): ${suggestedPrompts}
+      User feedback (optional): ${feedback}
+      Existing search term (optional): ${query}
+    `)
+  }, [activeChannel, threadsByGuid, guid, suggestedPrompts, feedback, query])
 
-          User feedback (optional): ${feedback}
-
-          Existing search term (optional): ${query}
-        `)
+  useEffect(() => {
+    if (response && completed) {
+      try {
+        const obj = JSON.parse(response)
+        set_suggestedPrompts(obj.suggestions)
+      } catch (e) {
+        console.error('JSON Parsing Error:', e)
       }
-    }, [guid])
+    }
+  }, [response, completed])
 
-  return (<S.ThreadSuggestions>
+  return (
     <Box width='100%'>
-      <Gap gap={.25}>
+      <Gap gap={0.25}>
         <ResponseStream
           icon='search'
           text={response || ''}
@@ -78,7 +66,7 @@ export const SearchSuggestions = ({ onSend, guid, query }: Props) => {
           loading={loading}
         />
 
-        <Box width={'100%'} px={.5} mb={.25}>
+        <Box width='100%' px={0.5} mb={0.25}>
           <TextInput
             value={feedback}
             onChange={val => set_feedback(val)}
@@ -88,36 +76,19 @@ export const SearchSuggestions = ({ onSend, guid, query }: Props) => {
             hideOutline
           />
 
-          <Box >
-            <Button 
-              secondary 
-              icon='lightbulb' 
+          <Box>
+            <Button
+              secondary
+              icon='lightbulb'
               text='Suggest'
-              iconPrefix='fas' 
-              onClick={() => {
-                set_suggestedPrompts([])
-                generate_searchQueries(`
-                  Channel name: ${activeChannel?.name}
-                  Channel description: ${activeChannel?.description} 
-                
-                  Thread name ${threadsByGuid?.[guid]?.name}
-                  Thread description ${threadsByGuid?.[guid]?.description}
-                  
-                  Existing messages in thread: \n${existingMessages}
-                  
-                  Your previous suggestions (optional): ${suggestedPrompts}
-                
-                  User feedback (optional): ${feedback}
-
-                  Existing search term (optional): ${query}
-                `)
-              }} 
+              iconPrefix='fas'
+              onClick={generateSearchQueries}
             />
           </Box>
         </Box>
       </Gap>
     </Box>
-  </S.ThreadSuggestions>)
+  )
 }
 
 const S = {