Merge branch 'refactor/ui'

apps/ui/package.json

@@ -45,6 +45,7 @@
     "npm": "^9.6.2",
     "openai": "^3.2.1",
     "papaparse": "^5.4.1",
+    "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-avatar": "^5.0.3",
     "react-cookie": "^4.1.1",
@@ -73,7 +74,6 @@
     "vite-plugin-env-compatible": "^1.1.1",
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",
-    "wagmi": "0.12.2",
     "web-vitals": "^3.0.2",
     "yup": "^0.32.11"
   },

apps/ui/src/App.tsx

@@ -1,7 +1,6 @@
 import { BrowserRouter } from 'react-router-dom'
 import Route from './Route'
 
-import Wagmi from 'utils/wagmi'
 import { ApolloProvider } from '@apollo/client'
 import * as Sentry from '@sentry/react'
 
@@ -26,23 +25,21 @@ function App() {
 
   return (
     <Sentry.ErrorBoundary>
-      <Wagmi>
-        <ApolloProvider client={client}>
-          <ModalsProvider>
-            <BrowserRouter>
-              <SnackbarProvider>
-                <ToastProvider>
-                  <AuthProvider>
-                    <LayoutProvider>
-                      <Route />
-                    </LayoutProvider>
-                  </AuthProvider>
-                </ToastProvider>
-              </SnackbarProvider>
-            </BrowserRouter>
-          </ModalsProvider>
-        </ApolloProvider>
-      </Wagmi>
+      <ApolloProvider client={client}>
+        <ModalsProvider>
+          <BrowserRouter>
+            <SnackbarProvider>
+              <ToastProvider>
+                <AuthProvider>
+                  <LayoutProvider>
+                    <Route />
+                  </LayoutProvider>
+                </AuthProvider>
+              </ToastProvider>
+            </SnackbarProvider>
+          </BrowserRouter>
+        </ModalsProvider>
+      </ApolloProvider>
     </Sentry.ErrorBoundary>
   )
 }

apps/ui/src/gql/ai/datasource/createDatasource.gql

