makdown_chatbot

This commit is contained in:
Ladebeze66 2026-05-01 12:05:10 +02:00
parent 517eed915d
commit 5c4abb2118
3 changed files with 42 additions and 4 deletions

View File

@ -2,6 +2,8 @@
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { askAI } from "../utils/askAI";
/**
@ -18,6 +20,11 @@ import { askAI } from "../utils/askAI";
* info si réponse générale faute de contexte pertinent).
* - Timeout 45 s côté fetch (géré dans `askAI.js`) avec message éditorial.
*
* v3.2 (2026-04-26) :
* - Réponses bot rendues en Markdown (`ReactMarkdown` + `remark-gfm`) : gras,
* listes, liens cliquables. Texte justifié dans la bulle. Les messages
* utilisateur restent en texte brut.
*
* Design :
* - Fond `surface-container-lowest/95 backdrop-blur-vellum rounded-sheet shadow-ambient`.
* - Bulles : user = `bg-primary text-white` à droite, bot = `bg-surface-container` à gauche.
@ -141,8 +148,38 @@ export default function ChatBot({ onClose }) {
}
return (
<div key={index} className="mr-auto flex max-w-[85%] flex-col gap-1.5">
<div className="rounded-sheet bg-surface-container px-3 py-2 font-headline text-xs leading-relaxed text-on-surface">
<div
className="rounded-sheet bg-surface-container px-3 py-2 text-on-surface [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
className="prose prose-sm max-w-none text-justify font-body text-xs leading-relaxed text-on-surface
prose-p:my-2 prose-p:text-xs prose-p:leading-relaxed
prose-strong:font-semibold prose-strong:text-on-surface
prose-ul:my-2 prose-ol:my-2 prose-li:my-0.5 prose-li:text-xs
prose-a:break-words prose-a:text-primary prose-a:no-underline hover:prose-a:underline
prose-headings:font-headline prose-headings:text-sm prose-headings:text-on-surface prose-headings:my-2
prose-code:rounded prose-code:bg-surface-container-low prose-code:px-1 prose-code:text-[11px]
prose-pre:my-2 prose-pre:bg-surface-container-low prose-pre:text-[11px]"
components={{
a({ href, children, ...props }) {
const external =
typeof href === "string" && /^https?:\/\//i.test(href);
return (
<a
href={href}
{...props}
target={external ? "_blank" : undefined}
rel={external ? "noopener noreferrer" : undefined}
>
{children}
</a>
);
},
}}
>
{msg.text}
</ReactMarkdown>
</div>
{(msg.sources?.length > 0 || msg.grounded !== undefined) && !msg.error && !msg.timeout && (
<BotFooter sources={msg.sources} grounded={msg.grounded} />

View File

@ -593,13 +593,14 @@ Ton rôle :
Règles de ton :
- Réponds en français, ton sobre et précis, sans emojis.
- Cite tes sources entre crochets carrés en utilisant le slug (ex. [push-swap], [ia]).
- N'inclus **pas** de références entre crochets du type `[slug-de-la-note]` dans ta réponse : l'interface liste déjà les fiches du vault sous le message (liens cliquables). Tu peux nommer un projet ou une compétence dans la phrase si utile, sans notation `[slug]`.
- Pour les **liens externes** (site personnel, GitHub, LinkedIn, etc.), utilise le Markdown `[libellé court](url)`. Ne répète pas l'URL en texte brut après le lien. Les listes à puces conviennent pour les coordonnées (téléphone, email, adresse).
- Reste concis (3 à 6 phrases en général), sauf demande explicite de détail.
- Si la question est hors sujet (ex. question généraliste sans rapport avec Fernand), indique poliment ton rôle et invite à poser une question sur son parcours.
Règles de fidélité aux sources (important) :
- Chaque source fournie est annotée `type=parcours | projet | moc | competence | glossaire`.
- Pour toute question biographique (qui est Fernand, âge, situation, école, objectif, contact, localisation), appuie-toi **en priorité** sur les sources de `type=parcours` (ex. [bio-fernand], [cv-grascalvet-fernand]). Ne **déduis jamais** d'informations biographiques depuis une source `type=projet` ou `type=moc`.
- Pour toute question biographique (qui est Fernand, âge, situation, école, objectif, contact, localisation), appuie-toi **en priorité** sur les sources de `type=parcours` visibles dans le contexte (bio, CV). Ne **déduis jamais** d'informations biographiques depuis une source `type=projet` ou `type=moc`.
- Ne **jamais inventer** un fait factuel (âge, date, diplôme, école, entreprise, technologie utilisée) qui n'apparaît pas littéralement dans les sources. Si l'info n'est pas présente, écris « non précisé dans les notes » et oriente vers /portfolio, /competences ou /contact.
- En cas de contradiction entre deux sources, privilégie la source de plus haut score, mentionne brièvement la divergence, et ne choisis jamais une valeur absente des deux.
- Une note dont le body se termine par « note tronquée » a été résumée : signale-le si tu t'appuies dessus pour un point précis, ou invite à consulter la note complète."""

View File

@ -1,60 +1,68 @@
Gras-Calvet Fernand
Etudiant Informatique /
Recherche alternance Data-IA
04/11/1978he
Étudiant Informatique Recherche
alternance Data / IA
(Automatisation & LLM)
Expérience pro
Ostréiculture 1999-2012
Etudiant Ecole 42 / Stage 2023- 2025
Présentation Pendant plus de 12 ans, jai travaillé dans lostréiculture à Leucate,
assurant la gestion complète de lentreprise familiale (Port-Leucate).
Ancien infirmier de 46 ans, actuellement
étudiant en informatique à lÉcole 42 Infirmier 2014-2023
Perpignan, je recherche une alternance de
2 ans pour me spécialiser dans Suite à une reconversion professionnelle, jai exercé la profession
lautomatisation agentique au sein des
entreprises, en y apportant mon dinfirmier pendant près de 10 ans. Dernier poste clinique Supervaltech
expérience sur le traitement de Data et les
nouveaux process basés sur les LLM. Mon à St Estève en gériatrie de 2018-2023.
parcours atypique reflète ma capacité
dadaptation, ma rigueur et mon esprit Etudiant Ecole 42 2023- 2025
déquipe.
Après des problèmes de santé, bénéficiant dune RQTH, jai entamé une
Contact
nouvelle reconversion professionnelle dans le domaine de
06.12.01.01.72
grascalvet.fernand@gmail.com linformatique. Durant cette période jai validé le tronc commun de
fernandgrascalvet.com
https://github.com/Ladebeze66 lécole. Réalisant un stage dans un entreprise logiciel métier spécialisée
13 rue de Belfort 66600 dans le béton. Lobjectif du stage étant basé sur lélaboration dun
Présentation nouvelle reconversion professionnelle dans le domaine de
Rivesaltes chatbot, multi-agent, automatisation (interfaçage) entre les différents
Expérience outils de lentreprise (support, commercial, CRM ...).
Ancien infirmier en reconversion vers linformatique. Lors de mon stage en entreprise logicielle spécialisée
lingénierie informatique et lintelligence
artificielle, je me spécialise aujourdhui dans dans le béton, jai conçu une architecture de chatbot multi-agent
la conception de systèmes basés sur des
LLM, lautomatisation de processus métier intégrant analyse de tickets support, traitement dimages techniques
et le traitement de données techniques.
Mon parcours atypique mapporte rigueur, et pipeline RAG.
adaptabilité et une forte capacité
dapprentissage autonome. Infirmier 2014-2023
Contact Suite à une reconversion professionnelle, jai exercé la profession
dinfirmier pendant près de 10 ans. Dernier poste clinique Supervaltech
06.12.01.01.72 à St Estève en gériatrie de 2018-2023.
grascalvet.fernand@gmail.com
Ostréiculture 1999-2012
https://fernandgrascalvet.com
https://github.com/Ladebeze66 Pendant plus de 12 ans, jai travaillé dans lostréiculture à Leucate,
assurant la gestion complète de lentreprise familiale (Port-Leucate).
13 rue de Belfort 66600 Rivesaltes
Objectifs Alternance
Mes objectifs de stage sont dapprofondir mon expertise en
programmation, tout en renforçant mes compétences en travail
collaboratif et en gestion de projet. Je souhaite également maîtriser
des outils et technologies avancés afin dapporter une réelle valeur
ajoutée aux équipes avec lesquelles je travaillerai.
Intérêts techniques et ambitions
professionnelles
Python, PHP, HTML, C, C++ Passionné dinformatique depuis mon plus jeune âge, jai suivi
Windows, Linux, VM, Server , Shell ... lévolution des générations de PC et acquis une solide expertise en
Docker assemblage, maintenance et dépannage matériel.
Ollama, LLMs , VLMs open-source, API Également passionné par limpression 3D, je possède plusieurs
LangChain, Serveurs MCP ... machines et maîtrise des logiciels spécialisés tels que Fusion 360, ainsi
que des slicers (PrusaSlicer, Orca) et firmwares (Klipper, Marlin).
Hardware informatique, Impression 3d En parallèle, jai des notions en domotique, un domaine que jaimerais
approfondir. Enfin, je mintéresse particulièrement à lintelligence
Language artificielle, dans laquelle je souhaite me spécialiser après mon stage à
lÉcole 42.
Anglais
Espagnol
Compétences techniques
Intégrer une alternance de 2 ans orientée Data / IA appliquée afin de
Python, PHP, HTML, C, C++ concevoir des outils intelligents pour lautomatisation des processus
bases Node.js / FastAPI métier :
Next, Strapi
Windows, Linux, VM, Git agents IA et workflows LLM
Server , Shell, Docker analyse documentaire et RAG
Architecture serveur et self-hosting IA interfaçage avec systèmes existants (CRM, support, ERP)
Ollama, LLMs , VLMs open-source, API
LangChain, MCP Servers Projets personnels et environnement
Ragflow technique
Obsidian
Hardware Passionné dinformatique et dinnovation technologique, je développe
Impression 3D un environnement personnel orienté intelligence artificielle,
automatisation et auto-hébergement. Je conçois et maintiens mes
Language propres infrastructures (serveurs Windows/Linux, virtualisation,
services cloud personnels, dépôt Git auto-hébergé, observabilité avec
Anglais Langfuse, expérimentation doutils IA comme Searxng, Firecrawl et
Espagnol Ollama).
Jexplore activement les architectures RAG, en combinant LLM open-
source, bases vectorielles et pipelines documentaires afin daméliorer
la recherche dinformation et lanalyse technique.
Jutilise également Obsidian comme un environnement de gestion de
connaissances moderne et évolutif. Au-delà de la simple prise de notes,
il me permet de structurer, relier et tracer linformation technique dans
le temps. Couplé à des LLM et à des bases vectorielles, cet outil devient
un véritable support dingénierie personnelle.
En parallèle, je pratique limpression 3D (Fusion 360, PrusaSlicer, Orca,
Klipper, Marlin), ce qui renforce mon approche concrète de la
conception et du prototypage technique.