ChatStory

KO | EN

gitlite — search

#nlp #github #devops #postgresql #agents #command-line #terminal #go #cloud-native #nextjs

(★ 9)

A web tool that analyzes and visualizes your chat history.

File Explorer

ZIP Download

- - pages.yml
- preview.png
- wordmark.svg
- - favicon.ico
  - globals.css
  - icon.svg
  - layout.tsx
  - opengraph-image.alt.txt
  - opengraph-image.png
  - page.tsx
- - BrandMark.tsx
  - ChangelogScreen.tsx
  - ChatProvider.tsx
  - ChatSidePanel.tsx
  - Dashboard.tsx
  - GuideScreen.tsx
  - HomeView.tsx
  - ImportGuide.tsx
  - ImportReview.tsx
  - Landing.tsx
  - LanguageSwitcher.tsx
  - LinkPreview.tsx
  - LocaleProvider.tsx
  - PlatformLogos.tsx
  - Providers.tsx
  - SiteFooter.tsx
  - SiteHeader.tsx
  - SiteLogo.tsx
- - analyze.ts
  - changelog.ts
  - chat-types.ts
  - demo-analysis.ts
  - guides.ts
  - https-links.ts
  - import-chat.ts
  - locale.ts
  - messages.ts
  - pinyin.ts
  - site-brand.ts
  - site-links.ts
  - word-cloud-cache.ts
  - words.ts
- - line.test.ts
  - meta.test.ts
.gitignore
eslint.config.mjs
LICENSE
next.config.ts
package-lock.json
package.json
postcss.config.mjs
README.md
tsconfig.json
vitest.config.mts

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Turn your chats into stories you can explore.

[![Demo](https://img.shields.io/badge/Demo-live-7c5cbf)](https://f964966828.github.io/ChatStory/)
[![License: MIT](https://img.shields.io/badge/License-MIT-a78bd9)](https://raw.githubusercontent.com/f964966828/ChatStory/main/LICENSE)
[![Language](https://img.shields.io/badge/Language-TypeScript-9b7ed4)](https://raw.githubusercontent.com/f964966828/ChatStory/main/)

</div>

Currently supported: **LINE**, plus **Meta** (Messenger, Instagram, and Threads). More platforms may come later.

## Features

- **Privacy policy**: We don't upload anything when you import a chat. Parsing and charts run on your device; the file never leaves the browser.
- **Interactive charts**: We designed many interactions between the charts. Enjoy exploring your own story.
- **Side chat panel**: Open the actual messages next to the dashboard, jump to a busy day, and anonymize names before you share.
- **Share a snapshot**: Export the dashboard as a PNG. No extra caption text.
- **Responsive design**: The site is built to view on both phones and computers.
- **Chinese and English UI**: Switch language without leaving the page.

## Architecture

ChatStory is a Next.js App Router app with a static export (`output: "export"`). There is no API and no database.

Data flows in four stages: **file checks → platform parser → local analysis → dashboard**.

| Layer | Path | Role |
| --- | --- | --- |
| Routes | `src/app/` | Home, changelog, import guides |
| Shell | `src/components/` | Landing, dashboard layout, chat panel, i18n |
| Charts | `src/components/dashboard/` | One file per visualization, plus share-image export |
| Domain | `src/lib/` | Import, LINE/Meta parsers, stats, word tokenization |
| Tests | `tests/` | Parser unit tests, kept out of `src/lib/` |

```
src/
├── app/                  # Static pages
├── components/
│   ├── Landing.tsx       # File drop
│   ├── Dashboard.tsx     # Layout, share, chat panel
│   ├── ChatProvider.tsx  # Chats kept in memory
│   └── dashboard/        # Charts
└── lib/
    ├── import-chat.ts    # Type / size checks
    ├── parse/            # LINE .txt and Meta .json
    ├── analyze.ts        # Stats
    └── words.ts          # Word clouds
tests/
└── parse/                # LINE and Meta parser tests
```

## Deploy locally

### Requirements

- Node.js 22
- npm

### Deploy

```bash
git clone https://github.com/f964966828/ChatStory.git

# Change directory
cd ChatStory

# Install dependencies
npm install

# Start the dev server
npm run dev

# Open localhost:3000 and you'll see
```

### Test

Parser tests live in `tests/parse/`. After `npm install`:

```bash
# Run all tests
npm test

# Run one file
npx vitest run tests/parse/line.test.ts
npx vitest run tests/parse/meta.test.ts
```

## Contributing

Pull requests are welcome.

<table>
  <thead>
    <tr>
      <th nowrap>Type</th>
      <th nowrap>Start with</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td nowrap>Functionality issue</td>
      <td nowrap>Issue or PR</td>
      <td>A bug in import, charts, or display. Say what broke and how you checked the fix.</td>
    </tr>
    <tr>
      <td nowrap>Typos and wording</td>
      <td nowrap>Issue or PR</td>
      <td>README, UI text, import guides, or Chinese / English phrasing.</td>
    </tr>
    <tr>
      <td nowrap>New feature</td>
      <td nowrap>Issue first</td>
      <td>New chart, group chats, another platform, or a large UI / data-flow change.</td>
    </tr>
  </tbody>
</table>

Share a proposal on the issue first. A pull request opened before discussion will not be approved.

ChatStory

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README