Merge pull request #220 from l3vels/refactor/ui

Refactor: vite eslint config and fix errors

apps/ui/package.json

@@ -78,12 +78,12 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start:local": "rm -rf ./node_modules/.cache/babel-loader && GENERATE_SOURCEMAP=false NODE_ENV=local vite --open",
-    "start:dev": "GENERATE_SOURCEMAP=false DISABLE_ESLINT_PLUGIN=true vite --mode develop --open",
-    "build": "NODE_OPTIONS=--max_old_space_size=4096 GENERATE_SOURCEMAP=true DISABLE_ESLINT_PLUGIN=true tsc && vite build",
-    "build:dev": "NODE_OPTIONS=--max_old_space_size=8192 GENERATE_SOURCEMAP=true DISABLE_ESLINT_PLUGIN=true vite build --mode develop",
-    "build:staging": "NODE_OPTIONS=--max_old_space_size=4096 GENERATE_SOURCEMAP=true DISABLE_ESLINT_PLUGIN=true vite build --mode staging",
-    "build:prod": "NODE_OPTIONS=--max_old_space_size=8192 GENERATE_SOURCEMAP=true DISABLE_ESLINT_PLUGIN=true vite build --mode production",
+    "start:local": "NODE_ENV=local vite --open",
+    "start:dev": "vite --mode develop --open",
+    "build": "NODE_OPTIONS=--max_old_space_size=8192 tsc && vite build",
+    "build:dev": "NODE_OPTIONS=--max_old_space_size=8192 vite build --mode develop",
+    "build:staging": "NODE_OPTIONS=--max_old_space_size=8192 vite build --mode staging",
+    "build:prod": "NODE_OPTIONS=--max_old_space_size=8192 vite build --mode production",
     "test": "vite test",
     "eject": "vite eject",
     "lint": "eslint --ext .ts,.tsx src",

apps/ui/src/components/AvatarGenerator/AvatarGenerator.tsx

