feat: monorepo (#2)

* feat: multi-collections

* feat: monorepo

* fix

* core

.dockerignore

@@ -1,12 +1,5 @@
-Dockerfile
-.dockerignore
 node_modules
-npm-debug.log
-yarn-debug.log
-README.md
-CHANGELOG.md
-.next
-.vscode
-.github
-.kontinuous
-.git
+app/node_modules
+app/.next
+app/out
+.next

.github/workflows/docker.yml

@@ -20,9 +20,10 @@ jobs:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ github.token }}
-      - name: Build and push
+      - name: Build and push app
         uses: docker/build-push-action@v6
         with:
+          file: Dockerfile-app
           push: true
           tags: |
             ghcr.io/${{ env.GITHUB_REPOSITORY_OWNER_PART_SLUG }}/albert-docs:${{ env.GITHUB_REF_SLUG }}
@@ -32,3 +33,16 @@ jobs:
           build-args: |
             PRODUCTION="true"
             GITHUB_SHA=${{ github.sha }}
+      - name: Build and push api
+        uses: docker/build-push-action@v6
+        with:
+          file: Dockerfile-api
+          push: true
+          tags: |
+            ghcr.io/${{ env.GITHUB_REPOSITORY_OWNER_PART_SLUG }}/albert-docs/api:${{ env.GITHUB_REF_SLUG }}
+            ${{ github.ref_name == 'main' && format('ghcr.io/{0}/albert-docs/api:latest', env.GITHUB_REPOSITORY_OWNER_PART_SLUG) || '' }}
+          cache-from: type=registry,ref=ghcr.io/${{ env.GITHUB_REPOSITORY_OWNER_PART_SLUG }}/albert-docs/api:${{ env.GITHUB_REF_SLUG }}
+          cache-to: type=inline
+          build-args: |
+            PRODUCTION="true"
+            GITHUB_SHA=${{ github.sha }}

.github/workflows/lint.yml

@@ -22,11 +22,14 @@ jobs:
         with:
           node-version: "20"
           cache: "yarn"
+
       - name: Install dependencies
         run: |
           yarn --immutable
       - name: Lint
         run: |
+          cd app
+          yarn
           yarn lint
 
   # docker:

.github/workflows/testing.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "18"
+          node-version: "20"
           cache: "yarn"
       - name: Install dependencies
         run: |
@@ -30,4 +30,5 @@ jobs:
           yarn build
       - name: Test code
         run: |
+          cd app
           yarn test

.gitignore

@@ -1,5 +1,11 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+.next
+node_modules
+out
+packages/albert-ts/dist/
+packages/api/dist/
+
 # dependencies
 /node_modules
 /.pnp

.node-version

@@ -1 +1 @@
-18
+20

Dockerfile.api

@@ -0,0 +1,9 @@
+FROM node:20-alpine as builder
+
+WORKDIR /app
+
+ADD . .
+
+RUN yarn && yarn build && yarn --production && yarn cache clean
+
+CMD ["npx", "tsx", "packages/api"]

Dockerfile.app

@@ -0,0 +1,11 @@
+FROM node:20-alpine as builder
+
+WORKDIR /app
+
+ADD . .
+
+RUN yarn && yarn build && yarn --production && yarn cache clean
+
+FROM ghcr.io/socialgouv/docker/nginx:8.2.3
+
+COPY --from=builder /app/app/out /usr/share/nginx/html/

README.md

@@ -3,7 +3,13 @@
 ![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)
 
