feat: use static build and ask user token

Dockerfile

@@ -51,33 +51,9 @@ RUN \
     else echo "Lockfile not found." && exit 1; \
     fi
 
-# Production image, copy all the files and run next
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV=production
-# Uncomment the following line in case you want to disable telemetry during runtime.
-# ENV NEXT_TELEMETRY_DISABLED=1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder /app/public ./public
 
-# Automatically leverage output traces to reduce image size
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-USER nextjs
-
-EXPOSE 3000
-
-ENV PORT=3000
-ENV NEXT_TELEMETRY_DISABLED 1
+# static production image
 
-# server.js is created by next build from the standalone output
-# https://nextjs.org/docs/pages/api-reference/next-config-js/output
-ENV HOSTNAME="0.0.0.0"
-CMD ["node", "server.js"]
+FROM nginx:1.27.3-alpine
 
+COPY --from=builder /app/out /usr/share/nginx/html/

csp.config.mjs

@@ -4,7 +4,7 @@ const ContentSecurityPolicy = `
   script-src 'self' *.gouv.fr ${
     process.env.NODE_ENV !== "production" && "'unsafe-eval' 'unsafe-inline'"
   };
-  connect-src 'self' *.gouv.fr https://sentry.incubateur.net;
+  connect-src 'self' *.gouv.fr https://sentry.incubateur.net  *.incubateur.net;
   frame-src 'self' *.gouv.fr;
   style-src 'self' 'unsafe-inline';
   font-src 'self' data: blob:;

next.config.mjs

@@ -19,13 +19,12 @@ const moduleExports = {
   //basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   reactStrictMode: true,
-  output: "standalone",
-  experimental: {
-    serverActions: {
-      bodySizeLimit: "10mb",
-    },
-  },
-  //output: "export",
+  output: "export",
+  // experimental: {
+  //   serverActions: {
+  //     bodySizeLimit: "10mb",
+  //   },
+  // },
   webpack: (config) => {
     config.module.rules.push({
       test: /\.(woff2|webmanifest)$/,

package.json

@@ -6,9 +6,10 @@
   "engines": {
     "node": ">=18 || >=20"
   },
+  "type": "module",
   "scripts": {
     "predev": "only-include-used-icons && cp -a node_modules/@gouvfr/dsfr-chart/Charts ./public/",
-    "prebuild": "node -r @swc-node/register scripts/prebuild.ts && yarn only-include-used-icons && cp -a node_modules/@gouvfr/dsfr-chart/Charts ./public/",
+    "prebuild": "node scripts/prebuild.mjs && yarn only-include-used-icons && cp -a node_modules/@gouvfr/dsfr-chart/Charts ./public/ && yarn type-check",
     "only-include-used-icons": "node node_modules/@codegouvfr/react-dsfr/bin/only-include-used-icons.js",
     "dev": "next dev",
     "build": "next build",
@@ -51,6 +52,7 @@
     "react-markdown": "^9.0.1",
     "remark-gfm": "^4.0.0",
     "tss-react": "^4.9.14",
+    "usehooks-ts": "^3.1.0",
     "zod": "^3.24.1"
   },
   "devDependencies": {

scripts/prebuild.ts → scripts/prebuild.mjs

@@ -1,9 +1,8 @@
-import path from "path";
 import fs from "fs";
 
-export const filePath = path.join(__dirname, "../public/robots.txt");
+export const filePath = "./public/robots.txt";
 
-export const generateRobotsTxt = (isOnProduction: boolean, host: string) => {
+export const generateRobotsTxt = (isOnProduction, host) => {
   const robotsDev = ["User-agent: *", "Disallow: /"].join("\n");
   const robotsProd = ["User-agent: *", "Allow: /"].join("\n");
 

src/components/InputAlbertToken.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useSessionStorage } from "usehooks-ts";
+
+import { fr } from "@codegouvfr/react-dsfr";
+
+import { albertApi } from "../lib/albert";
+import { Input, InputProps } from "@codegouvfr/react-dsfr/Input";
+import Button from "@codegouvfr/react-dsfr/Button";
+import { useRef, useState } from "react";
+
+export const InputAlbertToken = () => {
+  const input = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useSessionStorage("albert-api-key", "");
+  const [status, setStatus] = useState<InputProps["state"]>("default");
+  const messages = {
+    error: "Le token semble invalide",
+    success: "Le token est valide",
+    info: "",
+    default: "",
+  };
+  return value ? null : (
+    <div className={fr.cx("fr-col-12")}>
+      <h3>Token Albert invalide</h3>
+      <Input
+        label="Saisissez votre token Albert pour continuer"
+        ref={input}
+        nativeInputProps={{ type: "password" }}
+        state={status}
+        stateRelatedMessage={status && messages[status]}
+        addon={
+          <Button
+            onClick={async () => {
+              // const value = input.current?.value || "";
+              const value = input?.current?.querySelector("input")?.value || "";
+              console.log("try setAlbertApiKey", value);
+              setStatus("default");
+              const res = await albertApi({
+                path: "/models",
+                method: "GET",
+                token: value,
+              })
+                .then((r) => {
+                  setStatus("success");
+                  setTimeout(() => {
+                    console.log("setAlbertApiKey", value);
+                    setValue(value);
+                  }, 1000);
+                })
+                .catch((e) => {
+                  console.log("error", e);
+                  setStatus("error");
+                });
+              console.log(res);
+              // setAlbertApiKey(value);
+            }}
+          >
+            Valider
+          </Button>
+        }
+      />
+    </div>
+  );
+};

src/lib/albert.ts

@@ -1,29 +1,31 @@
 import { useEffect, useState } from "react";
 
 export const ALBERT_API_KEY = process.env.ALBERT_API_KEY;
-export const API_URL = "/api/albert"; //https://albert.api.etalab.gouv.fr";
+export const API_URL = "https://albert-api.kube-dev.incubateur.net"; //https://albert.api.etalab.gouv.fr"; // "/api/albert"
 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,
   method = "POST",
   body,
+  token = ALBERT_API_KEY,
 }: {
   path: string;
   method?: "POST" | "GET";
   body?: string;
+  token?: string;
 }) =>
   fetch(`${API_URL}/v1${path}`, {
     method,
     headers: {
-      Authorization: `Bearer ${ALBERT_API_KEY}`,
+      Authorization: `Bearer ${token}`,
       "Content-Type": "application/json",
     },
     body,
   }).then((r) => r.json());
 
-type AlbertCollection = {
+export type AlbertCollection = {
   id: string;
   name: string;
   type: "public" | "private";
@@ -34,13 +36,17 @@ type AlbertCollection = {
   documents: null | number;
 };
 
-export const useAlbertCollections = () => {
+export const useAlbertCollections = (albertToken: string) => {
   const [collections, setCollections] = useState<AlbertCollection[]>([]);
 
   const reloadCollections = async () => {
+    if (!albertToken) {
+      return;
+    }
     const collections = await albertApi({
       path: "/collections",
       method: "GET",
+      token: albertToken,
     });
     setCollections(collections.data || []);
   };
@@ -49,49 +55,44 @@ export const useAlbertCollections = () => {
     if (!collections.length) {
       reloadCollections();
     }
-  }, [reloadCollections]);
+  }, [reloadCollections, albertToken]);
 
   return { collections, reloadCollections };
 };
 
 export const createCollection = ({
   name,
   model = EMBEDDING_MODEL,
+  token = ALBERT_API_KEY,
 }: {
   name: string;
   model?: string;
+  token?: string;
 }) =>
-  fetch(`${API_URL}/v1/collections`, {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${ALBERT_API_KEY}`,
-      "Content-Type": "application/json",
-    },
+  albertApi({
+    path: "/collections",
     body: JSON.stringify({ name, model }),
-  })
-    .then((r) => r.json())
-    .then((d) => {
-      console.log(d);
-      return d;
-    })
-    .then((d) => d.id);
+    token,
+  }).then((d) => d.id);
 
 export const addFileToCollection = async ({
   file,
   fileName,
   collectionId,
+  token = ALBERT_API_KEY,
 }: {
   file: File;
   fileName: string;
   collectionId: string;
+  token?: string;
 }) => {
   const formData = new FormData();
   formData.append("file", file, fileName);
   formData.append("request", JSON.stringify({ collection: collectionId }));
   return fetch(`${API_URL}/v1/files`, {
     method: "POST",
     headers: {
-      Authorization: `Bearer ${ALBERT_API_KEY}`,
+      Authorization: `Bearer ${token}`,
       //"Content-Type": "multipart/form-data",
     },
     body: formData,
@@ -125,28 +126,21 @@ export const addFileToCollection = async ({
 export const getSearch = ({
   collections,
   query,
+  token = ALBERT_API_KEY,
 }: {
   collections: string[];
   query: string;
+  token?: string;
 }) => {
   console.log({ url: `${API_URL}/v1/search`, query });
-  return fetch(`${API_URL}/v1/search`, {
-    cache: "no-cache",
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${ALBERT_API_KEY}`,
-      "Content-Type": "application/json",
-    },
+  return albertApi({
+    path: "/search",
+    token,
     body: JSON.stringify({ collections, k: 6, prompt: query }),
-  })
-    .then((r) => {
-      console.log(r);
-      return r.json();
-    })
-    .catch((r) => {
-      console.error(r);
-      throw r;
-    });
+  }).catch((r) => {
+    console.error(r);
+    throw r;
+  });
 };
 
 export const getPromptWithRagResults = ({

src/pages/_app.tsx

@@ -19,6 +19,8 @@ import { init } from "@socialgouv/matomo-next";
 import pkg from "../../package.json";
 
 import "./styles.css";
+import { useSessionStorage } from "usehooks-ts";
+import Button from "@codegouvfr/react-dsfr/Button";
 
 declare module "@codegouvfr/react-dsfr/next-pagesdir" {
   interface RegisterLink {
@@ -126,7 +128,24 @@ const bottomLinks = [
 
 const Layout = ({ children }: { children: ReactNode }) => {
   const router = useRouter();
+  const [albertApiKey, setAlbertApiKey, deleteAlbertApiKey] = useSessionStorage(
+    "albert-api-key",
+    ""
+  );
 
+  const logout =
+    (albertApiKey && (
+      <Button
+        onClick={(e) => {
+          e.preventDefault();
+          deleteAlbertApiKey();
+        }}
+        iconId="ri-login-box-line"
+      >
+        Se déconnecter
+      </Button>
+    )) ||
+    null;
   const contentSecurityPolicy = process.env.CONTENT_SECURITY_POLICY;
   return (
     <MuiDsfrThemeProvider>
@@ -192,7 +211,7 @@ const Layout = ({ children }: { children: ReactNode }) => {
             isActive: router.asPath === "/a-propos",
           },
         ]}
-        quickAccessItems={[headerFooterDisplayItem]}
+        quickAccessItems={[logout, headerFooterDisplayItem]}
       />
       <div
         className={fr.cx("fr-container", "fr-container--fluid", "fr-p-5w")}