Skip to content
BranchesTags

Repository files navigation

Chat Analyzer - Project Documentation

1. Project Overview

Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.

The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.

2. Technology Stack

  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage

3. Architecture & Data Flow

This application uses a Serverless / Frontend-Only architecture:

  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.

Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.

4. Key Features & Modules

4.1. Upload & Analysis (pages/Upload.jsx)

  • Functionality:
    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:
      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.

4.2. Dashboard (pages/Dashboard.jsx)

  • Functionality:
    • Displays a high-level overview of the analysis.
    • Visualizations:
      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.

4.3. Topics Explorer (pages/Topics.jsx)

  • Functionality:
    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.

4.4. Topic Detail (pages/TopicDetail.jsx)

  • Functionality:
    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.

4.5. Growth Insights (pages/Insights.jsx)

  • Functionality:
    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.

5. File Structure

/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running

  1. Install Dependencies: 
    npm install
  2. Configure API Key:
    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally: 
    npm run dev

About

Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.

chatinsight-beta.vercel.app

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
GitHub - badhon252/ChatInsight: Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics. · GitHub
Skip to content
BranchesTags
Repository files navigation
Chat Analyzer - Project Documentation
1. Project Overview
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.
2. Technology Stack
  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage
3. Architecture & Data Flow
This application uses a Serverless / Frontend-Only architecture:
  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.
Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.
4. Key Features & Modules
4.1. Upload & Analysis (pages/Upload.jsx)
  • Functionality:

    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:

      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.
4.2. Dashboard (pages/Dashboard.jsx)
  • Functionality:

    • Displays a high-level overview of the analysis.
    • Visualizations:

      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.
4.3. Topics Explorer (pages/Topics.jsx)
  • Functionality:

    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.
4.4. Topic Detail (pages/TopicDetail.jsx)
  • Functionality:

    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.
4.5. Growth Insights (pages/Insights.jsx)
  • Functionality:

    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.
5. File Structure
/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running
  1. Install Dependencies:

    npm install
  2. Configure API Key:

    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally:

    npm run dev
About
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
chatinsight-beta.vercel.app
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - badhon252/ChatInsight: Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics. · GitHub
Skip to content
BranchesTags
Repository files navigation
Chat Analyzer - Project Documentation
1. Project Overview
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.
2. Technology Stack
  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage
3. Architecture & Data Flow
This application uses a Serverless / Frontend-Only architecture:
  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.
Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.
4. Key Features & Modules
4.1. Upload & Analysis (pages/Upload.jsx)
  • Functionality:

    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:

      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.
4.2. Dashboard (pages/Dashboard.jsx)
  • Functionality:

    • Displays a high-level overview of the analysis.
    • Visualizations:

      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.
4.3. Topics Explorer (pages/Topics.jsx)
  • Functionality:

    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.
4.4. Topic Detail (pages/TopicDetail.jsx)
  • Functionality:

    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.
4.5. Growth Insights (pages/Insights.jsx)
  • Functionality:

    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.
5. File Structure
/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running
  1. Install Dependencies:

    npm install
  2. Configure API Key:

    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally:

    npm run dev
About
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
chatinsight-beta.vercel.app
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - badhon252/ChatInsight: Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics. · GitHub
Skip to content
BranchesTags
Repository files navigation
Chat Analyzer - Project Documentation
1. Project Overview
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.
2. Technology Stack
  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage
3. Architecture & Data Flow
This application uses a Serverless / Frontend-Only architecture:
  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.
Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.
4. Key Features & Modules
4.1. Upload & Analysis (pages/Upload.jsx)
  • Functionality:

    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:

      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.
4.2. Dashboard (pages/Dashboard.jsx)
  • Functionality:

    • Displays a high-level overview of the analysis.
    • Visualizations:

      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.
4.3. Topics Explorer (pages/Topics.jsx)
  • Functionality:

    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.
4.4. Topic Detail (pages/TopicDetail.jsx)
  • Functionality:

    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.