-Minimalist UI for [albert-API](https://github.com/etalab-ia/albert-api/). Drop documents and query them with LLM.
+## Packages
+
+| Name               | descriptions                                                                                                      |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------- |
+| app                | Minimalist UI for [albert-API](https://github.com/etalab-ia/albert-api/). Drop documents and query them with LLM. |
+| packages/albert-ts | Browser/Node utils for albert API                                                                                 |
+| packages/api       | A basic API to query a collection                                                                                 |
 
 ## Start
 

app/.dockerignore

@@ -0,0 +1,12 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+yarn-debug.log
+README.md
+CHANGELOG.md
+.next
+.vscode
+.github
+.kontinuous
+.git

mdx-components.tsx → app/mdx-components.tsx

@@ -29,9 +29,11 @@ export const mdxComponents = {
       const headers = head.props.children.props.children.map(
         (child: any) => child.props.children
       );
-      const data = body.props.children.map((row: any) =>
-        row.props.children.map((cell: any) => cell.props.children)
-      );
+      const data = Array.isArray(body.props.children)
+        ? body.props.children.map((row: any) =>
+            row.props.children.map((cell: any) => cell.props.children)
+          )
+        : [body.props.children.props.children];
       return <Table headers={headers} data={data} />;
     }
     return <div></div>;

app/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@betagouv/albert-docs",
+  "version": "1.15.8",
+  "private": true,
+  "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
+  "scripts": {
+    "predev": "only-include-used-icons",
+    "prebuild": "node scripts/prebuild.mjs && yarn only-include-used-icons && yarn type-check",
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint-staged": "lint-staged",
+    "e2e": "NEXT_PUBLIC_BASE_PATH='' NODE_ENV=production yarn build && yarn playwright test",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "storybook:build": "yarn build-storybook -c .storybook -o .out",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "npm run type-check -- --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "albert-ts": "^0.1.0",
+    "@codegouvfr/react-dsfr": "^1.16.4",
+    "@emotion/react": "^11.14.0",
+    "@emotion/server": "^11.11.0",
+    "@emotion/styled": "^11.14.0",
+    "@gouvfr/dsfr-chart": "^1.0.0",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@mui/icons-material": "^5.16.11",
+    "@mui/material": "^5.16.11",
+    "@mui/x-data-grid": "^5.17.26",
+    "@mui/x-date-pickers": "^5.0.20",
+    "@next/mdx": "^14.2.20",
+    "@sentry/nextjs": "^8",
+    "@socialgouv/matomo-next": "^1.9.2",
+    "ai": "^4.0.14",
+    "dayjs": "^1.11.13",
+    "is-ci": "^3.0.1",
+    "next": "15.1.0",
+    "nuqs": "^2.2.3",
+    "p-all": "^5.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-dropzone": "^14.3.5",
+    "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": {
+    "@babel/core": "^7.26.0",
+    "@playwright/test": "^1.49.1",
+    "@storybook/addon-actions": "^7.6.20",
+    "@storybook/addon-docs": "^7.6.20",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-onboarding": "^1.0.11",
+    "@storybook/blocks": "^7.6.20",
+    "@storybook/nextjs": "^7.6.20",
+    "@storybook/test": "^7.6.20",
+    "@storybook/testing-library": "^0.2.2",
+    "@swc-node/register": "^1.10.9",
+    "@swc/core": "^1.10.1",
+    "@testing-library/react": "^14.3.1",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^18",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.23",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "8.57.0",
+    "eslint-config-next": "14.1.4",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.1.7",
+    "jsdom": "^24.1.3",
+    "lint-staged": "^15.2.11",
+    "node-talisman": "^1.29.11",
+    "start-server-and-test": "^2.0.9",
+    "storybook": "^7.6.20",
+    "storybook-dark-mode": "^3.0.3",
+    "typescript": "5.4.3",
+    "vitest": "^1.6.0"
+  }
+}

app/src/components/Chat/Chat.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { fr } from "@codegouvfr/react-dsfr";
+import { Input } from "@codegouvfr/react-dsfr/Input";
+import { UseChatHelpers } from "ai/react";
+
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { mdxComponents } from "../../../mdx-components";
+
+export function Chat({
+  messages,
+  handleSubmit,
+  handleInputChange,
+  input,
+  isLoading,
+  hintText,
+}: {
+  messages: UseChatHelpers["messages"];
+  handleSubmit: UseChatHelpers["handleSubmit"];
+  handleInputChange: UseChatHelpers["handleInputChange"];
+  input: UseChatHelpers["input"];
+  isLoading: UseChatHelpers["isLoading"];
+  hintText?: string;
+}) {
+  return (
+    <div style={{ width: "100%", marginBottom: 40 }}>
+      <div style={{ height: "100%", minHeight: 300 }}>
+        {messages.map((m) => (
+          <div key={m.id} className={fr.cx("fr-mb-2w")}>
+            {m.role === "user" ? (
+              <i className={fr.cx("fr-icon--md", "ri-user-fill", "fr-mr-1w")} />
+            ) : (
+              <i
+                className={fr.cx("fr-icon--md", "ri-robot-2-fill", "fr-mr-1w")}
+              />
+            )}
+            <Markdown
+              // @ts-ignore TODO
+              components={mdxComponents}
+              className="chat-markdown"
+              remarkPlugins={[remarkGfm]}
+            >
+              {m.content}
+            </Markdown>
+          </div>
+        ))}
+        {isLoading && <div className={fr.cx("fr-mb-2w")}>...</div>}
+      </div>
+
+      <form onSubmit={handleSubmit}>
+        <Input
+          //className={fr.cx("fr-input-group")} //fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl"
+          style={{ width: "100%" }}
+          hintText={hintText}
+          label=""
+          nativeInputProps={{
+            value: input,
+            placeholder: "Posez une question à Albert",
+            onChange: handleInputChange,
+          }}
+        />
+        <br />
+      </form>
+    </div>
+  );
+}

app/src/components/Chat/DropZone.tsx

@@ -0,0 +1,47 @@
+import React, {
+  ReactChildren,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useState,
+} from "react";
+
+import { useDropzone } from "react-dropzone";
+import { fr } from "@codegouvfr/react-dsfr";
+
+export function DropZone({
+  children,
+  onDrop,
+  canDrop = true,
+}: {
+  children: ReactNode;
+  onDrop: (arg: File[]) => void;
+  canDrop?: boolean;
+}) {
+  const onDropFiles = useCallback(
+    (acceptedFiles: File[]) => {
+      // Do something with the files
+      onDrop(acceptedFiles);
+    },
+    [onDrop]
+  );
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: onDropFiles,
+    noClick: true,
+  });
+  const style = {
+    border:
+      canDrop && isDragActive ? "2px dotted var(--grey-425-625) " : "none",
+    backgroundColor:
+      canDrop && isDragActive
+        ? fr.colors.decisions.background.actionLow.blueFrance.default
+        : "transparent",
+  };
+
+  return (
+    <div {...getRootProps()} style={style} className={fr.cx("fr-p-1w")}>
+      <input {...getInputProps()} />
+      {children}
+    </div>
+  );
+}

src/components/InputAlbertToken.tsx → app/src/components/InputAlbertToken.tsx

@@ -4,7 +4,7 @@ import { useSessionStorage } from "usehooks-ts";
 
 import { fr } from "@codegouvfr/react-dsfr";
 
-import { albertApi } from "../lib/albert";
+import { albertApi } from "albert-ts";
 import { Input, InputProps } from "@codegouvfr/react-dsfr/Input";
 import Button from "@codegouvfr/react-dsfr/Button";
 import { useRef, useState } from "react";