| Filename | Latest commit message | Latest commit date |
|---|---|---|
0681a435b0
```
❯ gemini
███ █████████ ██████████ ██████ ██████ █████ ██████ █████ █████
░░░███ ███░░░░░███░░███░░░░░█░░██████ ██████ ░░███ ░░██████ ░░███ ░░███
░░░███ ███ ░░░ ░███ █ ░ ░███░█████░███ ░███ ░███░███ ░███ ░███
░░░███ ░███ ░██████ ░███░░███ ░███ ░███ ░███░░███░███ ░███
███░ ░███ █████ ░███░░█ ░███ ░░░ ░███ ░███ ░███ ░░██████ ░███
███░ ░░███ ░░███ ░███ ░ █ ░███ ░███ ░███ ░███ ░░█████ ░███
███░ ░░█████████ ██████████ █████ █████ █████ █████ ░░█████ █████
░░░ ░░░░░░░░░ ░░░░░░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░
Tips for getting started:
1. Ask questions, edit files, or run commands.
2. Be specific for the best results.
3. Create GEMINI.md files to customize your interactions with Gemini.
4. /help for more information.
> When the assistant responds with a longer message including markdown markup, the UI renders it out but it ends up looking too spaced out. Can you investigate what library we're using
to render the mark down and whether it's possible to tweak the visual spacing to keep things a little bit tighter. I'm thinking in particular headings and lists as well as the overall
line height is a touch too big.
✦ Of course. I'll investigate the markdown rendering and propose changes to tighten up the spacing. First, I'll check the project's dependencies to identify the markdown library being
used.
╭───────────────────────────╮
│ ✔ ReadFile package.json │
╰───────────────────────────╯
✦ react-markdown is being used. Spacing is likely controlled by the @tailwindcss/typography plugin. I'll find where react-markdown is used to see how to adjust the styles.
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ SearchText 'react-markdown' within src │
│ │
│ Found 2 matche(s) │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ The search results indicate that react-markdown is used in AssistantMessage.tsx and ChatMessage.tsx. I'll examine AssistantMessage.tsx to see how the typography styles are applied.
╭────────────────────────────────────────────────╮
│ ✔ ReadFile src/messages/AssistantMessage.tsx │
╰────────────────────────────────────────────────╯
✦ The prose and prose-zinc classes from @tailwindcss/typography are being used. I'll now inspect the tailwind.config.js file to see how the typography plugin is configured. This will
help me determine the best way to override the default spacing.
╭─────────────────────────────────╮
│ ✔ ReadFile tailwind.config.js │
╰─────────────────────────────────╯
✦ The tailwind.config.js file has some basic overrides, but nothing that affects the spacing of headings or lists. I can add some CSS to the typography configuration to reduce the
margins on headings and lists.
Here's the plan:
1. I'll modify the tailwind.config.js to add custom CSS to the typography plugin that reduces the top and bottom margins for headings (h1, h2, h3) and lists (ul, ol).
2. I'll also reduce the line-height of the prose.
I'll start by modifying the tailwind.config.js file.
╭───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ ✔ Edit tailwind.config.js: DEFAULT: {... => DEFAULT: {... │
│ │
│ 5 typography: { │
│ 6 DEFAULT: { │
│ 7 css: { │
│ 8 + '--tw-prose-body': '14px', │
│ 9 + h1: { │
│ 10 + marginTop: '1em', │
│ 11 + marginBottom: '0.5em', │
│ 12 + }, │
│ 13 + h2: { │
│ 14 + marginTop: '1em', │
│ 15 + marginBottom: '0.5em', │
│ 16 + }, │
│ 17 + h3: { │
│ 18 + marginTop: '1em', │
│ 19 + marginBottom: '0.5em', │
│ 20 + }, │
│ 21 + ul: { │
│ 22 + marginTop: '0.5em', │
│ 23 + marginBottom: '0.5em', │
│ 24 + }, │
│ 25 + ol: { │
│ 26 + marginTop: '0.5em', │
│ 27 + marginBottom: '0.5em', │
│ 28 + }, │
│ 29 pre: { │
│ 30 padding: '0', │
│ 31 filter: 'brightness(96%)', │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✦ Now that I've modified the tailwind.config.js file, you'll need to restart the development server to see the changes. After you've done that, the spacing in the markdown should be
much tighter. Let me know if you'd like any further adjustments
> /quit
╭──────────────────────────────────╮
│ │
│ Agent powering down. Goodbye! │
│ │
│ │
│ Cumulative Stats (1 Turns) │
│ │
│ Input Tokens 52,193 │
│ Output Tokens 864 │
│ Thoughts Tokens 379 │
│ ────────────────────────────── │
│ Total Tokens 53,436 │
│ │
│ Total duration (API) 25.7s │
│ Total duration (wall) 17m 57s │
│ │
╰──────────────────────────────────╯
1 Gemini CLI
```
|
||
| .. | ||
| api | ||
| e2e | ||
| public | ||
| src | ||
| .gitignore | ||
| .prettierrc | ||
| AGENT.md | ||
| eslint.config.js | ||
| index.html | ||
| package.json | ||
| playwright.config.ts | ||
| pnpm-lock.yaml | ||
| README.md | ||
| tailwind.config.js | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| tsconfig.worker.json | ||
| vite.config.ts | ||
| wrangler.jsonc | ||
AI chat template
An unofficial template for ⚛️ React ⨉ ⚡️ Vite ⨉ ⛅️ Cloudflare Workers AI.
Full-stack AI chat application using Workers for the APIs (using the Cloudflare vite-plugin) and Vite for the React application (hosted using Workers Static Assets). Provides chat functionality with Workers AI, stores conversations in the browser's IndexedDB, and uses ai-sdk, tailwindcss and workers-ai-provider.
Get started
Create the project using create-cloudflare:
npm create cloudflare@latest -- --template thomasgauvin/ai-chat-template
Run the project and deploy it:
cd <project-name>
npm install
npm run dev
npm run deploy
What's next?
- Change the name of the package (in
package.json) - Change the name of the worker (in
wrangler.jsonc)