4.5. Growth Insights (pages/Insights.jsx)
  • Functionality:

    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.
5. File Structure
/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running
  1. Install Dependencies:

    npm install
  2. Configure API Key:

    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally:

    npm run dev
About
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
chatinsight-beta.vercel.app
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
GitHub - badhon252/ChatInsight: Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics. · GitHub
Skip to content
BranchesTags
Repository files navigation
Chat Analyzer - Project Documentation
1. Project Overview
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.
2. Technology Stack
  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage
3. Architecture & Data Flow
This application uses a Serverless / Frontend-Only architecture:
  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.
Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.
4. Key Features & Modules
4.1. Upload & Analysis (pages/Upload.jsx)
  • Functionality:

    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:

      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.
4.2. Dashboard (pages/Dashboard.jsx)
  • Functionality:

    • Displays a high-level overview of the analysis.
    • Visualizations:

      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.
4.3. Topics Explorer (pages/Topics.jsx)
  • Functionality:

    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.
4.4. Topic Detail (pages/TopicDetail.jsx)
  • Functionality:

    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.
4.5. Growth Insights (pages/Insights.jsx)
  • Functionality:

    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.
5. File Structure
/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running
  1. Install Dependencies:

    npm install
  2. Configure API Key:

    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally:

    npm run dev
About
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
chatinsight-beta.vercel.app
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - badhon252/ChatInsight: Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics. · GitHub
Skip to content
BranchesTags
Repository files navigation
Chat Analyzer - Project Documentation
1. Project Overview
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.
2. Technology Stack
  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage
3. Architecture & Data Flow
This application uses a Serverless / Frontend-Only architecture:
  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.
Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.
4. Key Features & Modules
4.1. Upload & Analysis (pages/Upload.jsx)
  • Functionality:

    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:

      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.
4.2. Dashboard (pages/Dashboard.jsx)
  • Functionality:

    • Displays a high-level overview of the analysis.
    • Visualizations:

      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.
4.3. Topics Explorer (pages/Topics.jsx)
  • Functionality:

    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.
4.4. Topic Detail (pages/TopicDetail.jsx)
  • Functionality:

    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.
4.5. Growth Insights (pages/Insights.jsx)
  • Functionality:

    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.
5. File Structure
/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running
  1. Install Dependencies:

    npm install
  2. Configure API Key:

    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally:

    npm run dev
About
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
chatinsight-beta.vercel.app
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
GitHub - badhon252/ChatInsight: Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics. · GitHub
Skip to content
BranchesTags
Repository files navigation
Chat Analyzer - Project Documentation
1. Project Overview
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.
2. Technology Stack
  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage
3. Architecture & Data Flow
This application uses a Serverless / Frontend-Only architecture:
  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.
Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.
4. Key Features & Modules
4.1. Upload & Analysis (pages/Upload.jsx)
  • Functionality:

    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:

      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.
4.2. Dashboard (pages/Dashboard.jsx)
  • Functionality:

    • Displays a high-level overview of the analysis.
    • Visualizations:

      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.
4.3. Topics Explorer (pages/Topics.jsx)
  • Functionality:

    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.
4.4. Topic Detail (pages/TopicDetail.jsx)
  • Functionality:

    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.
4.5. Growth Insights (pages/Insights.jsx)
  • Functionality:

    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.
5. File Structure
/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running
  1. Install Dependencies:

    npm install
  2. Configure API Key:

    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally:

    npm run dev
About
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
chatinsight-beta.vercel.app
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
GitHub - badhon252/ChatInsight: Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics. · GitHub
Skip to content
BranchesTags
Repository files navigation
Chat Analyzer - Project Documentation
1. Project Overview
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (.json or .txt). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
The application operates entirely in the browser (Frontend-Only), ensuring that your personal chat data is never stored on an external server. AI analysis is performed by directly connecting to the OpenAI API from your browser.
2. Technology Stack
  • Frontend Framework: React
  • Routing: react-router-dom
  • Styling: Tailwind CSS (Custom "Neo-Brutalism" design system)
  • Animations: Framer Motion
  • Data Visualization: Recharts
  • Icons: Lucide React
  • State Management & Data Fetching: TanStack Query (@tanstack/react-query)
  • API Integration: Direct OpenAI API calls via fetch
  • Persistence: Browser localStorage
