Merge branch 'staging' of https://github.com/dataesr/scanr-ui into st…

…aging

client/src/api/networks/network/mistralai.ts

@@ -92,3 +92,28 @@ export async function openAiLabeledClusters(clusters: NetworkCommunities): Promi
 
   return clusters
 }
+
+
+export async function mistralAgentCompletion({ query, agentId }: { query: string; agentId: string }): Promise<unknown> {
+  const chatBody = {
+    messages: [
+      {
+        role: "user",
+        content: query,
+      },
+    ],
+    agent_id: agentId,
+  }
+
+  const response = await fetch(`${MISTRAL_URL}/agents/completions`, {
+    method: "POST",
+    headers: postHeaders,
+    body: JSON.stringify(chatBody),
+  })
+  const completion = await response.json()
+  const answer: string = completion?.choices?.[0]?.message?.content || null
+
+  const json = answer ? JSON.parse(answer) : undefined
+
+  return json
+}

client/src/pages/networks/components/filters/button.tsx

@@ -1,11 +1,15 @@
 import { Badge, Button } from "@dataesr/dsfr-plus"
 import useScreenSize from "../../../../hooks/useScreenSize"
 import useUrl from "../../../search/hooks/useUrl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkFiltersButton() {
   const { screen } = useScreenSize()
+  const { integrationOptions } = useIntegration()
   const { currentFilters } = useUrl()
 