@@ -23,6 +23,7 @@ const AvatarGenerator = ({
   avatar,
 }: AvatarGeneratorProps) => {
   return (
+    // @ts-expect-error https://github.com/ambassify/react-avatar/issues/258
     <ConfigProvider colors={AVATAR_COLORS}>
       <StyledAvatar
         name={name}

apps/ui/src/components/DataGrid/DataGrid.tsx

@@ -19,8 +19,6 @@ import {
 // import useDataGrid from './useDataGrid'
 // import { AddRowButton } from './AddRowButton'
 
-// import { useUpdateCacheThenServerProperty } from 'services/usePropertyService'
-
 import processDataFromClipboard from './helpers/processDataFromClipboard'
 import styled from 'styled-components'
 import { LayoutContext } from 'contexts'
@@ -248,7 +246,7 @@ const DataGrid = forwardRef(
             if (localHiddenData) {
               const JsonLocalData = await JSON.parse(localHiddenData)
               Object.entries(JsonLocalData[`${path}`]).forEach(function (key) {
-                params.columnApi.setColumnVisible(key[0], key[1])
+                params.columnApi.setColumnVisible(key[0], key[1] as boolean)
               })
             }
 
@@ -303,7 +301,11 @@ const DataGrid = forwardRef(
 
 export default DataGrid
 
-const StyledDiv = styled.div<{ headerHeight?: number; elementHeights?: number; maxHeight: number }>`
+const StyledDiv = styled.div<{
+  headerHeight?: number
+  elementHeights?: number
+  maxHeight: number | null
+}>`
   height: ${p =>
     p.elementHeights ? `calc(100vh - ${p.elementHeights}px) ` : 'calc(100vh - 175px)'};
   // height: ${p => (p.elementHeights ? `100vh - ${p.elementHeights}` : '100vh')};

apps/ui/src/components/Mentions/Mentions.tsx

@@ -25,8 +25,8 @@ type MentionsProps = {
   onChange: OnChangeHandlerType
   onKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>
   setValue: any
-  agentId: Nullable<string>
-  teamId: Nullable<string>
+  agentId?: Nullable<string>
+  teamId?: Nullable<string>
 }
 
 const Mentions = ({

apps/ui/src/components/Spotlight/Spotlight.tsx

@@ -231,8 +231,8 @@ const Spotlight = () => {
                           value={formValue}
                           onKeyDown={handleKeyDown}
                           setValue={setFormValue}
-                          isGeneralChat={!agentId && !teamId}
-                          chatType={agentId ? 'agent' : teamId ? 'team' : 'general'}
+                          agentId={agentId}
+                          teamId={teamId}
                         />
                       </StyledInputCover>
 

apps/ui/src/components/Spotlight/useSuggestions.ts

@@ -1,47 +1,3 @@
-import { useLocation } from 'react-router-dom'
-
-const homeSuggestions = [
-  // 'Give me the top three minted assets in a table for all games.',
-  // 'Analyze my games and assets using our database to generate a report on player, transaction data, and other relevant insights.',
-  // 'Import polygon contract with address "X" in game "Y"',
-  // 'How many assets are in that game?',
-  // 'How many unique players are in all my game?',
-]
-const gameSuggestions = [
-  // 'How many assets are in that game?',
-  // 'Give me table of top three minted assets in that game.',
-  // 'How many unique players are in that game?',
-  // 'Give me top three players in that game.',
-  // 'Import ethereum contract with address "0xeaa4c58427c184413b04db47889b28b5c98ebb7b" in that game',
-]
-const collectionSuggestions = [
-  // 'How many assets are in that collection?',
-  // 'What is collection categories',
-  // 'collection?',
-  // 'How many collections are in that game?',
-  // 'Can you tell some dad jokes?',
-]
-const playerSuggestions = [
-  // 'Give me top 3 players in that game.',
-  // 'What is player wallet address',
-  // 'How many players are in that game?',
-  // 'Give me top minted assets in that game.',
-  // 'Can you tell some dad jokes?',
-]
-
 export const useSuggestions = () => {
-  let chatSuggestions = homeSuggestions
-
-  const location = useLocation()
-  const { pathname } = location
-
-  if (pathname.includes('player')) {
-    chatSuggestions = playerSuggestions
-  } else if (pathname.includes('collection')) {
-    chatSuggestions = collectionSuggestions
-  } else if (pathname.includes('game')) {
-    chatSuggestions = gameSuggestions
-  }
-
-  return { chatSuggestions }
+  return { chatSuggestions: [] }
 }

apps/ui/src/interfaces/index.ts

@@ -1,5 +1,4 @@
 export * from './account.interface'
-export * from './game.interface'
 export * from './user.interface'
 export * from './tableRow.interface'
 export * from './accountSetting.interface'

apps/ui/src/modals/AIChatModal/components/ChatV2.tsx

@@ -72,7 +72,7 @@ const ChatV2 = () => {
 
   const [createClientChatMessage] = useCreateClientChatMessageService()
 
-  const { apiVersion, setAPIVersion, thinking, setThinking, socket } = useChatState()
+  const { thinking, setThinking, socket } = useChatState()
 
   const { data: chatMessages } = useChatMessagesService({
     agentId,
@@ -290,7 +290,9 @@ const ChatV2 = () => {
           <ChatMessageListV2
             data={chatMessages}
             thinking={thinking}
+            // @ts-expect-error TODO: fix type
             isNewMessage={socket?.isNewMessage}
+            // @ts-expect-error TODO: fix type
             setIsNewMessage={socket?.setIsNewMessage}
             setReply={setReply}
             reply={reply}

apps/ui/src/modals/AIChatModal/hooks/useChatSocket.ts

@@ -5,8 +5,7 @@ import getSessionId from '../utils/getSessionId'
 import useUpdateChatCache from './useUpdateChatCache'
 import { useLocation } from 'react-router-dom'
 
-type UseChatSocketProps = {
-}
+type UseChatSocketProps = {}
 
 const useChatSocket = () => {
   const { user, account } = useContext(AuthContext)
@@ -81,10 +80,7 @@ const useChatSocket = () => {
       }
 
       if (data.type === 'CHAT_STATUS') {
-        upsertChatStatusConfig(data.config, {
-          agentId: data.agent_id,
-          teamId: data.team_id,
-        })
+        upsertChatStatusConfig(data.config)
       }
     })
 
@@ -225,7 +221,9 @@ const useChatSocket = () => {
   const sendUserTyping = async (chat_id: string) => {
     const type = 'user_typing'
 
-    if(!user){ return }
+    if (!user) {
+      return
+    }
     // await send(type, {
     //   content: user?.first_name,
     //   example: false,

apps/ui/src/modals/AIChatModal/hooks/useUpdateChatCache.ts

@@ -24,7 +24,7 @@ const useUpdateChatCache = () => {
       teamId?: Nullable<string>
       chatId?: Nullable<string>
     } = {},
-  ) => {    
+  ) => {
     let queryVariables = omitBy(
       {
         agent_id: agentId,
@@ -89,21 +89,12 @@ const useUpdateChatCache = () => {
     )
   }
 
-  const upsertChatStatusConfig = (
-    config: Record<string, unknown>,
-    {
-      agentId,
-      teamId,
-    }: {
-      agentId?: Nullable<string>
-      teamId?: Nullable<string>
-    } = {},
-  ) => {
+  const upsertChatStatusConfig = (config: Record<string, unknown>) => {
     apolloClient.cache.updateQuery({ query: CONFIGS_GQL }, data => {
       const configs = data?.configs || []
       const newConfigs = [...configs]
 
-      const newConfig = {
+      const newConfig: any = {
         __typename: 'Config',
         ...config,
       }