diff --git a/components/Header.tsx b/components/Header.tsx
index 137fffe..6cd519c 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -2,6 +2,7 @@ import { asset } from '$fresh/runtime.ts'
import SearchBox from '../islands/SearchBox.tsx'
import ThemePicker from '../islands/ThemePicker.tsx'
import MoreBox from '../islands/MoreBox.tsx'
+import AiChatBox from '../islands/AiChatBox.tsx'
export function Header() {
return (
@@ -69,9 +70,7 @@ export function Header() {
-
+
diff --git a/deno.json b/deno.json
index 0a01468..249d640 100644
--- a/deno.json
+++ b/deno.json
@@ -35,10 +35,11 @@
"$std/": "https://deno.land/std@0.208.0/",
"univoq": "https://deno.land/x/univoq@0.2.0/mod.ts",
"@univoq/": "https://deno.land/x/univoq@0.2.0/",
- "css_bundler": "../../../github.com/JOTSR/fresh_css_bundler/plugin.ts"
+ "css_bundler": "../../../github.com/JOTSR/fresh_css_bundler/plugin.ts",
+ "gfm": "https://deno.land/x/gfm@0.6.0/mod.ts"
},
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "preact"
}
-}
+}
\ No newline at end of file
diff --git a/fresh.gen.ts b/fresh.gen.ts
index d418b56..b2df20c 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -4,37 +4,45 @@
import * as $_404 from './routes/_404.tsx'
import * as $_app from './routes/_app.tsx'
-import * as $contacts_index from './routes/contacts/index.tsx'
-import * as $equipes_id_ from './routes/equipes/[id].tsx'
-import * as $equipes_index from './routes/equipes/index.tsx'
-import * as $faq_index from './routes/faq/index.tsx'
+import * as $blog_id_ from './routes/blog/[id].tsx'
+import * as $blog_index from './routes/blog/index.tsx'
import * as $index from './routes/index.tsx'
import * as $machines_id_ from './routes/machines/[id].tsx'
import * as $machines_index from './routes/machines/index.tsx'
+import * as $membres_id_ from './routes/membres/[id].tsx'
+import * as $membres_index from './routes/membres/index.tsx'
import * as $profil_admin from './routes/profil/admin.tsx'
import * as $profil_index from './routes/profil/index.tsx'
import * as $projets_id_ from './routes/projets/[id].tsx'
import * as $projets_index from './routes/projets/index.tsx'
-
+import * as $AiChatBox from './islands/AiChatBox.tsx'
+import * as $MoreBox from './islands/MoreBox.tsx'
+import * as $SearchBox from './islands/SearchBox.tsx'
+import * as $ThemePicker from './islands/ThemePicker.tsx'
import { type Manifest } from '$fresh/server.ts'
const manifest = {
routes: {
'./routes/_404.tsx': $_404,
'./routes/_app.tsx': $_app,
- './routes/contacts/index.tsx': $contacts_index,
- './routes/equipes/[id].tsx': $equipes_id_,
- './routes/equipes/index.tsx': $equipes_index,
- './routes/faq/index.tsx': $faq_index,
+ './routes/blog/[id].tsx': $blog_id_,
+ './routes/blog/index.tsx': $blog_index,
'./routes/index.tsx': $index,
'./routes/machines/[id].tsx': $machines_id_,
'./routes/machines/index.tsx': $machines_index,
+ './routes/membres/[id].tsx': $membres_id_,
+ './routes/membres/index.tsx': $membres_index,
'./routes/profil/admin.tsx': $profil_admin,
'./routes/profil/index.tsx': $profil_index,
'./routes/projets/[id].tsx': $projets_id_,
'./routes/projets/index.tsx': $projets_index,
},
- islands: {},
+ islands: {
+ './islands/AiChatBox.tsx': $AiChatBox,
+ './islands/MoreBox.tsx': $MoreBox,
+ './islands/SearchBox.tsx': $SearchBox,
+ './islands/ThemePicker.tsx': $ThemePicker,
+ },
baseUrl: import.meta.url,
} satisfies Manifest
diff --git a/islands/AiChatBox.css b/islands/AiChatBox.css
new file mode 100644
index 0000000..4791313
--- /dev/null
+++ b/islands/AiChatBox.css
@@ -0,0 +1,64 @@
+.islands__ai_chat_box__button {
+ color: var(--_font-color);
+ border: var(--_border-size) solid transparent;
+ outline: none;
+ background-color: transparent;
+
+ &:active,
+ &:focus-visible {
+ border-color: currentColor;
+ }
+}
+
+.islands__ai_chat_box__dialog {
+ justify-content: center;
+ align-content: end;
+ width: 80%;
+ height: 80%;
+ border: var(--_border-size) solid currentColor;
+ background: var(--_background-image) repeat top left / 800px;
+ background-color: var(--_background-color);
+
+ &[open] {
+ display: grid;
+ }
+}
+
+.islands__ai_chat_box__dialog__content {
+ overflow-y: scroll;
+ display: grid;
+ align-content: end;
+ gap: var(--_gap);
+ max-height: 100%;
+ overscroll-behavior: contain;
+
+ & div {
+ display: block;
+ }
+}
+
+.islands__ai_chat_box__history__user {
+ justify-self: right;
+}
+
+.islands__ai_chat_box__history__bot {
+ justify-self: left;
+}
+
+.islands__ai_chat_box__dialog__form {
+ display: flex;
+ gap: var(--_gap);
+ color: var(--_font-color);
+
+ & > * {
+ background-color: var(--_translucent);
+ outline: none;
+ padding: var(--_gap-half);
+ border: var(--_border-size) solid transparent;
+ }
+
+ & > *:active,
+ & > *:focus-visible {
+ border-color: currentColor;
+ }
+}
diff --git a/islands/AiChatBox.tsx b/islands/AiChatBox.tsx
new file mode 100644
index 0000000..0cff435
--- /dev/null
+++ b/islands/AiChatBox.tsx
@@ -0,0 +1,176 @@
+import { Signal, signal, useSignal } from '@preact/signals'
+import { useEffect, useRef } from 'preact/hooks'
+import { JSX } from 'preact'
+import { JsonParseStream } from '$std/json/mod.ts'
+import { CSS, render as renderMd } from 'gfm'
+
+const systemHistory = signal([{
+ role: 'system',
+ content:
+ `Tu es un assistant spécialisé dans l'open source qui s'appel Coh@bot. Tu répond en français avec des réponse courtes. Tu aide les usagers du Fablab nommé Cohabit en leur proposant des solutions techniques appropriées en français. Tu formule des réponses courtes et précises en français et en markdown si besoin.`,
+}])
+
+const currentReader = signal | null>(
+ null,
+)
+let currentResponse: string[] = []
+
+function MdCell({ children }: { children: Signal }) {
+ return (
+
+
+ )
+}
+
+type BotMessage = {
+ role: string
+ content: string
+}
+
+type BotResponse = {
+ model: string
+ created_at: string
+ message: {
+ role: 'assistant' | 'user' | 'system'
+ content: string
+ images?: string
+ }
+ done: boolean
+}
+
+async function aiRequest(
+ { model, messages, stream }: {
+ model: string
+ messages: BotMessage[]
+ stream: boolean
+ },
+) {
+ systemHistory.value = [...systemHistory.peek(), ...messages]
+
+ const body = JSON.stringify({
+ model,
+ messages: systemHistory,
+ stream,
+ })
+
+ console.log('send', JSON.parse(body))
+
+ const response = await fetch('http://localhost:11434/api/chat', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json; charset=utf-8',
+ },
+ body,
+ })
+
+ if (response.ok) {
+ return response.body?.pipeThrough(new TextDecoderStream()).pipeThrough(
+ new JsonParseStream(),
+ ) as ReadableStream ?? new ReadableStream()
+ }
+
+ throw new Error(response.statusText)
+}
+
+export default function AiChatBox() {
+ const dialog = useRef(null)
+ const form = useRef(null)
+ const history = useSignal([])
+
+ useEffect(() => {
+ dialog.current?.addEventListener('click', (event) => {
+ if (event.target === dialog.current) {
+ dialog.current?.close()
+ }
+ })
+
+ form.current?.addEventListener(
+ 'submit',
+ (event) => chatListener(event, history),
+ )
+ }, [])
+
+ return (
+ <>
+
+
+
+
+ )
+}
+
+async function chatListener(event: Event, history: Signal) {
+ event.preventDefault()
+ const form = event.target as HTMLFormElement
+
+ const query = new FormData(form).get(
+ 'query',
+ ) as string
+
+ form.reset()
+
+ const userEntry = (
+ {query}
+ )
+
+ const botMessage = signal('')
+
+ const botEntry = (
+
+ {botMessage}
+
+ )
+
+ history.value = [...history.peek(), userEntry, botEntry]
+
+ if (currentResponse.length !== 0) {
+ systemHistory.value = [...systemHistory.peek(), {
+ role: 'assistant',
+ content: currentResponse.join(''),
+ }]
+ currentResponse = []
+ }
+ await currentReader.value?.cancel()
+
+ const response = await aiRequest({
+ model: 'mistral',
+ messages: [{
+ role: 'user',
+ content: query,
+ }],
+ stream: true,
+ })
+
+ const reader = response.getReader()
+ currentReader.value = reader
+
+ while (true) {
+ const { value, done } = await reader.read()
+ currentResponse.push(value?.message.content ?? '')
+ if (done) break
+ console.log(value.message.content)
+ botMessage.value = `${botMessage.peek()}${value.message.content}`
+ }
+}
diff --git a/src/stylesheets/components.css b/src/stylesheets/components.css
index 6d67cd1..957bdae 100644
--- a/src/stylesheets/components.css
+++ b/src/stylesheets/components.css
@@ -11,3 +11,4 @@
@import url('../../islands/ThemePicker.css');
@import url('../../islands/SearchBox.css');
@import url('../../islands/MoreBox.css');
+@import url('../../islands/AiChatBox.css');