+  if (integrationOptions.showFilters === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/options-bar/index.tsx

@@ -6,10 +6,13 @@ import NetworkSelectSourceButton from "../select-source/button"
 import NetworkFiltersButton from "../filters/button"
 import NetworkParametersButton from "../parameters/button"
 import useScreenSize from "../../../../hooks/useScreenSize"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworksOptionsBar() {
   const { screen } = useScreenSize()
-  console.log("screen", screen)
+  const { integrationOptions } = useIntegration()
+
+  if (integrationOptions.showOptionsBar === false) return null
 
   return (
     <Container className="fr-mb-2w">

client/src/pages/networks/components/parameters/button.tsx

@@ -1,11 +1,15 @@
 import { Button } from "@dataesr/dsfr-plus"
 import useScreenSize from "../../../../hooks/useScreenSize"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkParametersButton() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
   const { screen } = useScreenSize()
 
+  if (integrationOptions.showParameters === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/search-bar/button.tsx

@@ -1,13 +1,17 @@
 import { Button } from "@dataesr/dsfr-plus"
 import useUrl from "../../../search/hooks/useUrl"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkSearchBarButton() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
   const { currentQuery } = useUrl()
   const isEmptyQuery = !currentQuery || currentQuery === "*"
   const shortQuery = (currentQuery?.length || 0) > 20 ? currentQuery.slice(0, 17) + "..." : currentQuery
 
+  if (integrationOptions.showSearchBar === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/search-bar/modal.tsx

@@ -1,12 +1,28 @@
-import { Container, SearchBar } from "@dataesr/dsfr-plus"
+import { useState, useEffect } from "react"
+import { Container, SearchBar, Tag, TagGroup, Text } from "@dataesr/dsfr-plus"
 import Modal from "../../../../components/modal"
 import useUrl from "../../../search/hooks/useUrl"
+import useSearchExpansion from "../../hooks/useSearchExpansion"
 import { useIntl } from "react-intl"
 import { networkQuery } from "../../config/query"
 
 export default function NetworkSearchBarModal() {
   const intl = useIntl()
   const { currentQuery, handleQueryChange } = useUrl()
+  const [query, setQuery] = useState(currentQuery)
+  const [debouncedQuery, setDebouncedQuery] = useState(query)
+  const { expansions } = useSearchExpansion(debouncedQuery)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(query)
+    }, 1000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [query])
+
   const id = "networks-options-search-bar-modal"
 
   return (
@@ -17,13 +33,28 @@ export default function NetworkSearchBarModal() {
           buttonLabel={intl.formatMessage({ id: "networks.search-bar.button-label" })}
           defaultValue={currentQuery || ""}
           placeholder={intl.formatMessage({ id: "networks.search-bar.placeholder" })}
+          onChange={(event) => setQuery((event.target as HTMLInputElement).value)}
           onSearch={(value) => {
             handleQueryChange(networkQuery(value))
             // @ts-expect-error dsfr does not have types
             window.dsfr(document.getElementById(id)).modal.conceal()
           }}
         />
       </Container>
+      {expansions?.length && (
+        <Container fluid className="fr-mb-4w">
+          <Text size="sm" className="fr-mb-1w">
+            {intl.formatMessage({ id: "networks.get-started.search-bar.suggestions" })}
+          </Text>
+          <TagGroup>
+            {expansions.map((expansion, index) => (
+              <Tag key={index} as="button" color="green-emeraude">
+                {expansion}
+              </Tag>
+            ))}
+          </TagGroup>
+        </Container>
+      )}
     </Modal>
   )
 }

client/src/pages/networks/components/select-model/button.tsx

@@ -1,11 +1,15 @@
 import { Button } from "@dataesr/dsfr-plus"
 import useTab from "../../hooks/useTab"
 import { useIntl } from "react-intl"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkSelectModelButton() {
   const intl = useIntl()
+  const { integrationOptions } = useIntegration()
   const { currentTab } = useTab()
 
+  if (integrationOptions.showSelectModel === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/select-model/index.tsx

@@ -9,7 +9,7 @@ export default function NetworkSelectModel() {
   const { currentTab, handleTabChange } = useTab()
   const { integrationOptions } = useIntegration()
 
-  if (integrationOptions?.showSelect === false) return null
+  if (integrationOptions?.showSelectModel === false) return null
 
   return (
     <Select

client/src/pages/networks/components/select-source/button.tsx

@@ -1,6 +1,11 @@
 import { Button } from "@dataesr/dsfr-plus"
+import useIntegration from "../../hooks/useIntegration"
 
 export default function NetworkSelectSourceButton() {
+  const { integrationOptions } = useIntegration()
+
+  if (integrationOptions.showSelectSource === false) return null
+
   return (
     <Button
       className="fr-mt-1w fr-mr-1w"

client/src/pages/networks/components/select-source/index.tsx

@@ -6,7 +6,7 @@ export default function NetworkSelectSource() {
   const intl = useIntl()
   const { integrationOptions } = useIntegration()
 
-  if (integrationOptions?.showSelect === false) return null
+  if (integrationOptions?.showSelectSource === false) return null
 
   return (
     <Select

client/src/pages/networks/hooks/useIntegration.ts

@@ -14,16 +14,18 @@ export default function useIntegration() {
   const integrationOptions: NetworksIntegrationOptions = isIntegration
     ? {
         showGraphOnly: getBooleanParam(searchParams.get("showGraphOnly"), false),
+        showHeader: getBooleanParam(searchParams.get("showHeader")),
+        showBreadcrumb: false,
         showTitle: getBooleanParam(searchParams.get("showTitle")),
-        showSubtitle: getBooleanParam(searchParams.get("showSubtitle")),
-        showClustersAnalytics: getBooleanParam(searchParams.get("showClustersAnalytics")),
-        showClustersButton: getBooleanParam(searchParams.get("showClustersButton")),
-        showSearchBar: getBooleanParam(searchParams.get("useSearch")),
+        showOptionsBar: getBooleanParam(searchParams.get("showOptionsBar")),
+        showSearchBar: getBooleanParam(searchParams.get("showSearchBar")),
+        showSelectModel: getBooleanParam(searchParams.get("showSelectModel")),
+        showSelectSource: getBooleanParam(searchParams.get("showSelectSource")),
         showFilters: getBooleanParam(searchParams.get("showFilters")),
+        showParameters: getBooleanParam(searchParams.get("showParameters")),
         showExports: getBooleanParam(searchParams.get("showExports")),
-        showBreadcrumb: false,
-        showSelect: getBooleanParam(searchParams.get("showSelect")),
-        showHeader: getBooleanParam(searchParams.get("showHeader")),
+        showClustersButton: getBooleanParam(searchParams.get("showClustersButton")),
+        showClustersAnalytics: getBooleanParam(searchParams.get("showClustersAnalytics")),
         graphHeight: searchParams.get("graphHeight") || DEFAULT_INTEGRATION.graphHeight,
       }
     : DEFAULT_INTEGRATION

client/src/pages/networks/hooks/useSearchExpansion.ts

@@ -0,0 +1,25 @@
+import { useQuery } from "@tanstack/react-query"
+import useUrl from "../../search/hooks/useUrl"
+import { mistralAgentCompletion } from "../../../api/networks/network/mistralai"
+import { useMemo } from "react"
+
+export default function useSearchExpansion(forcedQuery?: string) {
+  const { currentQuery } = useUrl()
+  const query = forcedQuery || currentQuery
+
+  const { data, error, isFetching } = useQuery({
+    queryKey: ["network", "expansion", query],
+    queryFn: () =>
+      mistralAgentCompletion({
+        query: query,
+        agentId: "ag:03ee88d7:20241211:extend-search:042576a9",
+      }),
+    enabled: query?.length > 3,
+  })
+
+  const values = useMemo(() => {
+    return { expansions: data as Array<string>, isFetching, error }
+  }, [data, isFetching, error])
+
+  return values
+}

client/src/pages/networks/integration/config.ts

@@ -1,19 +1,21 @@
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { useMemo } from "react"
+import { NetworksIntegrationOptions } from "../../../types/network"
 
-
-export const DEFAULT_INTEGRATION = {
+export const DEFAULT_INTEGRATION: NetworksIntegrationOptions = {
   showGraphOnly: false,
+  showHeader: true,
+  showBreadcrumb: true,
   showTitle: true,
-  showSubtitle: true,
-  showClustersAnalytics: true,
-  showClustersButton: true,
+  showOptionsBar: true,
   showSearchBar: true,
+  showSelectModel: true,
+  showSelectSource: true,
   showFilters: true,
+  showParameters: true,
   showExports: true,
-  showBreadcrumb: true,
-  showSelect: true,
-  showHeader: true,
+  showClustersButton: true,
+  showClustersAnalytics: true,
   graphHeight: "600px",
 }
 

client/src/pages/networks/layout/index.tsx

@@ -5,19 +5,15 @@ import ClustersButton from "../components/clusters/button"
 import NetworkClusters from "../components/clusters"
 import NetworkAnalytics from "../components/clusters/analytics"
 import useIntegration from "../hooks/useIntegration"
-import useScreenSize from "../../../hooks/useScreenSize"
 import NetworksOptionsBar from "../components/options-bar"
 import NetworksOptionsModals from "../components/options-bar/modals"
 
 export default function NetworksLayout() {
   const { integrationOptions } = useIntegration()
   const { showGraphOnly } = integrationOptions
-  const { screen } = useScreenSize()
 
   if (showGraphOnly === true) return <NetworkCard />
 
-  console.log("screen", screen)
-
   return (
     <Container fluid>
       <NetworksHeader />

client/src/pages/networks/locales/en.json

@@ -45,6 +45,7 @@
     "networks.get-started.search-bar.title": "What are you looking for?",
     "networks.get-started.search-bar.description": "Define the scope of the corpus to be analyzed by searching our databases.",
     "networks.get-started.search-bar.examples": "Examples :",
+    "networks.get-started.search-bar.suggestions": "Suggestions :",
     "networks.get-started.select-source.title": "Which source do you want to use?",
     "networks.get-started.select-source.description": "Choose the source of documents to be analyzed.",
     "networks.get-started.select-model.title": "Which communities do you want to visualize?",

client/src/pages/networks/locales/fr.json

@@ -50,6 +50,7 @@
     "networks.get-started.search-bar.title": "Que recherchez vous ?",
     "networks.get-started.search-bar.description": "Définissez le périmètre du corpus à analyser grâce à une recherche dans nos bases de données.",
     "networks.get-started.search-bar.examples": "Exemples :",
+    "networks.get-started.search-bar.suggestions": "Suggestions :",
     "networks.get-started.select-source.title": "Quelle source voulez-vous utiliser ?",
     "networks.get-started.select-source.description": "Choississez la source de documents à analyser.",
     "networks.get-started.select-model.title": "Quelles communautés souhaitez-vous visualiser ?",