major improvements to the app

README.md

@@ -3,7 +3,8 @@ title: JVCGPT
 emoji: 🤣
 colorFrom: blue
 colorTo: blue
-sdk: docker
+sdk: static
+app_file: ./dist/index.html
 pinned: false
 license: mit
 ---

package-lock.json

@@ -5,9 +5,11 @@
 	"packages": {
 		"": {
 			"dependencies": {
+				"@types/throttle-debounce": "^5.0.2",
 				"classnames": "^2.5.1",
 				"preact": "^10.25.3",
-				"preact-feather": "^4.2.1"
+				"preact-feather": "^4.2.1",
+				"throttle-debounce": "^5.0.2"
 			},
 			"devDependencies": {
 				"@preact/preset-vite": "^2.9.3",
@@ -1738,6 +1740,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@types/throttle-debounce": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+			"integrity": "sha512-pDzSNulqooSKvSNcksnV72nk8p7gRqN8As71Sp28nov1IgmPKWbOEIwAWvBME5pPTtaXJAvG3O4oc76HlQ4kqQ==",
+			"license": "MIT"
+		},
 		"node_modules/@ungap/structured-clone": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",
@@ -5661,6 +5669,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/throttle-debounce": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.2.tgz",
+			"integrity": "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.22"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -7,9 +7,11 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@types/throttle-debounce": "^5.0.2",
 		"classnames": "^2.5.1",
 		"preact": "^10.25.3",
-		"preact-feather": "^4.2.1"
+		"preact-feather": "^4.2.1",
+		"throttle-debounce": "^5.0.2"
 	},
 	"devDependencies": {
 		"@preact/preset-vite": "^2.9.3",

src/app.tsx

@@ -1,179 +1,83 @@
-import {JSX} from "preact";
-import {useState, useEffect, useCallback} from "preact/hooks";
 import "./styles.scss";
+import {JSX} from "preact";
+import {useState, useContext} from "preact/hooks";
 import style from "./style.module.scss";
 import {Container} from "./components/container";
-import {loadTopics, saveTopics} from "./utils/topics";
-import {Topic} from "./utils/topics";
 import {Topics} from "./components/topics";
 import {Topic as TopicComponent} from "./components/topic";
-import {Route, routes, RouteSetter} from "./utils/route";
 import {Settings} from "./components/settings";
 import {Layout} from "./components/layout";
-import {fetchSettings, resetSettings, saveSettings} from "./utils/settings";
-import {generateTopic, generatePosts} from "./utils/oobabooga";
-import {tokenizeTopic} from "./utils/model";
+import {routeCtx, routes} from "@/contexts/route";
+import {topicsCtx} from "@/contexts/topics";
 
 export function App(): JSX.Element {
-    const [route, _setRoute] = useState<Route>(routes.home);
-    const [page, setPage] = useState<number>(0);
-    const [topicId, setTopicId] = useState<Topic["id"] | null>(null);
-
-    // null when loading
-    const [topics, setTopics] = useState<Topic[]>(loadTopics);
-    const [latestGeneratedTopicId, setLatestGeneratedTopicId] = useState<string|null>(null);
-    const [pendingGeneration, setPendingGeneration] = useState<boolean>(false);
-
-    useEffect(() => {
-        console.log("save !")
-        saveTopics(topics);
-    }, [topics]);
-
-    const _generateTopic = async (postsCount: number) => {
-        setPendingGeneration(true);
-        const topic = await generateTopic(settings, postsCount);
-        setLatestGeneratedTopicId(topic.id);
-        setTopics(topics => [...topics, topic]);
-        setPendingGeneration(false);
-    }
-
-    const addPosts = async (topicId: string, postsCount: number) => {
-        setPendingGeneration(true);
-        const posts = await generatePosts(settings, postsCount, topics.find(t => t.id === topicId));
-        const newTopics = [...topics]; // Clone topics to avoid bugs
-        const foundIndex = newTopics.findIndex(t => t.id === topicId);
-        newTopics[foundIndex].posts = newTopics[foundIndex].posts.concat(posts);
-        setTopics(newTopics)
-        setPendingGeneration(false);
-    }
-
-    // useEffect(() => {
-    //     setTopics(loadTopics());
-    // }, []);
-
-    const [settings, setSettings] = useState(fetchSettings)
-
-    useEffect(() => {
-        saveSettings(settings);
-    }, [settings]);
-
-    const resetApp = () => {
-        resetSettings();
-        setSettings(fetchSettings);
-        setTopics([]);
-    }
-
-    const updateRoute = useCallback(() => {
-        const url = new URL(window.location.href);
-        const route = url.searchParams.get("route");
-        if (route && route in routes) {
-            _setRoute(route as keyof typeof routes);
-        }
-        const page = url.searchParams.get("page");
-        if (page) {
-            setPage(parseInt(page));
-        }
-        const id = url.searchParams.get("id");
-        if (id) {
-            setTopicId(id);
-        }
-    }, []);
-
-    // Init page from url
-    useEffect(() => {
-        updateRoute()
-    }, []);
-
-    // Listen for URl change
-    useEffect(() => {
-        function listener() {
-            updateRoute()
-        }
-
-        window.addEventListener('popstate', listener);
-
-        return () => {
-            window.removeEventListener('popstate', listener)
-        }
-    }, []);
-
-
-    // Update URL params on route change
-    const setRoute: RouteSetter = useCallback((route: Route, page?: number, id?: string) => {
-        const url = new URL(window.location.href);
-        url.searchParams.set("route", route);
-        _setRoute(route);
-
-        if (page !== undefined) {
-            url.searchParams.set("page", String(page));
-            setPage(page);
-        }   else {
-            url.searchParams.delete("page");
-            setPage(0);
-        }
-
-        if (id !== undefined) {
-            url.searchParams.set("id", id);
-            setTopicId(id);
-        } else {
-            url.searchParams.delete("id");
-            setTopicId(null);
-        }
-
-        const newUrl = url.toString();
-
-        // Avoid to push the same URL mutiple time
-        if (newUrl !== window.location.href) {
-            window.history.pushState({}, "", newUrl);
-        }
-    }, []);
-
-    let routeComponent: JSX.Element = undefined;
-    let breadcrumbs: string = undefined;
-    let title: string = undefined;
-
-    switch (route) {
-        case routes.home:
-            routeComponent = <Topics
-                topics={topics}
-                setRoute={setRoute}
-                settings={settings}
-                setSettings={setSettings}
-                generateTopic={_generateTopic}
-                pendingGeneration={pendingGeneration}
-                latestGeneratedTopicId={latestGeneratedTopicId}
-            />
-            breadcrumbs = "accueil"
-            title = "Liste des sujets"
+    const [route, setRoute] = useContext(routeCtx);
+    const [topicsContext] = useContext(topicsCtx);
+
+    // Router switch
+    let routeComponent: JSX.Element;
+    let breadcrumbs: JSX.Element;
+    let title: string;
+
+    switch (route.name) {
+        case "home":
+            routeComponent = <Topics page={route.args[0]} setPage={n => setRoute(routes.home(n))}/>
+            breadcrumbs = (
+                <a
+                    href={routes.home(0).location}
+                    onClick={e => {
+                        e.preventDefault();
+                        setRoute(routes.home(0));
+                    }}
+                >
+                    accueil
+                </a>
+            );
+            title = "Liste des sujets";
             break;
-        case routes.topic:
-            if (topicId === null) {
-                routeComponent = <div>Impossible d'afficher le sujet</div>
-                breadcrumbs = "accueil"
-                title = "Sujet"
+        case "topic":
+            const topic = topicsContext.topics.find(t => t.id === route.args[0]);
+            if (topic) {
+                routeComponent = <TopicComponent page={route.args[1] - 1} setPage={n => setRoute(routes.topic(topic.id, n + 1))} topic={topic}/>
+                breadcrumbs = (
+                    <>
+                        <a
+                            href={routes.home(0).location}
+                            onClick={e => {
+                                e.preventDefault();
+                                setRoute(routes.home(0));
+                            }}
+                        >
+                            accueil
+                        </a>
+                        <span> / </span>
+                        <b>{topic.title}</b>
+                    </>
+                )
+                title = `Sujet : ${topic.title}`
             } else {
-                if (topics === null) {
-                    routeComponent = <div>Chargement...</div>
-                    breadcrumbs = `accueil / sujet`
-                    title = `Chargement...`
-                } else {
-                    const topic = topics.find(t => t.id === topicId);
-                    routeComponent = <TopicComponent
-                        topic={topic}
-                        settings={settings}
-                        setSettings={setSettings}
-                        addPosts={addPosts}
-                        pendingGeneration={pendingGeneration}
-                    />
-                    breadcrumbs = `accueil / ${topic.title}`
-                    title = `Sujet : ${topic.title}`
-                }
+                routeComponent = <div></div>
+                breadcrumbs = <>410</>
+                title = `410 :)`
             }
-
             break;
-        case routes.settings:
-            routeComponent = <Settings settings={settings} setSettings={setSettings} resetApp={resetApp}/>
-            breadcrumbs = "accueil / paramètres"
+        case "settings":
+            routeComponent = <Settings/>
+            breadcrumbs = (
+                <>
+                    <a
+                        href={routes.home(0).location}
+                        onClick={e => {
+                            e.preventDefault();
+                            setRoute(routes.home(0));
+                        }}
+                    >
+                        accueil
+                    </a>
+                    <span> / </span>
+                    <b>paramètres</b>
+                </>
+            )
             title = "Paramètres"
             break;
     }
@@ -183,21 +87,20 @@ export function App(): JSX.Element {
             <header className={style.header}>
                 <Container>
                     <h1 className={style.logo}>
-                        <a href="#" onClick={e => {
+                        <a href={routes.home(0).location} onClick={e => {
                             e.preventDefault();
-                            setRoute(routes.home);
+                            setRoute(routes.home(0));
                         }}>
                             JVCGPT
                         </a>
                     </h1>
                 </Container>
             </header>
-            <main>
+            <main className={style.main}>
                 <Container>
                     <Layout
                         breadcrumbs={breadcrumbs}
                         title={title}
-                        setRoute={setRoute}
                     >
                         {routeComponent}
                     </Layout>

src/components/alert/index.tsx

@@ -0,0 +1,13 @@
+import style from "./style.module.scss";
+
+export function Alert(props: {
+    lines: string[]
+}) {
+    if(props.lines.length < 1) return null;
+
+    return (
+        <div className={style.alert}>
+            {props.lines.map(line => <p>{line}</p>)}
+        </div>
+    );
+}

src/components/alert/style.module.scss

@@ -0,0 +1,18 @@
+.alert {
+  position: relative;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  color: #842029;
+  background-color: #f8d7da;
+  border: #f5c2c7;
+  border-radius: 0.75rem;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

src/components/button/index.tsx

@@ -14,7 +14,7 @@ export function Button(props: {
     const disabled = props.disabled || props.loading;
     const buttonClass = cn(style.btn, {[style.secondary]: props.secondary}, 'button', props.className, {[style.disabled]:disabled});
 
-    let spinner: JSX.Element = undefined;
+    let spinner: JSX.Element|undefined;
 
     if (props.loading) {
         spinner = <span className={style.spinner}/>
@@ -24,7 +24,7 @@ export function Button(props: {
         <button
             type="button"
             onClick={() => {
-                if (!disabled) {
+                if (props.onClick && !disabled) {
                     props.onClick()
                 }
             }}

src/components/input/index.tsx

@@ -30,12 +30,8 @@ export const Input: FunctionalComponent<InputProps<string | number>> = ({
                                                                             id,
                                                                             name,
                                                                         }) => {
-    const [focused, setFocused] = useState(false);
 
-    const inputClass = cn(style.input, "generic-input", className, {
-        focused,
-        disabled,
-    });
+    const inputClass = cn(style.input, className);
 
     const handleInputChange: JSX.GenericEventHandler<HTMLInputElement> = (event) => {
         console.log("handleInputChange")
@@ -46,7 +42,7 @@ export const Input: FunctionalComponent<InputProps<string | number>> = ({
     const Icon = icon;
 
     return (
-        <div className={style.wrapper}>
+        <div className={cn(style.wrapper, {[style.disabled]: disabled})}>
             <Icon className={style.icon} size={18}/>
             <input
                 // required=""
@@ -63,24 +59,7 @@ export const Input: FunctionalComponent<InputProps<string | number>> = ({
                 onInput={handleInputChange}
                 className={inputClass}
                 disabled={disabled}
-                onFocus={() => setFocused(true)}
-                onBlur={() => setFocused(false)}
             />
         </div>
     )
-
-    return (
-        <input
-            type={type}
-            id={id}
-            name={name}
-            value={value}
-            placeholder={placeholder}
-            onChange={handleInputChange}
-            className={inputClass}
-            disabled={disabled}
-            onFocus={() => setFocused(true)}
-            onBlur={() => setFocused(false)}
-        />
-    );
 };

src/components/input/style.module.scss

@@ -9,11 +9,12 @@
   left: .625rem;
   font-size: 1.125rem;
   line-height: 1em;
+  z-index: 1;
 }
 
 .input {
-
   display: block;
+  position: relative;
   width: 100%;
   //padding: 0.4375rem 0.75rem;
   //font-size: 0.9375rem;
@@ -25,7 +26,7 @@
   border: 0.0625rem solid var(--input-border-color);
   -webkit-appearance: none;
   appearance: none;
-  border-radius: 0.75rem;
+  border-radius: 0.25rem;
   box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, .075);
   transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
 
@@ -34,7 +35,7 @@
   //padding-left: 0.4375rem;
   padding-left: 2.5rem;
   padding-bottom: 0;
-  font-weight: 700;
+  //font-weight: 700;
   height: 2.5rem;
   font-size: 1rem;
 
@@ -42,4 +43,19 @@
     color: var(--input-placeholder-color);
     font-weight: 400;
   }
+}
+
+.disabled {
+  &:before {
+    content: '';
+    position: absolute;
+    cursor: not-allowed;
+    z-index: 2;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--filters-bg-color);
+    opacity: .25;
+  }
 }

src/components/layout/index.tsx

@@ -1,14 +1,16 @@
-import type {ComponentChildren} from "preact";
+import type {ComponentChildren, JSX} from "preact";
 import style from "./style.module.scss"
 import {Settings} from "preact-feather"
-import {Route, routes} from "../../utils/route";
+import {routeCtx, routes} from "@/contexts/route";
+import {useContext} from "preact/hooks";
 
 export function Layout(props: {
-    breadcrumbs: string,
+    breadcrumbs: JSX.Element,
     title: string,
-    setRoute: (route: Route) => void,
     children: ComponentChildren
 }) {
+    const [,setRoute] = useContext(routeCtx);
+
     return(
         <div>
             <nav className={style.breadcrumbs}>
@@ -16,7 +18,7 @@ export function Layout(props: {
                 <div className={style.actions}>
                     <a href="#" title="Paramètres" onClick={e => {
                         e.preventDefault();
-                        props.setRoute(routes.settings);
+                        setRoute(routes.settings());
                     }}>
                         <Settings size={18}/>
                     </a>

src/components/layout/style.module.scss

@@ -1,11 +1,24 @@
 .breadcrumbs {
-  font-weight: 700;
+  font-weight: 400;
   color: var(--text-muted-color);
   font-size: .8125rem;
   margin-top: 1.25rem;
   margin-bottom: 0.9375rem;
-
+  white-space: pre-wrap;
   display: flex;
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      color: var(--text-muted-color);
+      text-decoration: underline;
+    }
+  }
+
+  b {
+    font-weight: 700;
+  }
 }
 
 .actions {

src/components/pagination/index.tsx

@@ -0,0 +1,46 @@
+import style from "./style.module.scss";
+import {
+    ChevronRight,
+    ChevronLeft,
+} from "preact-feather";
+import cn from "classnames";
+
+const maxNumber = 10;
+
+export function Pagination(props: {
+    pageCount: number;
+    page: number;
+    setPage: (page: number) => void;
+}) {
+    return (
+        <div className={style.pagination}>
+            <div
+                className={cn(style.chevronWrapper, {[style.disabled]: props.page <= 0})}
+                onClick={() => props.setPage(Math.max(props.page - 1, 0))}
+                title="Précédent"
+            >
+                <ChevronLeft/>
+            </div>
+            <div className={style.numbers}>
+                {
+                    Array.from({length: props.pageCount}, (_, i) => i)
+                        .map(n => (
+                            <span
+                                className={cn(style.number, {[style.active]: n === props.page})}
+                                onClick={() => props.setPage(n)}
+                            >
+                                {n + 1}
+                            </span>
+                        ))
+                }
+            </div>
+            <div
+                className={cn(style.chevronWrapper, {[style.disabled]: props.page >= props.pageCount - 1})}
+                onClick={() => props.setPage(Math.min(props.page + 1, props.pageCount - 1))}
+                title="Suivant"
+            >
+                <ChevronRight/>
+            </div>
+        </div>
+    );
+}

src/components/pagination/style.module.scss

@@ -0,0 +1,73 @@
+.pagination {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chevronWrapper {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  line-height: 2.5rem;
+  background: var(--block-bg-color);
+  text-align: center;
+  vertical-align: top;
+  color: var(--text-color);
+  border-radius: 1.25rem;
+  border: 0.0625rem solid var(--border-color);
+  justify-content: center;
+  align-items: center;
+
+  &:not(.disabled) {
+    cursor: pointer;
+
+    &:hover {
+      background: #0160ee;
+      color: #fff;
+      border-color: #0160ee;
+    }
+  }
+}
+
+.disabled {
+  opacity: .3;
+}
+
+.numbers {
+  overflow: hidden;
+  font-size: .8125rem;
+  font-weight: 700;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.number {
+  display: inline-block;
+  height: 1.875rem;
+  min-width: 1.875rem;
+  line-height: 1.875rem;
+  padding: 0 0.3125rem;
+  text-align: center;
+  vertical-align: middle;
+  color: var(--link-color);
+  text-decoration: none;
+
+  &:not(.active) {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--text-hover-secondary);
+      text-decoration: none;
+    }
+  }
+}
+
+.active {
+  background: var(--link-color);
+  color: var(--text-light);
+  border-radius: 50%;
+}

src/components/preview/index.tsx

@@ -1,6 +1,6 @@
 import style from "./style.module.scss";
 import {useMemo} from "preact/hooks";
-import {smileysMap} from "../../utils/smileys";
+import {smileysMap} from "@/utils/smileys";
 
 // const blocks = {
 //     text: "text",
@@ -16,18 +16,9 @@ import {smileysMap} from "../../utils/smileys";
 export function Preview(props: {
     raw: string,
 }) {
-    // console.log(parseRaw(props.raw))
-
-    // const segments = useMemo(() => {
-    //     return parseRaw(props.raw);
-    // }, [props.raw]);
-
     const html = useMemo(() => {
-        // console.log(escapeHtml(props.raw))
         const escaped = escapeHtml(props.raw);
-        // const withBr = escaped.replace(/\n/g, '<br/>')
-        // console.log(withBr)
-        return injectHTML(escaped).replace(/\n/g, '<br/>')
+        return injectHTML(escaped)/*.replace(/\n/g, '<br/>')*/;
     }, [props.raw]);
 
     return (
@@ -49,47 +40,68 @@ export function Preview(props: {
     // )
 }
 
+function quoteReplacer(reg: RegExp, raw: string): string {
+    // return raw
+    const match = reg.exec(raw);
+    reg.lastIndex = 0;
+    if (!match) return raw;
+
+    const index = match.index;
+    const length = match[0].length;
+
+    return quoteReplacer(
+        reg,
+        raw.substring(0, index) + `<blockquote>${quoteReplacer(reg, match[0].replace(/^&gt; ?/gm, ""))}</blockquote>` + raw.substring(index + length)
+    );
+}
+
+// WARNING: the order is important
 const jvcodeMap: [RegExp, string | ((reg: RegExp, raw: string) => string)][] = [
-    // [/(https?:\/\/image\.noelshack\.com\/\S+)/g]: "<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"$1\"/>"
-    [ // Stickers
-        /(^| )https?:\/\/image\.noelshack\.com\/(?:fichiers|minis)(\S+)/gm,
-        "$1<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"https://image.noelshack.com/minis/$2\"/>"
+    [ // Quotes
+        /^&gt;.*(?:\n&gt;.*)*/m,
+        quoteReplacer
     ],
-    [ // Vocaroo
-        /(^| )https:\/\/vocaroo.com\/(.+)/gm,
-        "$1<div><iframe width=\"300\" height=\"60\" src=\"https://vocaroo.com/embed/$2?autoplay=0\" frameborder=\"0\" allow=\"autoplay\"></iframe></div>"
+
+    [ // Wrap text with paragraphs
+        /(^|>)([^<]+)($|<)/g,
+        "$1<p>$2</p>$3"
     ],
-    [ // Citations
-        /^(?:&gt;.*(?:\n&gt;.*)*)/g,
+    [ // Replace line breaks between <p> tags with <br>
+        /<p>\s*([\s\S]*?)\s*<\/p>/g,
         (reg, raw) => {
-            // return raw
-            const match = reg.exec(raw);
-            if (!match) return raw;
-
-            console.log(match);
-            const index = match.index;
-            const length = match[0].length;
-
-            return raw.substring(0, index) + `<blockquote>${match[0].replace(/^&gt;/gm, "")}</blockquote>` + raw.substring(index + length);
-            // console.log(match)
-            // const content = match[0].replace(/^>/gm, "");
-            // return `<blockquote>${content}</blockquote>`;
+            // console.log(raw)
+            return raw.replace(reg, (_, matched) => {
+                // const randomId = (Math.random() + 1).toString(36).substring(2);
+                console.log(matched)
+                return `<p>${matched.replace(/\n/g, "<br/>")}</p>`;
+            });
         }
     ],
     [ // Spoil
         /&lt;spoil&gt;(.*?)&lt;\/spoil&gt;/gm,
-        (reg, raw) => { // Citations
+        (reg, raw) => {
             return raw.replace(reg, (_, matched) => {
                 const randomId = (Math.random() + 1).toString(36).substring(2);
                 return `<span class="bloc-spoil-jv"><input type="checkbox" id="${randomId}" class="open-spoil"><label class="barre-head" for="${randomId}"><span class="txt-spoil">Spoil</span></label><span class="contenu-spoil">${matched}</span></span>`;
             });
         }
     ],
+    [ // Stickers
+        // /(^|<p>| )https?:\/\/image\.noelshack\.com\/(?:fichiers|minis)([A-z0-9/\-_.]+)/gm,
+        /(^|<[a-z]+\/?>| )https?:\/\/image\.noelshack\.com\/(?:fichiers|minis)([A-z0-9/\-_.]+)/gm,
+        "$1<img class=\"sticker\" width=\"68\" height=\"51\" alt=\"sticker\" src=\"https://image.noelshack.com/minis/$2\"/>"
+    ],
+    [ // Vocaroo
+        /(^|<[a-z]+\/?>| )https:\/\/vocaroo.com\/(.+)/gm,
+        "$1<div><iframe width=\"300\" height=\"60\" src=\"https://vocaroo.com/embed/$2?autoplay=0\" frameborder=\"0\" allow=\"autoplay\"></iframe></div>"
+    ],
     [ // Regular links
-        /(^| )(https?:\/\/\S+)/gm,
+        /(^|<[a-z]+\/?>| )(https?:\/\/[-a-zA-Z0-9@:%._/+~#=?&;]+)/gm,
         "$1<a href=\"$2\" target=\"_blank\">$2</a>"
     ],
 
+    // TODO: embeded youtube, utiliser le titre du topic pour chercher une vidéo corespondante avec l'API search de youtube
+
     // Generate regexes for smileys
     // ...smileysMap.map((maping) => {
     //     return [new RegExp(
@@ -106,35 +118,34 @@ const jvcodeMap: [RegExp, string | ((reg: RegExp, raw: string) => string)][] = [
     //     )
     //     return [/(https?:\/\/image\.noelshack\.com\/\S+)/g, "<img width=\"68\" height=\"51\" alt=\"noelshak\" src=\"$1\"/>"]
     // })()
-    ...smileysMap.map(mapping => {
+    ...[...smileysMap].sort((a, b) => b[0].length - a[0].length).map(mapping => { // Sort smileys by length to match :-))) before :-)
         return [
-            new RegExp("(?:(^| )" + mapping[0].replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ")", "gm"),
+            new RegExp("(<p>| )" + mapping[0].replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "gm"),
             `$1<img src="https://image.jeuxvideo.com/smileys_img/${mapping[1]}.gif" alt="${mapping[0]}"/>`
         ];
     })
 ];
 
-// console.log(jvcodeMap)
-
 function injectHTML(input: string): string {
-    let previousInput;
-    // console.log(Object.entries(jvcodeMap))
-    do {
-        previousInput = input; // Keep track of input before replacements
-        for (const [regex, htmlOrFunc] of jvcodeMap) {
-            // const regex = new RegExp(bbCode, 'gi');
-            // console.log(regex, html, input)
-            if (htmlOrFunc instanceof Function) {
-                input = htmlOrFunc(regex, input);
-            } else {
-                input = input.replace(regex, htmlOrFunc as string);
-            }
+    // console.log("---------------------")
+    let text = input.slice()
+    for (const [regex, htmlOrFunc] of jvcodeMap) {
+        // Reset the regex @see https://stackoverflow.com/a/11477448/5912637
+        regex.lastIndex = 0;
+
+        // const regex = new RegExp(bbCode, 'gi');
+        // console.log(regex, html, input)
+        if (htmlOrFunc instanceof Function) {
+            text = htmlOrFunc(regex, text);
+        } else {
+            // console.log(regex)
+            // console.log(text)
+            text = text.replace(regex, htmlOrFunc as string);
         }
-        // } while (input !== previousInput); // Repeat until no more replacements
-    } while (false); // Repeat until no more replacements
+    }
 
     // console.log(input)
-    return input;
+    return text;
 }
 
 function escapeHtml(unsafe: string): string {

src/components/preview/style.module.scss

@@ -2,6 +2,11 @@
   //white-space: pre-line;
 
   :global {
+    & .sticker {
+      // Force dimensions to width/height even if the image is not loaded
+      display: inline-block;
+    }
+
     .bloc-spoil-jv {
       //margin-bottom: 0.9375rem;
       margin-bottom: 0;

src/components/radio/index.tsx

@@ -0,0 +1,43 @@
+import style from "./style.module.scss";
+import {ChangeEvent} from "rollup";
+import {JSX} from "preact";
+
+export function Radio<Choices extends Record<string, string>>(props: {
+    name: string,
+    choices: Choices,
+    value: keyof Choices,
+    onChoose: (choice: keyof Choices) => void,
+}) {
+    let buttons = [];
+
+    for (const [key, value] of Object.entries(props.choices)) {
+        console.log(props.value)
+        buttons.push(
+            <div className={style.group}>
+                <input
+                    type="radio"
+                    name={props.name}
+                    id={key}
+                    autoComplete="off"
+                    value={key}
+                    checked={props.value === key}
+                    onClick={e => {
+                        props.onChoose(key);
+                    }}
+                />
+                <label
+                    htmlFor={key}
+                >
+                    {value}
+                </label>
+            </div>
+        )
+    }
+
+
+    return (
+        <div className={style.container}>
+            {buttons}
+        </div>
+    );
+}

src/components/radio/style.module.scss

@@ -0,0 +1,53 @@
+.container {
+  display: flex;
+  flex-direction: row;
+}
+
+.group {
+  display: inline-block;
+
+  label {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 1.25rem;
+    margin: 0;
+    border: 0.0625rem solid var(--text-secondary);
+    border-right: none;
+    height: 2.25rem;
+    line-height: 2.25rem;
+    font-size: 0.9375rem;
+    text-decoration: none;
+    color: var(--text-secondary);
+
+    white-space: nowrap;
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--text-hover-secondary);
+      color: var(--text-hover-secondary);
+    }
+  }
+
+  &:first-child label {
+    border-radius: 1.125rem 0 0 1.125rem;
+  }
+
+  &:last-child label {
+    border-radius: 0 1.125rem 1.125rem 0;
+    border-right: 0.0625rem solid var(--text-secondary);
+  }
+
+  input:checked + label {
+    color: #fff;
+    background-color: var(--text-secondary);
+
+    &:hover {
+      border-color: var(--text-hover-secondary);
+      background: var(--text-hover-secondary);
+      color: #fff;
+    }
+  }
+}
+

src/components/settings/index.tsx

@@ -1,40 +1,65 @@
 import {Input} from "../input";
-import {Link, Thermometer, Sliders} from "preact-feather";
+import {X, Link, Key} from "preact-feather";
 import {Button} from "../button";
-import {useEffect, useState} from "preact/hooks";
-import {fetchSettings, saveSettings, Settings as SettingsType} from "../../utils/settings";
+import {useContext} from "preact/hooks";
 import {Slider} from "../slider";
 import {FormGroup} from "../form";
+import {settingsCtx, Settings as SettingsType} from "@/contexts/settings";
+import {routeCtx} from "@/contexts/route";
+import {topicsCtx} from "@/contexts/topics";
+import style from "./style.module.scss";
+import {logCtx} from "@/contexts/log";
+import {Radio} from "@/components/radio";
 
-export function Settings(props: {
-    settings: SettingsType,
-    setSettings: (settings: SettingsType) => void,
-    resetApp: () => void,
-}) {
-    // const [settings, setSettings] = useState(fetchSettings)
-    //
-    // useEffect(() => {
-    //     saveSettings(settings);
-    // }, [settings]);
+export function Settings() {
+    const [, , routeActions] = useContext(routeCtx);
+    const [settings, setSettings, settingsActions] = useContext(settingsCtx);
+    const [, , topicsActions] = useContext(topicsCtx);
+    const [log, , logActions] = useContext(logCtx);
+
+    const resetApp = () => {
+        settingsActions.reset();
+        topicsActions.reset();
+        logActions.reset();
+    }
 
     return <div>
         <form>
             <FormGroup>
-                <label htmlFor="api">API</label>
+                <label htmlFor="api">Type d'API</label>
+                <Radio<{[key in SettingsType["apiType"]]: string}>
+                    name="apiType"
+                    choices={{"ooba": "Oobabooga", "beam": "Beam Cloud"}}
+                    value={settings.apiType}
+                    onChoose={(choice) => setSettings({...settings, apiType: choice})}
+                />
+            </FormGroup>
+            <FormGroup>
+                <label htmlFor="api">Url d'API</label>
                 <Input
                     type="text"
-                    placeholder="URl d'API ex: https://ouruq7zepnehg2-5000.proxy.runpod.net/"
+                    placeholder={settings.apiType === "beam" ? "Ex: https://jvcgpt-d692de2-v1.app.beam.cloud/stream" : "Ex: https://ouruq7zepnehg2-5000.proxy.runpod.net/"}
                     icon={Link}
-                    value={props.settings.apiURL}
-                    onChange={(v) => props.setSettings({...props.settings, apiURL: v as string})}
+                    value={settings.apiURL}
+                    onChange={(v) => setSettings({...settings, apiURL: v as string})}
+                />
+            </FormGroup>
+            <FormGroup>
+                <label htmlFor="api">Clé d'API</label>
+                <Input
+                    type="password"
+                    placeholder="Ex: zyCH5svVE-qXv_J34ZLGc0vKQaGbYf_7YTbl2VKaAIqgwa_-qCeA=="
+                    icon={Key}
+                    value={settings.apiKey}
+                    onChange={(v) => setSettings({...settings, apiKey: v as string})}
                 />
             </FormGroup>
             <FormGroup>
                 <label for="temperature">Temperature</label>
                 <Slider
                     name="temperature"
-                    value={props.settings.temperature}
-                    onChange={(v) => props.setSettings({...props.settings, temperature: v})}
+                    value={settings.temperature}
+                    onChange={(v) => setSettings({...settings, temperature: v})}
                     min={0.1}
                     max={2}
                     step={0.1}
@@ -42,25 +67,31 @@ export function Settings(props: {
             </FormGroup>
             <div>
                 <Button
-                    onClick={() => {
-                        props.resetApp()
-                    }}
+                    onClick={resetApp}
                     secondary={true}
                     title="Tout réinitialiser"
                 >
-                    Réinitialiser
+                    Tout réinitialiser
                 </Button>
             </div>
             <br/>
             <div>
-                <Button
-                    onClick={() => {
-                        history.go(-1)
-                    }}
-                >
+                <Button onClick={routeActions.goBack}>
                     Retour
                 </Button>
             </div>
         </form>
+        <hr/>
+        <div>
+            <h2>Log</h2>
+            <pre className={style.log}>
+                {log}
+            </pre>
+            <div>
+                <Button onClick={logActions.reset} title="Vider le log">
+                    <X/>
+                </Button>
+            </div>
+        </div>
     </div>
 }

src/components/settings/style.module.scss

@@ -0,0 +1,15 @@
+.log {
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.25rem;
+  display: block;
+  font-size: inherit;
+  line-height: 1.42857;
+  margin: 0 0 1.5rem 0;
+  padding: 0.5625rem;
+  word-break: break-all;
+  word-wrap: break-word;
+  overflow: auto;
+  overflow-y: scroll;
+  min-height: 5rem;
+  max-height: 30rem;
+}

src/components/spinner/style.module.scss

@@ -1,14 +1,18 @@
 .spinnerSquare {
+  --height: 40px;
+  --width: 50px;
+  --small-height: calc(var(--height) / 1.5);
+
   display: flex;
   flex-direction: row;
-  width: 90px;
-  height: 120px;
+  width: var(--width);
+  height: var(--height);
 
   > div {
-    width: 17px;
-    height: 80px;
+    width: calc(var(--width) / 5);
+    height: var(--small-height);
     margin: auto auto;
-    border-radius: 4px;
+    border-radius: 2px;
   }
 }
 
@@ -26,21 +30,21 @@
 
 @keyframes square-anim {
   0% {
-    height: 80px;
+    height: var(--small-height);
     background-color: var(--text-secondary);
   }
   20% {
-    height: 80px;
+    height: var(--small-height);
   }
   40% {
-    height: 120px;
+    height: var(--height);
     background-color: var(--text-hover-secondary);
   }
   80% {
-    height: 80px;
+    height: var(--small-height);
   }
   100% {
-    height: 80px;
+    height: var(--small-height);
     background-color: var(--text-secondary);
   }
 }

src/components/topic/index.tsx

@@ -1,24 +1,78 @@
-import {Post as PostType, Topic as TopicType} from "../../utils/topics";
+import {Post as PostType, Topic as TopicType, topicsCtx} from "@/contexts/topics";
 import style from "./style.module.scss";
 import {Preview} from "../preview";
-import {iso8601ToFrench} from "../../utils/dates";
+import {iso8601ToFrench} from "@/utils/dates";
 import {FormGroup} from "../form";
 import {Slider} from "../slider";
 import {Button} from "../button";
-import {Settings as SettingsType, Settings} from "../../utils/settings";
+import {settingsCtx} from "@/contexts/settings";
+import {useContext, useState, useMemo} from "preact/hooks";
+import {Wysiwyg} from "@/components/wysiwyg";
+import {
+    ChevronRight,
+    X,
+} from "preact-feather";
+import cn from "classnames";
+import {Pagination} from "@/components/pagination";
+import {Spinner} from "@/components/spinner";
+import {logCtx} from "@/contexts/log";
+
+const postsPerPage = 10;
 
 export function Topic(props: {
     topic: TopicType,
-    settings: Settings,
-    setSettings: (settings: SettingsType) => void,
-    addPosts: (topicId: string, postsCount: number) => Promise<void>,
-    pendingGeneration: boolean,
+    page: number,
+    setPage: (newPage: number) => void,
 }) {
-    console.log(props.topic)
+    /**
+     * TODO
+     * prendre la générationDate du premier post et remplacer toutes la dates (IA) avec celle-ci en calculant le delta en en l'appliquant à chaque post
+     * Pour il faut remplacer la date des citations en prenant en compte le delta
+     *
+     */
+    const [topicsContext, , topicsActions] = useContext(topicsCtx);
+    const [settings, setSettings] = useContext(settingsCtx);
+    const [, , logActions] = useContext(logCtx);
+    const [wysiwygText, setWysiwygText] = useState("");
+
+    const addQuote = (post: PostType) => {
+        setWysiwygText((wysiwygText.length > 1 ? `${wysiwygText}\n\n` : "") + post.content.split("\n").map(l => `> ${l}`).join("\n"))
+    }
+
+    const postsSlice = useMemo(
+        () => props.topic.posts.slice(props.page * postsPerPage, (props.page + 1) * postsPerPage),
+        [props.page, props.topic.posts]
+    );
+
+    const pendingGeneration = topicsContext.generation === "pending";
+
+    const pagination = (
+        <Pagination
+            pageCount={Math.ceil(props.topic.posts.length / postsPerPage)}
+            page={props.page}
+            setPage={props.setPage}
+        />
+    );
 
     return (
         <div>
-            {props.topic.posts.map(post => <Post post={post}/>)}
+            <div className={style.wrapper}>
+                {pagination}
+                <div className={style.postsContainer}>
+                    {postsSlice.map((post, index) => {
+                        const realIndex = postsPerPage * props.page + index;
+                        return (
+                            <Post
+                                post={post}
+                                quote={() => addQuote(post)}
+                                remove={() => topicsActions.deletePost(props.topic.id, realIndex)}
+                                loading={pendingGeneration && realIndex >= props.topic.posts.length - 1}
+                            />
+                        )
+                    })}
+                </div>
+                {pagination}
+            </div>
             <div>
                 <h2>Ajout de posts</h2>
                 <div className={style.generationSettings}>
@@ -26,10 +80,8 @@ export function Topic(props: {
                         <label htmlFor="postCount">Nombre de posts</label>
                         <Slider
                             name="postCount"
-                            value={props.settings.postCount}
-                            // onChange={(v) => props.setSettings({...props.settings, temperature: v as number})}
-                            // onChange={setGenerationPostCount}
-                            onChange={(v) => props.setSettings({...props.settings, postCount: v})}
+                            value={settings.postCount}
+                            onChange={(v) => setSettings({...settings, postCount: v})}
                             min={1}
                             max={10}
                             step={1}
@@ -37,20 +89,33 @@ export function Topic(props: {
                     </FormGroup>
                 </div>
                 <Button
-                    onClick={() => props.addPosts(props.topic.id, props.settings.postCount)}
+                    onClick={() => topicsActions.generatePosts(settings, logActions.log, props.topic)}
                     secondary={true}
-                    loading={props.pendingGeneration}
+                    loading={pendingGeneration}
                 >
-                    Générer
+                    {pendingGeneration ? "Génération en cours…" : "Générer"}
                 </Button>
             </div>
             <hr/>
+            <div>
+                <Wysiwyg
+                    showTitle={false}
+                    onSubmit={(user, title, text) => {
+                        topicsActions.addPost(props.topic.id, user, text)
+                    }}
+                    text={wysiwygText}
+                    setText={setWysiwygText}
+                />
+            </div>
         </div>
     )
 }
 
 function Post(props: {
-    post: PostType
+    post: PostType,
+    quote: () => void,
+    remove: () => void,
+    loading: boolean,
 }) {
     return (
         <div className={style.post}>
@@ -58,8 +123,17 @@ function Post(props: {
                 <img src="https://image.jeuxvideo.com/avatar-sm/default.jpg" className={style.avatar} alt="ahi"/>
                 <div className={style.user}>{props.post.user}</div>
                 <div className={style.date}>{iso8601ToFrench(props.post.date)}</div>
+                <div className={style.actions}>
+                    <div className={cn(style.action, style.actionDanger)} title="Supprimer" onClick={props.remove}>
+                        <X size={16} style={{right: 0.6, top: 1.2}}/>
+                    </div>
+                    <div className={style.action} title="Citer" onClick={props.quote}>
+                        <ChevronRight size={16} style={{left: 1.2}}/>
+                    </div>
+                </div>
             </div>
             <Preview raw={props.post.content}/>
+            {props.loading ? <Spinner className={style.spinner}/> : null}
         </div>
     )
 }

src/components/topic/style.module.scss

@@ -1,3 +1,12 @@
+.wrapper {
+  margin-bottom: 1.5rem;
+}
+
+.postsContainer {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .post {
   margin-bottom: 0.9375rem;
   font-size: .9375rem;
@@ -15,10 +24,10 @@
   margin-bottom: 0.75rem;
   display: grid;
   grid-template-areas:
-        "avatar user"
-        "avatar date";
+        "avatar user actions"
+        "avatar date actions";
   grid-template-rows: 1.5rem 1.5rem;
-  grid-template-columns: auto 1fr;
+  grid-template-columns: auto 1fr auto;
   column-gap: .625rem;
 }
 
@@ -45,6 +54,41 @@
   font-size: .8125rem;
 }
 
+.actions {
+  grid-area: actions;
+  display: flex;
+  gap: 0.2rem;
+}
+
+.action {
+  border-radius: 0.25rem;
+  background-color: #515458;
+  padding: 0.05rem;
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+
+  svg {
+    display: block;
+    position: relative;
+    //margin-bottom: 1px;
+    //margin-left: 1px;
+    //left: 1px;
+    top: 1px;
+    margin: auto;
+    height: calc(100% - 2px);
+    width: calc(100% - 2px);
+  }
+}
+
+.actionDanger {
+  background-color: var(--text-danger);
+}
+
+.spinner {
+  margin: auto;
+}
+
 .generationSettings {
   display: grid;
   grid-template-columns: 1fr 1fr;

src/components/topics/index.tsx

@@ -1,59 +1,87 @@
-import {Topic} from "../../utils/topics";
+import {Topic, topicsCtx} from "@/contexts/topics";
 import {Layout} from "../layout";
 import {Spinner} from "../spinner";
 import style from "./style.module.scss";
-import {Route, routes, RouteSetter} from "../../utils/route";
 import {Button} from "../button";
 import {Input} from "../input";
-import {Link, Thermometer, Sliders} from "preact-feather";
-import {Settings as SettingsType, Settings} from "../../utils/settings";
-import {useMemo, useState} from "preact/hooks";
-import {frenchToIso8601, iso8601ToFrench} from "../../utils/dates";
+import {Clipboard, Trash2} from "preact-feather";
+import {useContext, useEffect, useMemo, useRef, useState} from "preact/hooks";
+import {frenchToIso8601, iso8601ToFrench} from "@/utils/dates";
 import {FormGroup} from "../form";
 import {Slider} from "../slider";
 import cn from "classnames";
+import {routeCtx, routes} from "@/contexts/route";
+import {settingsCtx} from "@/contexts/settings";
+import {Wysiwyg} from "@/components/wysiwyg";
+import {Alert} from "@/components/alert";
+import {logCtx} from "@/contexts/log";
+import {Pagination} from "@/components/pagination";
+
+const topicsPerPage = 10;
 
 export function Topics(props: {
-    topics: Topic[] | null,
-    setRoute: RouteSetter,
-    settings: Settings,
-    setSettings: (settings: SettingsType) => void,
-    generateTopic: (postCount: number) => Promise<void>,
-    pendingGeneration: boolean,
-    latestGeneratedTopicId: string | null,
+    page: number,
+    setPage: (newPage: number) => void,
 }) {
-    // const [generationPostCount, setGenerationPostCount] = useState<number>(1)
+    const [importContent, setImportContent] = useState("");
+    const [topicsContext, setTopicsContext, topicsActions] = useContext(topicsCtx);
+    const [, , logActions] = useContext(logCtx);
+    const [settings, setSettings] = useContext(settingsCtx);
 
-    const sortedTopics = useMemo(() => {
-        if (props.topics === null || props.topics.length < 1) {
-            return props.topics;
+    useEffect(() => {
+        if((topicsPerPage * props.page) >= topicsContext.topics.length) {
+            props.setPage(Math.ceil(topicsContext.topics.length / topicsPerPage)/* - 1*/);
         }
+    }, [topicsContext.topics.length])
 
-        return props.topics.sort((topicA, topicB) => {
+    const sortedTopics = useMemo(() => {
+        return [...topicsContext.topics].sort((topicA, topicB) => {
             if (topicA.posts.length < 1 || topicB.posts.length < 1) {
                 return 0;
             }
             return topicB.posts[topicB.posts.length - 1].date.localeCompare(topicA.posts[topicA.posts.length - 1].date);
         });
-    }, [props.topics]);
+    }, [topicsContext.topics]);
+
+    const sortedTopicsSlice = useMemo(
+        () => sortedTopics.slice(props.page * topicsPerPage, (props.page + 1) * topicsPerPage),
+        [props.page, sortedTopics]
+    );
+
+    const pendingGeneration = topicsContext.generation === "pending";
 
     return (
         <div>
-            {
-                sortedTopics === null ?
-                    <Spinner className={style.spinner}/> :
-                    <List topics={sortedTopics} setRoute={props.setRoute}
-                          latestGeneratedTopicId={props.latestGeneratedTopicId}/>
-            }
+            <div className={style.listWrapper}>
+                <Pagination
+                    pageCount={Math.ceil(sortedTopics.length / topicsPerPage)}
+                    page={props.page}
+                    setPage={props.setPage}
+                />
+                <List topics={sortedTopicsSlice}/>
+                <Pagination
+                    pageCount={Math.ceil(sortedTopics.length / topicsPerPage)}
+                    page={props.page}
+                    setPage={props.setPage}
+                />
+            </div>
             <div>
                 <h2>Nouveau sujet</h2>
+                <Alert
+                    lines={
+                        topicsContext.generation === "error" ? [
+                            "Erreur lors de la génération du topic",
+                            "Veuillez regarder le log pour plus d'informations"
+                        ] : []
+                    }
+                />
                 <div className={style.generationSettings}>
                     <FormGroup>
                         <label for="postCount">Nombre de posts</label>
                         <Slider
                             name="postCount"
-                            value={props.settings.postCount}
-                            onChange={(v) => props.setSettings({...props.settings, postCount: v})}
+                            value={settings.postCount}
+                            onChange={(v) => setSettings({...settings, postCount: v})}
                             min={1}
                             max={10}
                             step={1}
@@ -61,22 +89,65 @@ export function Topics(props: {
                     </FormGroup>
                 </div>
                 <Button
-                    onClick={() => props.generateTopic(props.settings.postCount)}
+                    onClick={() => {
+                        topicsActions.generateTopic(settings, logActions.log)
+                    }}
                     secondary={true}
-                    loading={props.pendingGeneration}
+                    loading={pendingGeneration}
                 >
-                    Générer
+                    {pendingGeneration ? "Génération en cours…" : "Générer"}
                 </Button>
             </div>
             <hr/>
+            <div>
+                <Wysiwyg
+                    showTitle={true}
+                    onSubmit={(user, title, text) => {
+                        // setLastAddedTopicId(topicsActions.addTopic(user, title, text));
+                        topicsActions.addTopic(user, title, text)
+                        props.setPage(0);
+                        window.scrollTo({top: 0, behavior: 'smooth'});
+                    }}
+                    disabled={pendingGeneration}
+                />
+            </div>
+            <hr/>
+            <div>
+                <Alert
+                    lines={
+                        topicsContext.import === "error" ? [
+                            "Erreur lors de l'importation du sujet",
+                        ] : []
+                    }
+                />
+                <div className={style.import}>
+                    <textarea
+                        placeholder="Importer un sujet…"
+                        name="import"
+                        id="import"
+                        cols="30"
+                        rows="10"
+                        value={importContent}
+                        onInput={(e) => setImportContent((e.target as HTMLTextAreaElement).value)}
+                    />
+                </div>
+                <Button
+                    onClick={() => {
+                        topicsActions.importTopic(importContent);
+                        setImportContent("");
+                    }}
+                    secondary={true}
+                >
+                    Importer
+                </Button>
+            </div>
         </div>
     )
 }
 
 function List(props: {
     topics: Topic[],
-    setRoute: RouteSetter,
-    latestGeneratedTopicId: string | null,
+    // latestGeneratedTopicId: string | null,
 }) {
     return (
         <ul className={style.list}>
@@ -85,23 +156,64 @@ function List(props: {
                 <span>Auteur</span>
                 <span>NB</span>
                 <span>Dernier msg</span>
+                <span></span>
             </li>
-            {props.topics.length < 1 && <li><span>Aucun sujet</span><span></span><span></span><span></span></li>}
-            {props.topics.map(topic => (
-                <li className={cn({[style.highlight]: topic.id === props.latestGeneratedTopicId})}>
+            {props.topics.length < 1 && <li><span>Aucun sujet</span><span/><span/><span/><span/></li>}
+            {props.topics.map(topic => <TopicElement topic={topic}/>)}
+        </ul>
+    )
+}
+
+function TopicElement(props: {
+    topic: Topic;
+}) {
+    const topic = props.topic;
+    const [, setRoute] = useContext(routeCtx);
+    const [, , topicsActions] = useContext(topicsCtx);
+
+    let isRecent: boolean = false;
+    if (topic.posts.length > 0) {
+        const firstPost = topic.posts[0];
+        const dateDelta = new Date() - new Date(firstPost.generationDate || firstPost.date); // difference in ms
+
+        // If the topic is more recent than 3 sec
+        if (dateDelta < 3000) {
+            isRecent = true;
+        }
+    }
+
+    return (
+        <li className={cn({[style.highlight]: isRecent})}>
                     <span>
-                        <a href="#" onClick={(e) => {
+                        <a href={routes.topic(topic.id, 1).location} onClick={(e) => {
                             e.preventDefault();
-                            props.setRoute(routes.topic, 0, topic.id);
+                            setRoute(routes.topic(topic.id, 1));
                         }}>
                             {topic.title}
                         </a>
                     </span>
-                    <span>{topic.posts[0].user}</span>
-                    <span>{topic.posts.length}</span>
-                    <span>{iso8601ToFrench(topic.posts[topic.posts.length - 1].date)}</span>
-                </li>
-            ))}
-        </ul>
+            <span>{topic.posts[0].user}</span>
+            <span>{topic.posts.length}</span>
+            <span>{iso8601ToFrench(topic.posts[topic.posts.length - 1].date)}</span>
+            <span>
+                <span title="Copier le sujet">
+                    <Clipboard
+                        size={16}
+                        className={style.clipboard}
+                        onClick={() => {
+                            const json = JSON.stringify(topic);
+                            navigator.clipboard.writeText(json);
+                        }}
+                    />
+                </span>
+                <span title="Supprimer le sujet">
+                    <Trash2
+                        size={16}
+                        className={style.trash}
+                        onClick={() => topicsActions.deleteTopic(topic.id)}
+                    />
+                </span>
+            </span>
+        </li>
     )
 }

src/components/topics/style.module.scss

@@ -2,9 +2,13 @@
   margin: 5rem auto;
 }
 
+.listWrapper {
+  margin-bottom: 1.5rem;
+}
+
 .list {
   display: grid;
-  grid-template-columns: 10fr 3fr 1fr 3fr;
+  grid-template-columns: 10fr 3fr 1fr 3fr 0.5fr;
 
   list-style-type: none;
   //margin: 0;
@@ -15,6 +19,7 @@
   width: 100%;
   padding: 0;
   overflow: hidden;
+  margin-top: 1.5rem;
   margin-bottom: 1.5rem;
 
   > li {
@@ -27,6 +32,11 @@
       font-weight: var(--topic-font-weight);
       font-size: var(--topic-font-size);
       padding: var(--topic-gap);
+      height: 100%;
+      display: flex;
+      align-items: center;
+      background-color: transparent;
+      transition: background-color .2s ease-in-out;
 
       a {
         overflow: hidden;
@@ -47,18 +57,29 @@
 
     &:nth-child(even) {
       > span {
-        background: var(--block-even-bg-color);
+        background-color: var(--block-even-bg-color);
       }
     }
 
     &.highlight {
       > span {
-        background: var(--block-highlighted-bg-color);
+        background-color: var(--block-highlighted-bg-color);
       }
     }
   }
 }
 
+.clipboard {
+  cursor: pointer;
+  color: var(--link-color);
+  margin-right: 0.25rem;
+}
+
+.trash {
+  cursor: pointer;
+  color: var(--text-danger);
+}
+
 .head {
   > span {
     text-transform: uppercase;
@@ -74,4 +95,30 @@
   //@media screen and (min-width: 600px) {
   //  grid-template-columns: 1fr 1fr;
   //}
+}
+
+.import {
+  background: var(--input-bg-color);
+  overflow: hidden;
+  border: 0.0625rem solid var(--input-border-color);
+  border-radius: 0.25rem;
+  margin-bottom: 0.9375rem;
+
+  textarea {
+    display: block;
+    width: 100%;
+    height: 10rem;
+    max-width: 100%;
+    min-width: 100%;
+    border: 0 solid rgba(0, 0, 0, 0);
+    padding: 0.625rem;
+    background-color: rgba(0, 0, 0, 0);
+    color: var(--input-text-color);
+    min-height: 5rem;
+    resize: vertical;
+
+    &::placeholder {
+      color: var(--input-placeholder-color);
+    }
+  }
 }

src/components/wysiwyg/index.tsx

@@ -0,0 +1,287 @@
+import style from "./style.module.scss";
+import {Preview} from "@/components/preview";
+import cn from "classnames";
+import {useState, useRef, MutableRef, useEffect} from "preact/hooks";
+import {JSX} from "preact";
+import {
+    User,
+    Type,
+    Bold,
+    Italic,
+    Underline,
+    ChevronRight,
+    EyeOff,
+    Smile,
+    Image,
+} from "preact-feather";
+import {smileysMap} from "@/utils/smileys";
+import {Button} from "@/components/button";
+import {Input} from "@/components/input";
+import {Alert} from "@/components/alert";
+
+const iconSize = 14;
+// const initialText = "> zefgze https://image.noelshack.com/fichiers/2018/13/4/1522325846-jesusopti.png\n" +
+//     "> zgfzreg :-)))\n" +
+//     "> > ergerg\n" +
+//     "zezefzef\n" +
+//     "<spoil>loool</spoil> AHI";
+
+export function Wysiwyg(props: {
+    showTitle: boolean,
+    onSubmit: (user: string, title: string, text: string) => void,
+    disabled?: boolean,
+    initialText?: string,
+    text?: string,
+    setText?: (text: string) => void,
+}) {
+    const [errors, setErrors] = useState<string[]>([]);
+    const [title, setTitle] = useState("");
+    const [user, setUser] = useState("");
+    const [text, setText] = props.text !== undefined && props.setText !== undefined ? [props.text, props.setText] : useState(props.initialText || "");
+    const [accordion, setAccordion] = useState<"smileys"|"stickers"|false>(false);
+
+    // Create a ref for the textarea
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+    const selectionRange = useRef<[start: number, end: number]|null>(null);
+
+    // // Example function to demonstrate interaction with the ref
+    // const focusTextarea = () => {
+    //     if (textareaRef.current) {
+    //         textareaRef.current.focus();
+    //     }
+    // };
+
+    useEffect(() => {
+        if (textareaRef.current && selectionRange.current) {
+            const [start, end] = selectionRange.current;
+            textareaRef.current.setSelectionRange(start, end);
+            selectionRange.current = null;
+        }
+    }, [text])
+
+    const bold = createAction(textareaRef, (start, end) => {
+        const tag = "'''";
+
+        setText(insertAt(insertAt(text, tag, start), tag, end + tag.length));
+        selectionRange.current = [start + tag.length, end + tag.length];
+    });
+
+    const italic = createAction(textareaRef, (start, end) => {
+        const tag = "''";
+
+        setText(insertAt(insertAt(text, tag, start), tag, end + tag.length));
+        selectionRange.current = [start + tag.length, end + tag.length];
+    });
+
+    const underline = createAction(textareaRef, (start, end) => {
+        const startTag = "<u>";
+        const endTag = "</u>";
+
+        setText(insertAt(insertAt(text, startTag, start), endTag, end + startTag.length));
+        selectionRange.current = [start + startTag.length, end + startTag.length];
+    });
+
+    const quote = createAction(textareaRef, (start, end) => {
+        const lines = text.split("\n");
+        const newLines: string[] = [];
+        let charCount = 0;
+        let quoteEnd = 0;
+        let addedChars = 0;
+        for (const line of lines) {
+            charCount += line.length + 1; // Add "\n"
+            if (charCount > start && (charCount - line.length) <= end + 1) {
+                newLines.push(`> ${line}`);
+                addedChars += 2;
+                quoteEnd = charCount;
+            } else {
+                newLines.push(line);
+            }
+        }
+
+        setText(newLines.join("\n"));
+        selectionRange.current = [quoteEnd + addedChars - 1, quoteEnd + addedChars - 1];
+    });
+
+    const spoil = createAction(textareaRef, (start, end) => {
+        const startTag = "<spoil>";
+        const endTag = "</spoil>";
+
+        setText(insertAt(insertAt(text, startTag, start), endTag, end + startTag.length));
+        selectionRange.current = [start + startTag.length, end + startTag.length];
+    });
+
+    return (
+        <div>
+            <Alert lines={errors}/>
+            <Input
+                type="text"
+                icon={User}
+                value={user}
+                onChange={v => setUser(v as string)}
+                placeholder="Pseudo"
+            />
+            {
+                props.showTitle ? (
+                    <Input
+                        type="text"
+                        icon={Type}
+                        value={title}
+                        onChange={v => setTitle(v as string)}
+                        placeholder="Titre du sujet"
+                    />
+                ) : null
+            }
+            <div className={style.container}>
+                <div className={style.toolbar}>
+                    <div className={style.toolbarGroup}>
+                        <div className={style.buttonContainer} title="Gras" onMouseDown={bold}>
+                            <Bold size={iconSize}/>
+                        </div>
+                        <div className={style.buttonContainer} title="Italique" onMouseDown={italic}>
+                            <Italic size={iconSize}/>
+                        </div>
+                        <div className={style.buttonContainer} title="Souligné" onMouseDown={underline}>
+                            <Underline size={iconSize}/>
+                        </div>
+                    </div>
+                    <div className={style.toolbarGroup}>
+                        <div className={style.buttonContainer} title="Citation" onMouseDown={quote}>
+                            <ChevronRight size={iconSize}/>
+                        </div>
+                        <div className={style.buttonContainer} title="Spoil" onMouseDown={spoil}>
+                            <EyeOff size={iconSize}/>
+                        </div>
+                    </div>
+                    <div className={style.toolbarGroup}>
+                        <div
+                            className={style.buttonContainer}
+                            title="Smileys"
+                            onClick={() => {
+                                setAccordion(accordion ? false : "smileys")
+                            }}
+                        >
+                            <Smile size={iconSize}/>
+                        </div>
+                        <div className={style.buttonContainer} title="Stickers">
+                            <Image size={iconSize}/>
+                        </div>
+                    </div>
+                </div>
+                <div className={cn(style.accordion, {[style.accordionOpened]: accordion})}>
+                    <SmileyList
+                        text={text}
+                        setText={setText}
+                        textareaRef={textareaRef}
+                        selectionRange={selectionRange}
+                    />
+                </div>
+                <div className={style.editor}>
+                    <textarea
+                        className={style.textarea}
+                        placeholder="Saisissez un message…"
+                        name="wysiwyg"
+                        id="wysiwyg"
+                        cols="30"
+                        rows="10"
+                        value={text}
+                        onInput={(e) => setText((e.target as HTMLTextAreaElement).value)}
+                        ref={textareaRef} // Attach ref to textarea
+                    />
+                </div>
+            </div>
+            <div className={cn(style.container, style.previewContainer)}>
+                <Preview raw={text}/>
+            </div>
+            <Button
+                secondary={true}
+                onClick={() => {
+                    const errors: string[] = [];
+
+                    if(user.length < 2) {
+                        errors.push("Le pseudo doit se composer au minimum de 3 caractères");
+                    }
+
+                    if(user.match(/[^a-zA-Z0-9_-]/)) {
+                        errors.push("Le pseudo doit uniquement contenir les caractères suivant: a-z, A-Z, 0-9, _ et -");
+                    }
+
+                    if(props.showTitle && title.length < 2) {
+                        errors.push("Le titre du sujet doit se composer au minimum de 3 caractères");
+                    }
+
+                    if(text.length < 2) {
+                        errors.push("Le text du sujet doit se composer au minimum de 3 caractères");
+                    }
+
+                    setErrors(errors);
+
+                    if(errors.length > 0) {
+                        return;
+                    }
+
+                    props.onSubmit(user, title, text);
+                    setUser("");
+                    setTitle("");
+                    setText("");
+                }}
+                disabled={props.disabled}
+            >
+                Poster
+            </Button>
+        </div>
+    );
+}
+
+function SmileyList(props: {
+    text: string,
+    setText: (text: string) => void,
+    textareaRef: MutableRef<HTMLTextAreaElement | null>,
+    selectionRange: MutableRef<[start: number, end: number]|null>,
+}) {
+    // const addSmiley = createAction(props.textareaRef, (start, end) => {
+    //     const startTag = "<u>";
+    //     const endTag = "</u>";
+    //
+    //     props.setText(insertAt(insertAt(props.text, startTag, start), endTag, end + startTag.length));
+    //     props.selectionRange.current = [start + startTag.length, end + startTag.length];
+    // });
+
+    const addSmiley: (smiley: string) => JSX.MouseEventHandler<HTMLDivElement> = (smiley) => (e) => {
+        e.preventDefault(); // Do not lose the focus on textarea
+        if (props.textareaRef.current) {
+            props.setText(insertAt(props.text, smiley, props.textareaRef.current.selectionStart));
+            props.selectionRange.current = [props.textareaRef.current.selectionStart + smiley.length, props.textareaRef.current.selectionStart + smiley.length];
+            props.textareaRef.current.focus();
+        }
+    }
+
+    return (
+        <div className={style.smileyList}>
+            {smileysMap.map((smiley) => (
+                <div onMouseDown={addSmiley(` ${smiley[0]}`)}>
+                    <img
+                        src={`https://image.jeuxvideo.com/smileys_img/${smiley[1]}.gif`}
+                        alt={smiley[0]}
+                    />
+                </div>
+            ))}
+        </div>
+    )
+}
+
+function createAction(
+    ref: MutableRef<HTMLTextAreaElement | null>,
+    callback: (start: number, end: number) => void
+): JSX.MouseEventHandler<HTMLDivElement> {
+    return (e) => {
+        e.preventDefault(); // Do not lose the focus on textarea
+        if (ref.current) {
+            callback(ref.current.selectionStart, ref.current.selectionEnd);
+            ref.current.focus();
+        }
+    }
+}
+
+function insertAt(originalString: string, substring: string, position: number): string {
+    return originalString.slice(0, position) + substring + originalString.slice(position);
+}

src/components/wysiwyg/style.module.scss

@@ -0,0 +1,108 @@
+.container {
+  position: relative;
+  background: var(--bg-color-light);
+  border: 0.0625rem solid var(--input-border-color);
+  margin-bottom: 0.9375rem;
+  border-radius: 0.25rem;
+}
+
+.toolbar {
+  padding: 0.3125rem 0.3125rem 0;
+}
+
+.toolbarGroup {
+  border-radius: 0.25rem;
+  background: var(--bg-color-light);
+  border: 0.0625rem solid var(--input-border-color);
+  margin-bottom: 0.3125rem;
+  margin-right: 0.3125rem;
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+}
+
+.buttonContainer {
+  height: 1.5rem;
+  width: 1.5rem;
+  text-align: center;
+  color: var(--text-muted-color);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    color: var(--text-hover-secondary);
+  }
+
+  & > svg {
+    vertical-align: middle;
+  }
+}
+
+.accordion {
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-top: 0 solid var(--input-border-color);
+  height: 0;
+  transition: height 0.2s ease-in-out, border-top-width 0.2s ease-in-out;
+}
+
+.accordionOpened {
+  height: 150px;
+  border-top-width: 0.0625rem;
+}
+
+.editor {
+  background: var(--input-bg-color);
+  overflow: hidden;
+  border-top: 0.0625rem solid var(--input-border-color);
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
+}
+
+.textarea {
+  display: block;
+  width: 100%;
+  height: 12rem;
+  max-width: 100%;
+  min-width: 100%;
+  border: 0 solid rgba(0, 0, 0, 0);
+  padding: 0.625rem;
+  background-color: rgba(0, 0, 0, 0);
+  color: var(--input-text-color);
+  min-height: 5rem;
+  resize: vertical;
+
+  &::placeholder {
+    color: var(--input-placeholder-color);
+  }
+}
+
+.previewContainer {
+  min-height: 9.375rem;
+  word-wrap: break-word;
+  padding: 0.625rem;
+}
+
+.smileyList {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem;
+
+  div {
+    cursor: pointer;
+    width: 3rem;
+    height: 3rem;
+    //padding: 0.3125rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+  }
+
+  img {
+    display: inline-block;
+  }
+}

src/contexts/log.ts

@@ -0,0 +1,27 @@
+import {createContext} from "@/utils/context"
+
+export type LogAction = (text: string, newLine?: boolean) => void;
+
+const itemKey = "log";
+
+export const logCtx = createContext({
+    initialValue: () => {
+        const storedLog = localStorage.getItem(itemKey);
+        return storedLog || "";
+    },
+    controllers: (log: string, setLog) => ({
+        effect: () => {
+            localStorage.setItem(itemKey, log);
+        },
+        actions: {
+            log: ((text, newLine = true) => {
+                console.log(text);
+                const prefix = `[${new Date().toLocaleTimeString('en-US', {hour12: false})}] `;
+                setLog(log.length < 1 ? `${newLine ? prefix : ""}${text}` : `${log}${newLine ? `\n${prefix}` : ""}${text}`);
+            }) satisfies LogAction,
+            reset: () => {
+                setLog("")
+            },
+        },
+    })
+})

src/contexts/route.ts

@@ -0,0 +1,120 @@
+import {createContext} from "@/utils/context"
+import {Topic} from "@/contexts/topics";
+
+type Route = {
+    name: keyof typeof routes,
+    args: any[],
+    location: string,
+}
+
+const matchers: {[key: string]: (location: string) => any[] | null} = {};
+
+function constructRoute<A>(
+    name: keyof typeof routes,
+    generateLocation: (...args: A) => string,
+    matcher: (location: string) => A | null,
+): (...args: A) => Route {
+    matchers[name] = matcher;
+    return (...args) => ({
+        name,
+        args,
+        location: generateLocation(...args),
+    } satisfies Route);
+}
+
+export const routes = {
+    home: constructRoute(
+        "home",
+        (page: number) => {
+            // console.log(page)
+            if(page < 0) {
+                throw new Error("Page not found");
+            }
+            return page ? `/${page + 1}` : "/"
+        },
+        (location) => {
+            // console.log(location)
+            if(location === "/") {
+                return [0];
+            }
+            const match = location.match(/^\/(\d+)/);
+            // console.log([Math.max(parseInt(match[1]) - 1, 0)]);
+            return match ? [Math.max(parseInt(match[1]) - 1, 0)] : null;
+        },
+        // (location) => location === "/" ? [] : null,
+    ),
+    topic: constructRoute(
+        "topic",
+        (id: string, page: number) => `/topic/${id}/${page}`,
+        (location) => {
+            const match = location.match(/^\/topic\/(.+)\/(\d+)/);
+            return match ? [match[1], Math.max(parseInt(match[2]) - 1, 1)] : null;
+        },
+    ),
+    settings: constructRoute(
+        "settings",
+        () => "/settings",
+        (location) => location === "/settings" ? [] : null,
+    ),
+} as const satisfies {
+    [key: string]: (...args: any[]) => Route
+};
+
+function matchBrowserLocation(): Route {
+    for (const [name, matcher] of Object.entries(matchers)) {
+        const location = window.location.pathname + window.location.search;
+        const args = matcher(location);
+        if (args !== null) {
+            return routes[name as keyof typeof routes](...args);
+        }
+    }
+    return routes.home(0);
+}
+
+const history: Route[] = [];
+let historyIndex = 0;
+
+export const routeCtx = createContext({
+    initialValue: matchBrowserLocation,
+    controllers: (route: Route, setRoute) => ({
+        onMount: () => {
+            // console.log("add listener")
+            // Add initial route to history
+            history.push(route);
+            historyIndex = history.length - 1;
+            window.addEventListener('popstate', () => {
+                setRoute(matchBrowserLocation());
+            });
+        },
+        effect: () => {
+            const location = route.location;
+            if (location !== `${window.location.pathname}${window.location.search}`) {
+                history.push(route);
+                historyIndex = history.length - 1;
+                window.history.pushState({}, "", location);
+            }
+        },
+        actions: {
+            goBack: () => {
+                // console.log(history);
+                // console.log(historyIndex);
+                if (historyIndex > 0) {
+                    historyIndex--;
+                    setRoute(history[historyIndex]);
+                } else {
+                    setRoute(routes.home(0));
+                }
+            },
+            getHistoryIndex: () => historyIndex,
+            // goBack: (route: Route, setRoute) => {
+            //     if (historyIndex > 0) {
+            //         historyIndex--;
+            //
+            //     }
+            // }
+            // goForward: () => {
+            //     if (historyIndex < history.length - 1) {}
+            // }
+        }
+    })
+})

src/contexts/settings.ts

@@ -0,0 +1,41 @@
+import {createContext} from "@/utils/context"
+
+export type Settings = {
+    apiType: "ooba"|"beam";
+    apiURL: string;
+    apiKey: string;
+    temperature: number;
+    postCount: number;
+};
+
+const defaultSettings: Settings = {
+    apiType: "beam",
+    apiURL: "",
+    apiKey: "",
+    temperature: 0.9,
+    postCount: 3,
+}
+
+const itemKey = "settings";
+
+export const settingsCtx = createContext({
+    initialValue: () => {
+        const storedSettings = localStorage.getItem(itemKey);
+        if (storedSettings) {
+            return {...defaultSettings, ...JSON.parse(storedSettings)} as Settings;
+        }
+
+        return defaultSettings;
+    },
+    controllers: (settings: Settings, setSettings) => ({
+        effect: () => {
+            localStorage.setItem(itemKey, JSON.stringify(settings));
+        },
+        actions: {
+            reset: () => {
+                // localStorage.removeItem(itemKey);
+                setSettings(defaultSettings);
+            },
+        },
+    })
+})

src/contexts/topics.ts

@@ -0,0 +1,230 @@
+import {createContext} from "@/utils/context";
+import {generateUUID} from "@/utils/uuids";
+import {getCurrentTimeIso8601} from "@/utils/dates";
+import {useContext} from "preact/hooks";
+import {Settings} from "@/contexts/settings";
+import {feedPosts, feedTopic} from "@/utils/model";
+import {LogAction} from "@/contexts/log";
+
+export type Post = {
+    user: string;
+    date: string; // date from AI if generated by AI tokens, ISO 8601, YYYY-MM-DDTHH:MM:SS
+    generationDate: string | null; //"null" means not generated by AI, ISO 8601, YYYY-MM-DDTHH:MM:SS
+    content: string;
+}
+
+export type Topic = {
+    id: string; // UUID
+    title: string;
+    posts: Post[];
+}
+
+export type TopicsContext = {
+    generation: "done" | "pending" | "error";
+    import: "done" | "error";
+    topics: Topic[];
+}
+
+const itemKey = "topics";
+
+export const topicsCtx = createContext({
+    initialValue: () => {
+        const storedTopics = localStorage.getItem(itemKey);
+        return {
+            generation: "done",
+            import: "done",
+            topics: storedTopics ? JSON.parse(storedTopics) as Topic[] : []
+        } as TopicsContext;
+    },
+    controllers: (topicsContext: TopicsContext, setTopicsContext) => ({
+        effect: () => {
+            // console.log("**")
+            localStorage.setItem(itemKey, JSON.stringify(topicsContext.topics));
+        },
+        actions: {
+            reset: (): void => {
+                setTopicsContext({
+                    generation: "done",
+                    import: "done",
+                    topics: []
+                });
+            },
+            addTopic: (user: string, title: string, text: string): string => {
+                const id = generateUUID();
+                setTopicsContext({
+                    ...topicsContext,
+                    topics: [...topicsContext.topics, {
+                        id: id,
+                        title,
+                        posts: [{
+                            user: user,
+                            date: getCurrentTimeIso8601(),
+                            generationDate: null,
+                            content: text,
+                        }]
+                    }],
+                });
+                return id;
+            },
+            deleteTopic: (topicId: string): void => {
+                setTopicsContext({
+                    ...topicsContext,
+                    topics: topicsContext.topics.filter((topic) => topic.id !== topicId)
+                });
+            },
+            addPost: (topicId: string, user: string, text: string): void => {
+                const newPost: Post = {
+                    user: user,
+                    date: getCurrentTimeIso8601(),
+                    generationDate: null,
+                    content: text,
+                }
+                setTopicsContext({
+                    ...topicsContext,
+                    topics: topicsContext.topics.map((topic) => topic.id === topicId ? {
+                        ...topic,
+                        posts: [...topic.posts, newPost]
+                    } : topic)
+                });
+            },
+            deletePost: (topicId: string, postIndex: number): void => {
+                setTopicsContext({
+                    ...topicsContext,
+                    topics: topicsContext.topics.map((topic) => {
+                        if (topic.id !== topicId) {
+                            return topic;
+                        }
+
+                        // Delete all posts if the first is deleted
+                        const posts: Post[] = postIndex === 0 ? [] : topic.posts.filter((_, index) => index !== postIndex);
+
+                        return {
+                            ...topic,
+                            posts
+                        };
+                        // Delete topic if it has not more posts
+                    }).filter((t) => t.posts.length > 0)
+                });
+            },
+            generateTopic: async (settings: Settings, log: LogAction) => {
+                const id = generateUUID();
+                setTopicsContext({
+                    ...topicsContext,
+                    generation: "pending",
+                });
+                log(`Topic: ${id} -> generation start.`)
+                feedTopic(settings, log, id, (topic: Topic) => {
+                    if(topic.title.length < 1) return;
+
+                    setTopicsContext((topicsContext: TopicsContext) => {
+                        // console.log(topicsContext);
+                        const topicIndex = topicsContext.topics.findIndex((topic) => topic.id === id);
+
+                        // -1 if no topic found
+                        if(topicIndex < 0) {
+                            return {
+                                ...topicsContext,
+                                generation: "pending",
+                                topics: [...topicsContext.topics, topic]
+                            } satisfies TopicsContext
+                        }
+
+                        return {
+                            ...topicsContext,
+                            generation: "pending",
+                            // Replace the old topic with the new one
+                            topics: topicsContext.topics.map(oldTopic => oldTopic.id === id ? topic : oldTopic),
+                        } satisfies TopicsContext
+                    });
+                    // console.log("feedTopic");
+                }).then(() => {
+                    // console.log("then");
+                    // TODO: check if the topic has been generated
+                    setTopicsContext((topicsContext: TopicsContext) => ({
+                        ...topicsContext,
+                        generation: "done",
+                    }))
+                    log(`Topic: ${id} -> generation done.`)
+                }).catch((e: Error) => {
+                    setTopicsContext((topicsContext: TopicsContext) => ({
+                        ...topicsContext,
+                        generation: "error",
+                    }))
+                    log(`Topic: ${id} -> generation error (${e.message}).`)
+                });
+            },
+            generatePosts: async (settings: Settings, log: LogAction, initialTopic: Topic) => {
+                setTopicsContext({
+                    ...topicsContext,
+                    generation: "pending",
+                });
+                log(`Topic: ${initialTopic.id} -> generation start.`)
+                feedPosts(settings, log, initialTopic, (topic: Topic) => {
+                    setTopicsContext((topicsContext: TopicsContext) => {
+                        // console.log(topicsContext);
+                        const topicIndex = topicsContext.topics.findIndex((topic) => topic.id === initialTopic.id);
+
+                        // -1 if no topic found
+                        if(topicIndex < 0) {
+                            return {
+                                ...topicsContext,
+                                generation: "pending",
+                                topics: [...topicsContext.topics, topic]
+                            } satisfies TopicsContext
+                        }
+
+                        return {
+                            ...topicsContext,
+                            generation: "pending",
+                            // Replace the old topic with the new one
+                            topics: topicsContext.topics.map(oldTopic => oldTopic.id === initialTopic.id ? topic : oldTopic),
+                        } satisfies TopicsContext
+                    });
+                }).then(() => {
+                    setTopicsContext((topicsContext: TopicsContext) => ({
+                        ...topicsContext,
+                        generation: "done",
+                    }))
+                    log(`Topic: ${initialTopic.id} -> generation done.`)
+                }).catch((e: Error) => {
+                    setTopicsContext((topicsContext: TopicsContext) => ({
+                        ...topicsContext,
+                        generation: "error",
+                    }))
+                    log(`Topic: ${initialTopic.id} -> generation error (${e.message}).`)
+                });
+            },
+            importTopic: (json: string): void => {
+                const error = (message: string): void => {
+                    throw new Error(message)
+                }
+                try {
+                    const object = JSON.parse(json);
+                    const id = generateUUID();
+                    const topic: Topic = {
+                        id: id,
+                        title: typeof object.title == "string" ? object.title : error("title must be a string"),
+                        posts: object.posts instanceof Array ? object.posts.map((object: unknown): Post => ({
+                            user: typeof object.user == "string" ? object.user : error("posts.user must be a string"),
+                            date: typeof object.date == "string" ? object.date : error("posts.date must be a string"),
+                            generationDate: typeof object.generationDate == "string" || object.generationDate === null ? object.generationDate : error("posts.generationDate must be null or string"),
+                            content: typeof object.content == "string" ? object.content : error("posts.content must be a string"),
+                        })) : error("posts must be a string"),
+                    }
+                    setTopicsContext({
+                        ...topicsContext,
+                        topics: [...topicsContext.topics, topic],
+                        import: "done",
+                    });
+                } catch (e) {
+                    console.error(e);
+                    setTopicsContext({
+                        ...topicsContext,
+                        import: "error",
+                    });
+                }
+            }
+        },
+    })
+})
+

src/index.ts

@@ -1,4 +1,21 @@
-import {render, h} from "preact";
-import {App} from "./app";
+import {h, render} from "preact"
+import {App} from "./app"
+import {ContextsProvider} from "@/utils/context";
+import {routeCtx} from "@/contexts/route";
+import {settingsCtx} from "@/contexts/settings";
+import {topicsCtx} from "@/contexts/topics";
+import {logCtx} from "@/contexts/log";
 
-render(h(App, null), document.getElementById('app'))
+const container = document.getElementById('app');
+
+if (!container) throw new Error("Root element not found not found")
+
+// @ts-ignore
+render(h(ContextsProvider, {
+    contexts: [
+        routeCtx,
+        settingsCtx,
+        topicsCtx,
+        logCtx,
+    ]
+}, h(App, null)), container)

src/style.module.scss

@@ -9,5 +9,5 @@
 }
 
 .main {
-
+  padding-bottom: 0.9375rem;
 }

src/utils/beam.ts

@@ -0,0 +1,41 @@
+import {Settings} from "@/contexts/settings";
+import {LogAction} from "@/contexts/log";
+
+export async function* streamAPI(
+    prompt: string,
+    settings: Settings,
+    log: LogAction,
+): AsyncGenerator<string> {
+    log(`Fetching ${settings.postCount} posts from Beam API…`);
+    const response = await fetch(new URL(settings.apiURL), {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            "Accept": "text/event-stream",
+            "Authorization": `Bearer ${settings.apiKey}`
+        },
+        body: JSON.stringify({
+            "prompt": prompt,
+            "posts_count": settings.postCount,
+            "temperature": settings.temperature,
+        }),
+    });
+
+    if (!response.ok) {
+        const message = `Failed to fetch API (${response.status} ${response.statusText}): ${await response.text()}`;
+        log(message);
+        throw new Error(message);
+    }
+
+    log("Reading HTTP stream…");
+    try {
+        const decoder = new TextDecoder();
+        for await (const chunk of response.body) {
+            const text = decoder.decode(chunk, { stream: true });
+            yield text;
+        }
+        log("Stream reading completed.");
+    } catch(e) {
+        log("Error while reading the HTTP stream.")
+    }
+}

src/utils/context.ts

@@ -0,0 +1,93 @@
+import type {ComponentChildren} from "preact";
+import {Context, createContext as preactCreateContext, h, JSX} from "preact";
+import {Dispatch, StateUpdater, useEffect, useRef, useState} from "preact/hooks";
+
+// TODO: use a context in another context
+type Actions = {
+    [key: string]: (...rest: unknown[]) => unknown;
+};
+
+type Conf<T, A extends Actions = never> = {
+    initialValue: T | (() => T),
+    controllers?: (value: T, setValue: Dispatch<StateUpdater<T>>) => {
+        // It will only be called after the initial render
+        onMount?: () => void,
+
+        // It will only be called after the initial render and after re-renders with changed value
+        effect?: () => void,
+
+        actions?: A
+    },
+}
+
+type CustomContext<T, A> = Context<[
+    value: T,
+    setter: Dispatch<StateUpdater<T>>,
+    // actions: A extends Actions<T, ActionsMap> ? { [K in keyof A]: (...rest: ActionsMap[K][0]) => ActionsMap[K][1] } : never,
+    actions: A extends Actions ? A : never,
+    ...never[]
+]>;
+
+export function createContext<T, A>(conf: Conf<T, A>): CustomContext<T, A> {
+    return preactCreateContext(conf) as CustomContext<T, A>;
+}
+
+export function ContextsProvider(props: {
+    // contexts: Array<CustomContext<any, any, any>>,
+    contexts: Array<CustomContext<unknown, unknown>>,
+    children: ComponentChildren,
+}): JSX.Element | ComponentChildren {
+    let node: JSX.Element | ComponentChildren = props.children;
+
+    for (let i = props.contexts.length - 1; i >= 0; i--) {
+        const context = props.contexts[i];
+
+        if (!context || typeof context !== "object" || !("__" in context)) {
+            throw new Error("Invalid context provided. Ensure all contexts conform to CustomContext.");
+        }
+
+        const conf = context.__ as Conf<unknown, unknown>;
+
+        // WARNING: Hooks rules: Only Call Hooks at the Top Level
+        const state = useState(conf.initialValue);
+        let actions: Actions | undefined = undefined;
+
+        if (conf.controllers) {
+            // TODO: do not call the controller getter every time the state is changer
+            const controller = conf.controllers(state[0], state[1]);
+
+            if (controller.onMount) {
+                useEffect(() => {
+                    controller.onMount!();
+                }, [])
+            }
+
+            if (controller.effect) {
+                // Used to prevent infinite loop in case of setState called in effect
+                const effectRef = useRef(false);
+
+                useEffect(() => {
+                    if (effectRef.current) return;
+                    effectRef.current = true;
+                    controller.effect!();
+                    effectRef.current = false;
+                }, [state[0]])
+            }
+
+            // let actions: { [key: string]: (...args: unknown[]) => any } | undefined = undefined;
+
+            if (controller.actions) {
+                // actions = {};
+                // Object.entries(controller.actions as Actions).forEach(([key, func]) => {
+                //     (actions as object)[key] = func;
+                // });
+                actions = controller.actions as Actions;
+            }
+        }
+
+        // @ts-expect-error
+        node = h(context.Provider, {value: actions ? [...state, actions] : [...state]}, node)
+    }
+
+    return node;
+}

src/utils/dates.ts

@@ -1,7 +1,5 @@
 const iso8601ToFrenchRegex = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/;
 export function iso8601ToFrench(iso8601: string): string {
-    console.log("iso8601ToTokens", iso8601)
-
     const matches = iso8601.match(iso8601ToFrenchRegex);
 
     const year = matches[1];
@@ -16,15 +14,6 @@ export function iso8601ToFrench(iso8601: string): string {
 
 const frenchToIso8601Regex = /(\d{1,2}) ([a-zA-Z\u00C0-\u024F]+) (\d{4}) à (\d{2}):(\d{2}):(\d{2})/;
 export function frenchToIso8601(french: string): string {
-    console.log("tokensToIso8601", french)
-    // Match the components of the date and time from the input string
-
-    // const months = {
-    //     janvier: '01', février: '02', mars: '03', avril: '04', mai: '05',
-    //     juin: '06', juillet: '07', août: '08', septembre: '09',
-    //     octobre: '10', novembre: '11', décembre: '12'
-    // };
-
     const match = french.match(frenchToIso8601Regex);
 
     if (!match) {
@@ -48,4 +37,17 @@ export function frenchToIso8601(french: string): string {
 const months = [
     "janvier", "février", "mars", "avril", "mai", "juin",
     "juillet", "août", "septembre", "octobre", "novembre", "décembre"
-];
+];
+
+export function getCurrentTimeIso8601(): string {
+    const now = new Date();
+
+    const year = now.getFullYear().toString();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    const seconds = String(now.getSeconds()).padStart(2, '0');
+
+    return `${year}-${month}-${day}T${hours}:${minutes}:${seconds}`;
+}

src/utils/misc.ts

@@ -0,0 +1,26 @@
+// export function throttle(callback: () => void, wait: number): () => void {
+//     if (typeof function_ !== 'function') {
+//         throw new TypeError(`Expected the first argument to be a \`function\`, got \`${typeof function_}\`.`);
+//     }
+//
+//     let timeoutId;
+//     let lastCallTime = 0;
+//
+//     return function throttled(...arguments_) {
+//         clearTimeout(timeoutId);
+//
+//         const now = Date.now();
+//         const timeSinceLastCall = now - lastCallTime;
+//         const delayForNextCall = wait - timeSinceLastCall;
+//
+//         if (delayForNextCall <= 0) {
+//             lastCallTime = now;
+//             function_.apply(this, arguments_);
+//         } else {
+//             timeoutId = setTimeout(() => {
+//                 lastCallTime = Date.now();
+//                 function_.apply(this, arguments_);
+//             }, delayForNextCall);
+//         }
+//     };
+// }

src/utils/model.ts

@@ -1,16 +1,93 @@
-import {Post, Topic} from "./topics";
-import {iso8601ToFrench, frenchToIso8601} from "./dates"
-import {generateUUID} from "./uuids";
+import {throttle} from "throttle-debounce";
+import {Post, Topic} from "@/contexts/topics";
+import {iso8601ToFrench, frenchToIso8601, getCurrentTimeIso8601} from "./dates"
+import {Settings} from "@/contexts/settings";
+import {LogAction} from "@/contexts/log";
+import {streamAPI as beamStreamAPI} from "@/utils/beam";
 
-// const titleRegex = /Sujet\s+:\s+"([^"]+)"/;
 const titleRegex = /Sujet\s+:\s+"(.+?)"?<\|eot_id\|>/;
 const userRegex = /<\|im_pseudo\|>([^<]+)<\|end_pseudo\|>/;
 const dateRegex = /<\|im_date\|>([^<]+)<\|end_date\|>/;
 const contentRegex = /<\|begin_of_post\|>([\s\S]+)(?:<\|end_of_post\|>)?$/;
 
-export function tokensToTopic(tokens: string): Topic {
+export async function feedTopic(
+    settings: Settings,
+    log: LogAction,
+    topicId: string,
+    feed: (topic: Topic) => void
+): Promise<void> {
+    // console.log(settings);
+    let fetcher: (prompt: string, settings: Settings, log: LogAction) => AsyncGenerator<string>;
+
+    if (settings.apiType === "beam") {
+        fetcher = beamStreamAPI;
+    }
+
+    const throttledTokensToTopic = throttle(250, (buffer: string) => {
+        try {
+            // console.log("-");
+            feed(tokensToTopic(topicId, buffer));
+            // console.log("_");
+        } catch (e) {
+            // --
+        }
+    }, {noLeading: true, noTrailing: false, debounceMode: false});
+
+    let buffer = "";
+    for await (const tokens of fetcher("", settings, log)) {
+        // console.log(".");
+        buffer += tokens;
+        throttledTokensToTopic(buffer);
+    }
+
+    throttledTokensToTopic.cancel();
+
+    // console.log("loool")
+
+    feed(tokensToTopic(topicId, buffer));
+}
+
+export async function feedPosts(
+    settings: Settings,
+    log: LogAction,
+    topic: Topic,
+    feed: (topic: Topic) => void // topic with posts added
+): Promise<void> {
+    // TODO: to avoid too long context:
+    // If the topic exceed a certain amount of posts -> only take the 3 first post and the 3 last to generate the context
+    const context = tokenizeTopic(topic);
+
+    let fetcher: (prompt: string, settings: Settings, log: LogAction) => AsyncGenerator<string>;
+
+    if (settings.apiType === "beam") {
+        fetcher = beamStreamAPI;
+    }
+
+    const throttledTokensToTopic = throttle(250, (buffer: string) => {
+        try {
+            // console.log("-");
+            feed(tokensToTopic(topic.id, buffer));
+            // console.log("_");
+        } catch (e) {
+            // --
+        }
+    }, {noLeading: true, noTrailing: false, debounceMode: false});
+
+    let buffer = context;
+    for await (const tokens of fetcher(context, settings, log)) {
+        // console.log(".");
+        buffer += tokens;
+        throttledTokensToTopic(buffer);
+    }
+
+    throttledTokensToTopic.cancel();
+
+    feed(tokensToTopic(topic.id, buffer));
+}
+
+function tokensToTopic(id: string, tokens: string): Topic {
     const topic: Topic = {
-        id: generateUUID(),
+        id: id,
         title: "",
         posts: [],
     };
@@ -22,13 +99,14 @@ export function tokensToTopic(tokens: string): Topic {
     // Split token in posts
     // The last element is always vois, so remove it
     for(const postTokens of tokens.split("<|end_of_post|>").slice(0, -1)) {
-        console.log("Post tokens:")
-        console.log(postTokens);
+        // console.log("Post tokens:")
+        // console.log(postTokens);
 
         // If it's the first post
         if(topic.posts.length < 1) {
             const titleMatch = postTokens.match(titleRegex);
-            console.log(`title: ${titleMatch[1]}`)
+            if(!titleMatch) throw new Error("Impossible de trouver le titre du sujet");
+            // console.log(`title: ${titleMatch[1]}`)
 
             topic.title = titleMatch[1];
         }
@@ -40,7 +118,7 @@ export function tokensToTopic(tokens: string): Topic {
     return topic;
 }
 
-export function tokensToPosts(tokens: string): Post[] {
+function tokensToPosts(tokens: string): Post[] {
     const posts: Post[] = [];
 
     for(const postTokens of tokens.split("<|end_of_post|>")) {
@@ -50,21 +128,25 @@ export function tokensToPosts(tokens: string): Post[] {
             continue;
         }
 
-        console.log("Post tokens:")
-        console.log(postTokens);
+        // console.log("Post tokens:")
+        // console.log(postTokens);
 
         const userMatch = postTokens.match(userRegex);
-        console.log(`user: ${userMatch[1]}`)
+        if(!userMatch) throw new Error("Impossible de trouver le nom de l'auteur du message");
+        // console.log(`user: ${userMatch[1]}`)
 
         const dateMatch = postTokens.match(dateRegex);
-        console.log(`date: ${dateMatch[1]}`)
+        if(!dateMatch) throw new Error("Impossible de trouver la date du message");
+        // console.log(`date: ${dateMatch[1]}`)
 
         const contentMatch = postTokens.match(contentRegex);
-        console.log(`content: ${contentMatch[1]}`)
+        if(!contentMatch) throw new Error("Impossible de trouver le contenu du message");
+        // console.log(`content: ${contentMatch[1]}`)
 
         posts.push({
             user: userMatch[1],
             date: frenchToIso8601(dateMatch[1]),
+            generationDate: getCurrentTimeIso8601(),
             content: contentMatch[1],
         });
     }
@@ -73,7 +155,7 @@ export function tokensToPosts(tokens: string): Post[] {
 }
 
 
-export function tokenizeTopic(topic: Topic): string {
+function tokenizeTopic(topic: Topic): string {
     if (topic.posts.length === 0) {
         throw new Error("Topic must have at least one post")
     }
@@ -92,7 +174,7 @@ export function tokenizeTopic(topic: Topic): string {
     return lines.join("\n") + tokenizedPosts;
 }
 
-export function tokenizePost(post: Post, poster: string): string {
+function tokenizePost(post: Post, poster: string): string {
     let lines = [
         `<|eot_id|><|start_header_id|><|${post.user === poster ? "autheur" : "khey"}|>`,
         "<|end_header_id|>",

src/utils/oobabooga.ts

@@ -1,12 +1,6 @@
-import {Post, Topic} from "./topics";
-import {Settings} from "./settings";
-import {generateUUID} from "./uuids";
-import {tokenizeTopic, tokensToPosts, tokensToTopic} from "./model";
-// import {replaceSmileysInText} from "./smileys";
-//
-// try {
-//     console.log(replaceSmileysInText("lol"))
-// }catch(e) {}
+import {Post, Topic} from "@/contexts/topics";
+import {Settings} from "@/contexts/settings";
+import {LogAction} from "@/contexts/log";
 
 // @see https://github.com/openai/openai-node/blob/14784f95797d4d525dafecfd4ec9c7a133540da0/src/resources/chat/completions.ts
 type OobaboogaStreamChunk = {
@@ -29,19 +23,10 @@ type OobaboogaStreamChunk = {
     };
 };
 
-export async function generateTopic(settings: Settings, nPosts: number): Promise<Topic> {
-    console.log(settings);
-    const rawOutput = await fetApiWithStream(settings, "<|start_header_id|>", nPosts);
-    // const rawOutput = await fetApi(settings);
-    // console.log(rawOutput);
-    // let rawOutput = "rawOutput";
-
-    return tokensToTopic(rawOutput);
-}
-
-export async function generatePosts(settings: Settings, nPosts: number, topic: Topic): Promise<Post[]> {
+// TODO
+export async function generatePosts(settings: Settings, topic: Topic): Promise<Post[]> {
     // console.log(settings);
-    const rawOutput = await fetApiWithStream(settings, tokenizeTopic(topic), nPosts);
+    const rawOutput = await fetApiWithStream(settings, tokenizeTopic(topic));
     // const rawOutput = await fetApi(settings);
     // console.log(rawOutput);
     // let rawOutput = "rawOutput";
@@ -52,44 +37,12 @@ export async function generatePosts(settings: Settings, nPosts: number, topic: T
     return tokensToPosts(rawOutput);
 }
 
-
-
-
-async function fetApi(settings: Settings): Promise<string> {
-    const response = await fetch(new URL("/v1/completions", settings.apiURL), {
-        method: "POST",
-        headers: {
-            "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-            prompt: "<|start_header_id|>",
-            temperature: settings.temperature,
-            max_tokens: 1000,
-            stream: false,
-            skip_special_tokens: false,
-            stop: "<|end_of_post|>"
-            // top_p: 1,
-            // frequency_penalty: 0,
-            // presence_penalty: 0,
-        }),
-    });
-
-    if (response.status !== 200) {
-        throw new Error(`Failed to fetch API (${response.status}): ${response.statusText}`);
-    }
-
-    const json = await response.json();
-
-    console.log(json)
-
-    return json.choices[0].text;
-}
-
 const postEndToken = "<|end_of_post|>";
 
 // @see https://github.com/openai/openai-node/issues/18
 // nPosts: number of post before stop
-async function fetApiWithStream(settings: Settings, prompt: string, nPosts: number): Promise<string> {
+async function fetApiWithStream(settings: Settings, log: LogAction, prompt: string): Promise<string> {
+    const postCount = settings.postCount;
     const controller = new AbortController()
     const response = await fetch(new URL("/v1/completions", settings.apiURL), {
         method: "POST",
@@ -125,7 +78,7 @@ async function fetApiWithStream(settings: Settings, prompt: string, nPosts: numb
     //     }
     // });
 
-    console.log(`Fetching topic with ${nPosts} posts...`);
+    console.log(`Fetching topic with ${postCount} posts...`);
 
     let endTokenCount = 0;
     let tokens = ""; // Dont know why but the first token is skipped
@@ -144,7 +97,7 @@ async function fetApiWithStream(settings: Settings, prompt: string, nPosts: numb
                     if (text.includes(postEndToken)) {
                         endTokenCount++;
 
-                        if(endTokenCount >= nPosts) {
+                        if (endTokenCount >= postCount) {
                             finishReason = "custom_stop";
                             controller.abort();
                             break;

src/utils/route.ts

@@ -1,9 +0,0 @@
-export const routes = {
-    home: "home",
-    topic: "topic",
-    settings: "settings",
-} as const;
-
-export type Route = typeof routes[keyof typeof routes];
-
-export type RouteSetter = (route: Route, page?: number, id?: string) => void;

src/utils/settings.ts

@@ -1,30 +0,0 @@
-const itemKey = "settings";
-
-export type Settings = {
-    apiURL: string;
-    temperature: number;
-    postCount: number;
-}
-
-const defaultSettings: Settings = {
-    apiURL: "http://localhost:5000",
-    temperature: 0.9,
-    postCount: 3,
-}
-
-export function fetchSettings(): Settings {
-    const storedSettings = localStorage.getItem(itemKey);
-    if (storedSettings) {
-        return {...defaultSettings, ...JSON.parse(storedSettings)} as Settings;
-    } else {
-        return defaultSettings;
-    }
-}
-
-export function saveSettings(settings: Settings) {
-    localStorage.setItem(itemKey, JSON.stringify(settings));
-}
-
-export function resetSettings() {
-    localStorage.removeItem(itemKey);
-}

src/utils/topics.ts

@@ -1,135 +0,0 @@
-export type Post = {
-    user: string;
-    date: string; // ISO 8601, YYYY-MM-DDTHH:MM:SS
-    content: string;
-}
-
-export type Topic = {
-    id: string; // UUID
-    title: string;
-    posts: Post[];
-}
-
-const itemKey = "topics";
-
-export function loadTopics(): Topic[] {
-    const storedTopics = localStorage.getItem(itemKey);
-    if (storedTopics) {
-        return JSON.parse(storedTopics) as Topic[];
-    } else {
-        return [];
-    }
-}
-
-export function saveTopics(topics: Topic[]) {
-    localStorage.setItem(itemKey, JSON.stringify(topics));
-}
-
-
-const testTopics: Topic[] = [
-    {
-        id: "dbf575b3-fc93-47b8-8773-bd91692dc97c",
-        title: "Les néerlandais font tous 2m",
-        posts: [
-            {
-                user: "elegante12",
-                date: "2025-01-15T09:13:44",
-                content: "https://vocaroo.com/1cCsqH5ai8AW\nN'allais pas ma bas si vous faites pas mini 1m80 même les meufs sont dans les 1m75 minimum"
-            },
-            {
-                user: "Pajoad",
-                date: "2025-01-15T09:14:45",
-                content: "Je suis (oui c'est on EST notre taille) 1m73 et j'ai été à Amsterdam en 2022, j'ai eu l'impression d'avoir 10 ans"
-            },
-            {
-                user: "Qui-es-tu",
-                date: "2025-01-15T09:15:13",
-                content: "Un enfer sur terre quoi."
-            },
-        ]
-    },
-    {
-        id: "0dbfad91-c5b7-4e11-a41f-eae8162ddfa5",
-        title: "C'est normal qu'une fille pète au lit ?",
-        posts: [
-            {
-                user: "Muskis",
-                date: "2025-01-15T10:47:14",
-                content: "Quand on couche avec une fille c'est normal qu'elle pète au lit avant ou après l'amour en mode balécouilles que tu sois là ?"
-            },
-            {
-                user: "edreMaLeuPcvJ-4",
-                date: "2025-01-15T10:49:45",
-                content: "Non, les filles ne pètent pas.\nSi elle pète c'est qu'elle est trans :ok:"
-            },
-            {
-                user: "PereAttali",
-                date: "2025-01-15T10:49:37",
-                content: "Quand tu lui fous dans le fion et que ta queue est trop large c'est ce qui peut arriver (lié à la dilatation rapide)"
-            },
-            {
-                user: "Pajoad",
-                date: "2025-01-15T10:56:37",
-                content: "Ça a quelle odeur d'ailleurs un pet féminin ?"
-            },
-            {
-                user: "hypertendu",
-                date: "2025-01-15T10:58:15",
-                content: "Ça peut être un pet vaginal :("
-            },
-        ]
-    },
-    {
-        id: "816dbd52-3f8e-4e44-9b8a-fcc388485e9f",
-        title: "Ta cousine veut plaquer ses FEETS sur ton visage",
-        posts: [
-            {
-                user: "BanDef411",
-                date: "2025-01-15T10:42:00",
-                content: "Es-tu préparé face a l’odeur? :("
-            },
-            {
-                user: "McLoviin",
-                date: "2025-01-15T10:43:35",
-                content: "Etant donné qu'elle me fait bander comme un taureau depuis l'adolescence je suis son tapis, son fauteuil, tout est dispo pour elle."
-            },
-        ]
-    },
-    {
-        id: "e1504b59-3918-4ee6-bced-efcd3af3f278",
-        title: "[CDD] Je BAISE ta FEMME contre REMUNERATION",
-        posts: [
-            {
-                user: "LeFeetBossV3",
-                date: "2025-01-15T11:04:30",
-                content: "Vu qu'apparement tu sais pas la satisfaire, pour 500 balles je la baise vite fait https://image.noelshack.com/minis/2018/25/2/1529422413-risitaszoom.png\n\nElle ira mieux et votre couple sera sauvé https://image.noelshack.com/minis/2018/25/2/1529422413-risitaszoom.png"
-            },
-            {
-                user: "Platitude24",
-                date: "2025-01-15T11:05:51",
-                content: "Ma femme possède un pénis féminin et elle demande si elle peut te sodomiser ?"
-            },
-        ]
-    },
-    {
-        id: "e5c288db-45a0-43e0-aa37-df485da475e7",
-        title: "La policière au gros CUL de Marseille est devenu MILLIONNAIRE",
-        posts: [
-            {
-                user: "Samanthabagare3",
-                date: "2025-01-15T11:59:32",
-                content: "https://image.noelshack.com/fichiers/2025/03/3/1736938679-screenshot-2025-01-15-11-57-10-521-com-instagram-android-edit.jpg\nhttps://image.noelshack.com/minis/2025/03/3/1736938679-screenshot-2025-01-15-11-57-10-521-com-instagram-android-edit.png\nEntrepreneuriat\" = Mym + onlyfan https://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png\n\nFrom 500 abonnés to 232 000 grâce au buzz https://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png"
-            },
-            {
-                user: "Platitude24",
-                date: "2025-01-15T11:59:36",
-                content: "Comment ça peut être policière ça ? :("
-            },
-            {
-                user: "Samanthabagare3",
-                date: "2025-01-15T12:00:02",
-                content: "> Le 15 janvier 2025 à 11:59:36 :\n> Comment ça peut être policière ça ?\n\nAHI <spoil>loool</spoil> AHI\nShitholisation du pays https://image.noelshack.com/fichiers/2018/25/2/1529422413-risitaszoom.png"
-            },
-        ]
-    },
-];

tsconfig.json

@@ -6,14 +6,13 @@
 		"noEmit": true,
 		"allowJs": true,
 		"checkJs": true,
-
+		"strict": true,
 		/* Preact Config */
 		"jsx": "react-jsx",
 		"jsxImportSource": "preact",
 		"skipLibCheck": true,
 		"paths": {
-			"react": ["./node_modules/preact/compat/"],
-			"react-dom": ["./node_modules/preact/compat/"]
+			"@/*": ["./src/*"],
 		},
 		"allowSyntheticDefaultImports": true
 	},

vite.config.ts

@@ -13,6 +13,11 @@ export default defineConfig({
             prefreshEnabled: false
         })
     ],
+    resolve: {
+        alias: {
+            "@": "/src",
+        },
+    },
     build: {
         target: "es2022",
         minify: false,