fix

README.md

@@ -1,51 +1,18 @@
-# template-nextjs
+# albert-docs
 
-![GitHub last commit (branch)](https://img.shields.io/github/last-commit/betagouv/template/main)
-![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/betagouv/template)
+![GitHub last commit (branch)](https://img.shields.io/github/last-commit/betagouv/albert-docs/main)
+![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/betagouv/albert-docs)
 
-Template minimal avec Next.js qui intègre les recommandations tech beta.gouv.fr.
+Minimalist UI for [albert-API](https://github.com/etalab-ia/albert-api/). Drop documents and query them with LLM.
 
-> ⚠️ Le [Système de Design de l'État](https://www.systeme-de-design.gouv.fr/) s'adresse **uniquement** aux développeurs et aux concepteurs, qu'ils soient agents publics ou prestataires pour des sites Internet de l'État (Ministères, Administrations centrales, Préfectures, Ambassades, etc.). cf [conditions d'utilisation](https://www.systeme-de-design.gouv.fr/utilisation-et-organisation/perimetre-d-application).
+## Start
 
-👉 Démo: https://betagouv.github.io/template-nextjs
-
-## Lancer le code
-
-Après avoir cloné le projet :
-
-### Développement
-
-```bash
-yarn # to install dependencies
-yarn dev # to run in dev mode
-```
-
-Point your browser to [http://127.0.0.1:3000/template](http://127.0.0.1:3000/template) and start playing.
-
-### Tests
-
-```
-# run unit tests with vitest
-yarn test
-
-# build, serve and launch playwright interactive end-to-end tests
-yarn e2e --ui
-
-# run storybook
-yarn storybook
+```sh
+export ALBERT_API_KEY=xxx
+yarn
+yarn dev
 ```
 
-## Projets connexes
-
-| projet                                                                                  | description                                                 |
-| --------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
-| [inclusion-numerique/stack](https://github.com/inclusion-numerique/stack)               | Stack DSFR + Next.js + OIDC                                 |
-| [InseeFrLab/vite-insee-starter](https://github.com/InseeFrLab/vite-insee-starter)       | Starter SPA Vite + DSFR + OIDC                              |
-| [betagouv/rails-template](https://github.com/betagouv/rails-template)                   | Template DSFR pour Ruby on Rails                            |
-| [betagouv/django-template](https://github.com/betagouv/django-template)                 | Template DSFR pour Django                                   |
-| [codegouvfr/eleventy-dsfr](https://github.com/codegouvfr/eleventy-dsfr)                 | Template DSFR pour [eleventy](https://www.11ty.dev/)        |
-| [codegouvfr/docsify-dsfr-template](https://github.com/codegouvfr/docsify-dsfr-template) | Template DSFR pour [docsify](https://docsify.js.org/#/)     |
-| [sneko/dsfr-connect](https://github.com/sneko/dsfr-connect)                             | Themes DSFR pour bootstrap, vuetify, mui, infima, emails... |
-| [laruiss/create-vue-dsfr](https://github.com/laruiss/create-vue-dsfr)                   | Un starter Vue.js + Nuxt3 + DSFR                            |
-| [socialgouv/template](https://github.com/socialgouv/template)                           | Version initiale de ce template                             |
+## Related
 
+Projet créé avec [template-nextjs](https://github.com/betagouv/template-nextjs)

mdx-components.tsx

@@ -1,24 +1,25 @@
-import type { MDXComponents } from "mdx/types";
-import Image, { ImageProps } from "next/image";
 import Link from "next/link";
 
 import { CallOut } from "@codegouvfr/react-dsfr/CallOut";
 import { Table } from "@codegouvfr/react-dsfr/Table";
 import { fr } from "@codegouvfr/react-dsfr";
+import { ReactNode } from "react";
+import { MDXComponents } from "mdx/types";
 
 export const mdxComponents = {
-  h1: ({ children }) => <h1 className={fr.cx("fr-h1")}>{children}</h1>,
-  h2: ({ children }) => (
+  h1: ({ children }: { children: ReactNode }) => (
+    <h1 className={fr.cx("fr-h1")}>{children}</h1>
+  ),
+  h2: ({ children }: { children: ReactNode }) => (
     <h2 className={fr.cx("fr-mt-3w", "fr-h2")}>{children}</h2>
   ),
-  h3: ({ children }) => (
+  h3: ({ children }: { children: ReactNode }) => (
     <h3 className={fr.cx("fr-mt-3w", "fr-h3")}>{children}</h3>
   ),
-  h4: ({ children }) => (
+  h4: ({ children }: { children: ReactNode }) => (
     <h4 className={fr.cx("fr-mt-3w", "fr-h4")}>{children}</h4>
   ),
-  // @ts-ignore
-  table: (props) => {
+  table: (props: { children: ReactNode }) => {
     if (
       props.children &&
       Array.isArray(props.children) &&
@@ -35,18 +36,16 @@ export const mdxComponents = {
     }
     return <div></div>;
   },
-  a: (props) => {
+  a: (props: { href: string }) => {
     if (
       props.href &&
       (props.href?.startsWith("http") || props.href?.startsWith("//"))
     ) {
-      //@ts-ignore
       return <Link {...props} target="_blank" rel="noopener noreferrer" />;
     }
-    //@ts-ignore
     return <Link {...props} />;
   },
-  blockquote: (props) => {
+  blockquote: (props: { children: ReactNode }) => {
     if (
       props.children &&
       Array.isArray(props.children) &&

src/lib/albert.ts

@@ -1,9 +1,9 @@
 import { useEffect, useState } from "react";
 
-const ALBERT_API_KEY = process.env.ALBERT_API_KEY;
-const API_URL = "/api/albert"; //https://albert.api.etalab.gouv.fr";
-const LANGUAGE_MODEL = "AgentPublic/llama3-instruct-8b"; // see https://albert.api.etalab.gouv.fr/v1/models
-const EMBEDDING_MODEL = "BAAI/bge-m3";
+export const ALBERT_API_KEY = process.env.ALBERT_API_KEY;
+export const API_URL = "/api/albert"; //https://albert.api.etalab.gouv.fr";
+export const LANGUAGE_MODEL = "AgentPublic/llama3-instruct-8b"; // see https://albert.api.etalab.gouv.fr/v1/models
+export const EMBEDDING_MODEL = "BAAI/bge-m3";
 
 export const albertApi = ({
   path,
@@ -17,7 +17,7 @@ export const albertApi = ({
   fetch(`${API_URL}/v1${path}`, {
     method,
     headers: {
-      // Authorization: `Bearer ${ALBERT_API_KEY}`,
+      Authorization: `Bearer ${ALBERT_API_KEY}`,
       "Content-Type": "application/json",
     },
     body,
@@ -55,7 +55,13 @@ export const useAlbertCollections = () => {
   return { collections, reloadCollections };
 };
 
-export const createCollection = ({ name, model = EMBEDDING_MODEL }) =>
+export const createCollection = ({
+  name,
+  model = EMBEDDING_MODEL,
+}: {
+  name: string;
+  model?: string;
+}) =>
   fetch(`${API_URL}/v1/collections`, {
     method: "POST",
     headers: {
@@ -71,7 +77,15 @@ export const createCollection = ({ name, model = EMBEDDING_MODEL }) =>
     })
     .then((d) => d.id);
 
-export const addFileToCollection = async ({ file, fileName, collectionId }) => {
+export const addFileToCollection = async ({
+  file,
+  fileName,
+  collectionId,
+}: {
+  file: File;
+  fileName: string;
+  collectionId: string;
+}) => {
   const formData = new FormData();
   formData.append("file", file, fileName);
   formData.append("request", JSON.stringify({ collection: collectionId }));
@@ -91,7 +105,7 @@ export const addFileToCollection = async ({ file, fileName, collectionId }) => {
       };
     }
     if (r.statusText === "OK") {
-      let json = {};
+      let json: { detail?: string } = {};
       try {
         json = await r.json();
       } catch (e) {}
@@ -139,6 +153,16 @@ export const getSearch = ({
 export const getPromptWithRagResults = ({
   results,
   input,
+}: {
+  input: string;
+  results: {
+    data: {
+      chunk: {
+        content: string;
+        metadata: { title: string; document_name: string };
+      };
+    }[];
+  };
 }) => `Réponds à la question suivante au format markdown sans mettre de titre et en te basant sur le contexte fourni uniquement.
 
   ## Question: ${input}

src/pages/a-propos.mdx

@@ -9,6 +9,8 @@ import { Alert } from "@codegouvfr/react-dsfr/Alert";
 
 Cette application permet d'utiliser l'[API Albert](https://github.com/etalab-ia/albert-api) pour uploader des document et effectuer des recherches dessus.
 
+Code source : https://github.com/betagouv/albert-docs
+
 ## Références
 
 - repo Albert: https://github.com/etalab-ia/albert-api

src/pages/api/albert/[[...path]].ts

@@ -1,13 +1,22 @@
-import { Readable } from "stream";
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import { ALBERT_API_KEY } from "../../../lib/albert";
+
+const API_URL = "https://albert.api.etalab.gouv.fr"; // this is the real API endpoint
+
 type ResponseData = {
   message: string;
 };
 
-const ALBERT_API_KEY = process.env.ALBERT_API_KEY;
-const API_URL = "https://albert.api.etalab.gouv.fr";
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: "20mb",
+    },
+  },
+};
 
+// this proxies requests to albert API
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<ResponseData>
@@ -28,8 +37,6 @@ export default async function handler(
   //   }`
   //);
 
-  console.log("io");
-
   const fetchOptions = {
     method: req.method,
     headers: {
@@ -40,40 +47,33 @@ export default async function handler(
   if (req.headers["content-type"]) {
     fetchOptions.headers["Content-Type"] = req.headers["content-type"];
   }
+
   const body =
     req.method === "GET"
       ? undefined
       : fetchOptions.headers["Content-Type"] === "application/json"
       ? JSON.stringify(req.body)
       : req.body;
   fetchOptions.body = body;
-  // const formData = new FormData();
-  // formData.append("file", req.bod, fileName);
-  // formData.append("request", JSON.stringify({ collection: collectionId }));
-  console.log("fetchOptions", fetchOptions);
 
-  const albertApi = await fetch(
+  const albertApiResponse = await fetch(
     `${API_URL}/${
       data.query.path &&
       Array.isArray(data.query.path) &&
       data.query.path.join("/")
     }`,
     fetchOptions
-  );
+  ).catch((e) => {
+    console.log("e", e);
+    res.status(500).write(e.message);
+  });
 
-  // const resBlob = await response.blob();
-  // const resBufferArray = await resBlob.arrayBuffer();
-  // const resBuffer = Buffer.from(resBufferArray);
+  // allow streaming
+  const reader =
+    albertApiResponse &&
+    albertApiResponse.body &&
+    albertApiResponse.body.getReader();
 
-  // const fileType = await fileTypeFromBuffer(resBuffer);
-  // res.setHeader("Content-Type", fileType?.mime ?? "application/octet-stream");
-  // res.setHeader("Content-Length", resBuffer.length);
-  // res.write(resBuffer, "binary");
-  // res.end();
-
-  // omitting handler code for readability
-
-  const reader = albertApi.body && albertApi.body.getReader();
   while (reader && true) {
     const result = await reader.read();
     if (result.done) {
@@ -82,24 +82,4 @@ export default async function handler(
     }
     res.write(result.value);
   }
-  ///const readableStream = albertApi.body as unknown as NodeJS.ReadableStream;
-  //readableStream.pipe(res);
-  // const body = await albertApi.text();
-  // console.log("body", body);
-  // res
-  //   .status(200)
-  //   //.setHeader("content-type", albertApi.headers["content-type"])
-  //   .send(body);
-
-  // if (albertApi.body) {
-  //   Readable.fromWeb(albertApi.body).pipe(res);
-  // }
-
-  //albertApi.body?.pipeTo(res);
-  //res.status(200).pipe(albertApi);
-  //.json(await albertApi.json());
-  // .then((data) => {
-  //   res.status(200).json({ message: "Hello from Next.js!", ...data });
-  // });
 }
-//