@@ -1,3 +1,5 @@
+#import "./dataSourceFragment.gql"
+
 mutation createDatasource($input: input!) @api(name: ai) {
   createDatasource(input: $input)
     @rest(
@@ -7,17 +9,6 @@ mutation createDatasource($input: input!) @api(name: ai) {
       bodyKey: "input"
       endpoint: "ai"
     ) {
-    id
-    name
-    description
-    source_type
-    status
-    workspace_id
-    is_deleted
-    is_public
-    account_id
-    created_by
-    modified_by
-    error
+    ...DataSourceFragment
   }
 }

apps/ui/src/gql/ai/datasource/dataSourceFragment.gql

@@ -0,0 +1,14 @@
+fragment DataSourceFragment on Datasource {
+  id
+  name
+  description
+  source_type
+  status
+  workspace_id
+  is_deleted
+  is_public
+  account_id
+  created_by
+  modified_by
+  error
+}

apps/ui/src/gql/ai/datasource/datasourceById.gql

@@ -1,16 +1,8 @@
+#import "./dataSourceFragment.gql"
+
 query datasourceById($id: id!) @api(name: "ai") {
   datasourceById(id: $id)
     @rest(type: "Datasource", path: "/datasource/{args.id}", method: "GET", endpoint: "ai") {
-    id
-    name
-    description
-    source_type
-    workspace_id
-    is_deleted
-    is_public
-    account_id
-    created_by
-    modified_by
-    error
+    ...DataSourceFragment
   }
 }

apps/ui/src/gql/ai/datasource/datasources.gql

@@ -1,16 +1,7 @@
-query getDatasources @api(name: "ai") {
-  getDatasources @rest(type: "Datasource", path: "/datasource", method: "GET", endpoint: "ai") {
-    id
-    name
-    description
-    source_type
-    status
-    workspace_id
-    is_deleted
-    is_public
-    account_id
-    created_by
-    modified_by
-    error
+#import "./dataSourceFragment.gql"
+
+query dataSources @api(name: "ai") {
+  dataSources @rest(type: "Datasource", path: "/datasource", method: "GET", endpoint: "ai") {
+    ...DataSourceFragment
   }
 }

apps/ui/src/gql/ai/datasource/updateDatasource.gql

@@ -1,17 +1,8 @@
+#import "./dataSourceFragment.gql"
+
 mutation updateDatasource($id: id!, $input: input!) @api(name: "ai") {
   updateDatasource(id: $id, input: $input)
     @rest(type: "Datasource", path: "/datasource/{args.id}", method: "PUT", endpoint: "ai") {
-    id
-    name
-    description
-    source_type
-    status
-    workspace_id
-    is_deleted
-    is_public
-    account_id
-    created_by
-    modified_by
-    error
+    ...DataSourceFragment
   }
 }

apps/ui/src/pages/Agents/AgentForm/useAgentForm.ts

@@ -9,7 +9,7 @@ export const useAgentForm = (formik: any) => {
 
   const { uploadFile } = useUploadFile()
 
-  const { data: datasourcesData } = useDatasourcesService()
+  const { data: dataSources } = useDatasourcesService()
   const { data: tools } = useToolsService()
   const { data: models } = useModelsService()
 
@@ -18,8 +18,8 @@ export const useAgentForm = (formik: any) => {
     label: `${name} (${provider})`,
   }))
 
-  const datasourceOptions = datasourcesData?.map((datasource: any) => {
-    return { value: datasource.id, label: datasource.name }
+  const datasourceOptions = dataSources?.map(({ id, name }) => {
+    return { value: id, label: name }
   })
 
   const toolOptions = tools

apps/ui/src/pages/Agents/AgentView/components/AgentDatasources.tsx

@@ -8,15 +8,16 @@ import Typography from '@l3-lib/ui-core/dist/Typography'
 import { StyledWrapper } from './AgentToolkits'
 import TypographyPrimary from 'components/Typography/Primary'
 
-const AgentDatasources = ({ datasources }: any) => {
+type AgentDataSourcesProps = {
+  datasources: string[]
+}
+
+const AgentDatasources = ({ datasources }: AgentDataSourcesProps) => {
   const { t } = useTranslation()
-  const { data: datasourcesData } = useDatasourcesService()
-  const filteredDatasources = datasourcesData?.filter((datasource: any) => {
-    if (datasources?.includes(datasource.id)) {
-      return datasource
-    } else {
-      return
-    }
+  const { data: dataSources } = useDatasourcesService()
+
+  const filteredDatasources = dataSources?.filter(({ id }) => {
+    return datasources?.includes(id)
   })
 
   return (
@@ -28,9 +29,9 @@ const AgentDatasources = ({ datasources }: any) => {
       />
 
       <StyledInnerWrapper>
-        {filteredDatasources?.map((datasource: any, index: number) => {
+        {filteredDatasources?.map((datasource, index: number) => {
           const filteredLogos = DATA_LOADER_IMAGES.filter(
-            (loaderImages: any) => loaderImages.sourceName === datasource.source_type,
+            loaderImages => loaderImages.sourceName === datasource.source_type,
           )
 
           const imageSrc = filteredLogos?.[0]?.imageSrc || ''

apps/ui/src/pages/Datasource/Datasource.tsx

@@ -40,9 +40,9 @@ const Datasource = () => {
       </StyledHeaderGroup>
       <ComponentsWrapper noPadding>
         <StyledCardsWrapper>
-          {datasources?.map((datasource: any, index: number) => {
+          {datasources?.map((datasource, index: number) => {
             const filteredLogos = DATA_LOADER_IMAGES.filter(
-              (loaderImages: any) => loaderImages.sourceName === datasource.source_type,
+              loaderImages => loaderImages.sourceName === datasource.source_type,
             )
 
             const imageSrc = filteredLogos?.[0]?.imageSrc || ''

apps/ui/src/pages/TeamOfAgents/TeamOfAgentsForm/useTeamOfAgentsForm.ts

@@ -16,7 +16,7 @@ export const useTeamOfAgentsForm = (formik: any) => {
     value: id,
     label: `${name} (${provider})`,
   }))
-  const datasourceOptions = datasourcesData?.map((datasource: any) => {
+  const datasourceOptions = datasourcesData?.map(datasource => {
     return { value: datasource.id, label: datasource.name }
   })
   const toolOptions = tools

apps/ui/src/services/datasource/useDatasourcesService.ts

@@ -1,11 +1,16 @@
 import { useQuery } from '@apollo/client'
-import datasourcesGql from '../../gql/ai/datasource/datasources.gql'
+import DATA_SOURCES_GQL from '../../gql/ai/datasource/datasources.gql'
+import { DataSource } from 'types'
+
+type UseDataSourcesServiceData = {
+  dataSources: DataSource[]
+}
 
 export const useDatasourcesService = () => {
-  const { data, error, loading, refetch } = useQuery(datasourcesGql)
+  const { data, error, loading, refetch } = useQuery<UseDataSourcesServiceData>(DATA_SOURCES_GQL)
 
   return {
-    data: data?.getDatasources || [],
+    data: data?.dataSources || [],
     error,
     loading,
     refetch,

apps/ui/src/types/dataSource.ts

@@ -0,0 +1,16 @@
+import { Nullable } from 'types'
+
+export interface DataSource {
+  id: string
+  name: string
+  description: string
+  source_type: string
+  status: 'Indexing' | 'Ready' | 'Failed'
+  workspace_id: Nullable<string>
+  is_deleted: boolean
+  is_public: boolean
+  account_id: string
+  created_by: string
+  modified_by: string
+  error: Nullable<string>
+}

apps/ui/src/types/index.ts

@@ -3,3 +3,4 @@ export * from './team'
 export * from './model'
 export * from './schedule'
 export * from './run'
+export * from './dataSource'