3. Architecture & Data Flow
This application uses a Serverless / Frontend-Only architecture:
  1. Input: User uploads a chat history file.
  2. Processing: File is parsed locally in the browser.
  3. Analysis: The app sends a request to OpenAI's API (using your personal API key) to generate insights.
  4. Storage: Analysis results are saved to localStorage in your browser.
  5. Visualization: The app reads from localStorage to display dashboards and charts.
Security Note: Your OpenAI API key is stored in a .env file. Since this is a client-side app, ensure you do not expose this key if deploying to a public URL. This setup is best suited for local usage.
4. Key Features & Modules
4.1. Upload & Analysis (pages/Upload.jsx)
  • Functionality:

    • Accepts .json (ChatGPT export) or .txt files.
    • Parses chat history client-side.
    • Intelligently samples messages to fit context windows.
    • Sends sampled data to OpenAI via apiClient to generate:

      • Top Topics (with keywords)
      • Sentiment Breakdown
      • Key Insights
      • Improvement Suggestions
      • Behavioral Patterns
    • Saves results to localStorage.
4.2. Dashboard (pages/Dashboard.jsx)
  • Functionality:

    • Displays a high-level overview of the analysis.
    • Visualizations:

      • Sentiment Pie Chart.
      • Top Topics Bar Chart.
    • Stats: Total messages, peak activity time, top topics count.
    • Insights: Lists key insights and behavioral patterns (recurring themes).
    • Allows switching between different analysis results.
4.3. Topics Explorer (pages/Topics.jsx)
  • Functionality:

    • Lists all identified topics from the analysis.
    • Search functionality to filter topics.
    • Visual "mentions" bar for each topic.
    • Navigates to TopicDetail on click.
4.4. Topic Detail (pages/TopicDetail.jsx)
  • Functionality:

    • Deep dive into a specific topic.
    • Shows sentiment specific to that topic.
    • Filters global insights, suggestions, and themes to show only those relevant to the selected topic.
4.5. Growth Insights (pages/Insights.jsx)
  • Functionality:

    • Focuses on actionable improvement.
    • Categorizes suggestions by priority (High, Medium, Low).
    • AI Action Plans: Users can click "Get Action Plan" on any suggestion to generate a detailed, step-by-step guide using the LLM.
5. File Structure
/
├── .env # API Key configuration
├── src/
│ ├── api/
│ │ └── apiClient.js # Client-side API logic (OpenAI + LocalStorage)
│ ├── components/
│ │ ├── ui/ # Reusable UI components (Button, Input, Alert)
│ │ └── SocialShare.jsx
│ ├── pages/
│ │ ├── Dashboard.jsx
│ │ ├── Insights.jsx
│ │ ├── TopicDetail.jsx
│ │ ├── Topics.jsx
│ │ └── Upload.jsx
│ ├── App.jsx # Router configuration
│ ├── main.jsx # Entry point
│ └── utils.js # Utility functions
└── Entities/
└── ChatAnalysis.json # Schema definition (reference)

6. Setup & Running
  1. Install Dependencies:

    npm install
  2. Configure API Key:

    • Create a .env file in the root directory.
    • Add your OpenAI API key: VITE_OPENAI_API_KEY=sk-...
  3. Run Locally:

    npm run dev
About
Chat Analyzer is a privacy-first web application designed to analyze ChatGPT chat history files (`.json` or `.txt`). It provides users with deep insights into their communication patterns, emotional sentiment, and key discussion topics.
chatinsight-beta.vercel.app
Resources
Readme
Activity
Stars
1 star
Watchers
0 watching
Forks
0 forks
Report repository
Used by
Contributors
Languages