feat(networks): add mistral suggestions

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/options-bar/index.tsx

@@ -9,7 +9,6 @@ import useScreenSize from "../../../../hooks/useScreenSize"
 
 export default function NetworksOptionsBar() {
   const { screen } = useScreenSize()
-  console.log("screen", screen)
 
   return (
     <Container className="fr-mb-2w">

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

@@ -1,12 +1,15 @@
-import { Container, SearchBar } from "@dataesr/dsfr-plus"
+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 { expansions } = useSearchExpansion()
+
   const id = "networks-options-search-bar-modal"
 
   return (
@@ -24,6 +27,20 @@ export default function NetworkSearchBarModal() {
           }}
         />
       </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/hooks/useSearchExpansion.ts

@@ -0,0 +1,24 @@
+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() {
+  const { currentQuery } = useUrl()
+
+  const { data, error, isFetching } = useQuery({
+    queryKey: ["network", "expansion", currentQuery],
+    queryFn: () =>
+      mistralAgentCompletion({
+        query: currentQuery,
+        agentId: "ag:03ee88d7:20241211:extend-search:042576a9",
+      }),
+    enabled: currentQuery?.length > 3,
+  })
+
+  const values = useMemo(() => {
+    return { expansions: data as Array<string>, isFetching, error }
+  }, [data, isFetching, error])
+
+  return values
+}

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 ?",

client/src/pages/trends/components/filters/years/index.tsx

@@ -19,8 +19,6 @@ export default function PublicationYearFilter() {
     Math.min(MAX_YEAR, Number(byYear[byYear.length - 1].value)),
   ]
 
-  console.log("currentFilters", currentFilters)
-
   const min = Number(currentFilters?.year?.values?.[0]?.value || defaultValues[0])
   const max = Number(currentFilters?.year?.values?.[1]?.value || defaultValues[1])
 

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

@@ -8,7 +8,6 @@ import TrendsParametersButton from "../parameters/button"
 
 export default function TrendsOptionsBar() {
   const { screen } = useScreenSize()
-  console.log("screen", screen)
 
   return (
     <Container className="fr-mb-2w">