feat(docs): improve chat example

docs/astro.config.ts

@@ -1,4 +1,5 @@
 import starlight from '@astrojs/starlight'
+import tailwind from '@astrojs/tailwind'
 import markdown from '@astropub/md'
 // @ts-check
 import { defineConfig } from 'astro/config'
@@ -33,6 +34,7 @@ export default defineConfig({
       },
       title: '@moeru-ai/hub',
     }),
+    tailwind(),
   ],
   markdown: { smartypants: false },
 })

docs/package.json

@@ -17,11 +17,15 @@
     "typescript": "^5.6.3"
   },
   "devDependencies": {
+    "@astrojs/tailwind": "^5.1.2",
     "@astropub/md": "^1.0.0",
+    "@catppuccin/daisyui": "^1.2.1",
     "@moeru-ai/ccc": "workspace:^",
     "@moeru-ai/characters-derivative": "workspace:^",
     "@moeru-ai/characters-existing": "workspace:^",
+    "daisyui": "^4.12.14",
     "starlight-sidebar-topics-dropdown": "^0.2.1",
-    "starlight-theme-catppuccin": "^1.0.3"
+    "starlight-theme-catppuccin": "^1.0.3",
+    "tailwindcss": "^3.4.15"
   }
 }

docs/src/components/chara.astro

@@ -3,6 +3,9 @@ import { type Card, exportToJSON } from '@moeru-ai/ccc'
 import { Markdown } from '@astropub/md'
 import { Code, Tabs, TabItem } from '@astrojs/starlight/components'
 
+import FirstMes from './first-mes.astro'
+import MessageExample from './message-example.astro'
+
 interface Props {
   character: string
   json: Card
@@ -19,15 +22,15 @@ const card = exportToJSON(json)
 
 <Tabs>
   {json.description && <TabItem label="Description"><Markdown of={json.description} /></TabItem>}
-  {card.data.first_mes && <TabItem label="First Message"><Markdown of={card.data.first_mes} /></TabItem>}
+  {card.data.first_mes && <TabItem label="First Message"><FirstMes {json} /></TabItem>}
   {card.data.alternate_greetings.length > 0 && <TabItem label="Alternate Greetings"><Markdown of={card.data.alternate_greetings.join('\n\n---\n\n')} /></TabItem>}
-  {json.messageExample && <TabItem label="Example Messages"><Markdown of={json.messageExample.map(arr => arr.join('\n\n')).join('\n\n---\n\n')} /></TabItem>}
+  {json.messageExample && <TabItem label="Example Messages"><MessageExample {json} /></TabItem>}
   {/* TODO: personality, character_book, system_prompt */}
 </Tabs>
 
 <Markdown.Inline of="## Raw" />
 
 <details>
-  <summary>{character}.json</summary>
+  <summary>{character}.json (length: {JSON.stringify(card).length})</summary>
   <Code code={JSON.stringify(card, null, 2)} lang="json" />
-</details>
+</details>

docs/src/components/first-mes.astro

@@ -0,0 +1,13 @@
+---
+import type { Card } from '@moeru-ai/ccc'
+
+interface Props {
+  json: Card
+}
+
+const { json } = Astro.props
+---
+
+<div class="chat chat-start">
+    <div class="chat-bubble">{json.greetings![0]}</div>
+</div>

docs/src/components/message-example.astro

@@ -0,0 +1,20 @@
+---
+import type { Card } from '@moeru-ai/ccc'
+
+interface Props {
+  json: Card
+}
+
+const { json } = Astro.props
+---
+
+{json.messageExample!.map(chats => 
+    chats.map(chat => {
+        const isChar = chat.startsWith('{{char}}: ')
+        const message = chat.slice(10)
+
+        return (<div class={`chat ${isChar ? 'chat-start' : 'chat-end'}`}>
+            <div class={`chat-bubble ${!isChar && 'chat-bubble-accent'}`}>{message}</div>
+        </div>)
+    })
+).reduce((prev, curr) => [prev, (<div class="divider"></div>), curr])}

docs/tailwind.config.ts

@@ -0,0 +1,20 @@
+import type { Config } from 'tailwindcss'
+
+import catppuccin from '@catppuccin/daisyui'
+import daisyui, { type CustomTheme } from 'daisyui'
+
+const renameTheme = (theme: CustomTheme, name: string) => Object.fromEntries(Object.entries(theme)
+  .map(([, value]) => [name, value]))
+
+export default {
+  /** @see {@link https://docs.astro.build/en/guides/integrations-guide/tailwind/#manual-install} */
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  daisyui: {
+    logs: false,
+    themes: [
+      renameTheme(catppuccin('latte', 'teal'), 'light'), // light
+      renameTheme(catppuccin('macchiato', 'green'), 'dark'), // dark
+    ],
+  },
+  plugins: [daisyui],
+} satisfies Config