{"id":22104054,"url":"https://github.com/ritul-void/the_grok-head","last_synced_at":"2026-01-28T20:04:06.021Z","repository":{"id":262187809,"uuid":"886477748","full_name":"Ritul-Void/The_Grok-head","owner":"Ritul-Void","description":"it is a chat bot gui application based on the grok ai api , an chatbot app","archived":false,"fork":false,"pushed_at":"2024-12-08T05:16:34.000Z","size":23,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-10T00:43:58.692Z","etag":null,"topics":["ai","api","elonmusk","grok","grok-api","html","website"],"latest_commit_sha":null,"homepage":"https://ritul-void.github.io/The_Grok-head/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ritul-Void.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-11T03:32:48.000Z","updated_at":"2024-12-08T05:16:37.000Z","dependencies_parsed_at":"2024-12-08T06:18:37.302Z","dependency_job_id":null,"html_url":"https://github.com/Ritul-Void/The_Grok-head","commit_stats":null,"previous_names":["ritul-void/the_grok-head"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ritul-Void/The_Grok-head","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ritul-Void%2FThe_Grok-head","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ritul-Void%2FThe_Grok-head/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ritul-Void%2FThe_Grok-head/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ritul-Void%2FThe_Grok-head/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ritul-Void","download_url":"https://codeload.github.com/Ritul-Void/The_Grok-head/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ritul-Void%2FThe_Grok-head/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28850474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","api","elonmusk","grok","grok-api","html","website"],"created_at":"2024-12-01T06:20:19.559Z","updated_at":"2026-01-28T20:04:06.005Z","avatar_url":"https://github.com/Ritul-Void.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# The_Grok-head(v1.5.1)\nit is a Grok AI gui application based on the grok ai api , an chatbot app. currrently token is fiexed at 200 you can chage it in the code\n### To run this application YOU NEED THE GROK AI API KEY FROM XAI CURRENTLY FREE TILL DECEMBER \n\n# Grok AI Chat Bot \n\n## Overview\nThe Grok AI Chat Bot is a web-based application that facilitates interaction with a conversational AI model. It features a clean and responsive UI with options for settings, message history, and chat customization.\n\n---\n\n## Table of Contents\n- [Features](#features)\n- [Technologies Used](#technologies-used)\n- [File Structure](#file-structure)\n- [Setup](#setup)\n- [UI Components](#ui-components)\n- [Customization](#customization)\n- [Event Listeners](#event-listeners)\n- [Storage](#storage)\n- [Future Enhancements](#future-enhancements)\n\n---\n\n## Features\n1. **Responsive Chat Interface**: \n   - Dark-themed UI with smooth message scrolling.\n   - User and bot messages displayed distinctly.\n2. **Settings Modal**:\n   - Customize API key and system role message.\n3. **Chat History**:\n   - View previous chat sessions in a modal.\n4. **Keyboard Input**:\n   - Type messages in the input box and send with a button or Enter key.\n5. **Reset Chat**:\n   - Clear current messages to start fresh.\n6. **Mobile-Friendly**:\n   - Adjusted styles for smaller screens.\n\n---\n\n## Technologies Used\n1. **HTML**: Structuring the web app.\n2. **CSS**: Styling and responsive design.\n3. **JavaScript**: Handling interactions and functionality.\n4. **Third-party Libraries**:\n   - [Marked](https://marked.js.org/): Parse Markdown text.\n   - [DOMPurify](https://github.com/cure53/DOMPurify): Sanitize HTML content for security.\n\n---\n\n## File Structure\n```plaintext\n- index.html       # Main HTML file\n- styles.css       # Contains styling (inline in your case)\n- scripts.js       # JavaScript functionality\n- assets/          # Any additional assets (images, etc.)\n```\n\n---\n\n## Setup\n1. Save the code as `index.html`.\n2. Include the required scripts from the CDN:\n   - `marked.min.js`\n   - `dompurify.min.js`\n3. Open the file in a web browser to run the chat interface.\n\n---\n\n## UI Components\n\n### Chat Container\n- **HTML**: `\u003cdiv class=\"chat-container\"\u003e`\n- **CSS**: Styled to occupy the full viewport height and contain messages.\n\n### Chat Header\n- **HTML**: `\u003cdiv class=\"chat-header\"\u003e`\n- **Features**:\n  - History button (`🕓`).\n  - Title (`The Grock Head`).\n  - Settings button (`⚙️`).\n\n### Chat Messages\n- **HTML**: `\u003cdiv class=\"chat-messages\"\u003e`\n- **CSS**: `overflow-y: auto` for scrollable content.\n\n### Input Container\n- **HTML**:\n  ```html\n  \u003cdiv class=\"input-container\"\u003e\n    \u003cinput type=\"text\" class=\"input-box\" id=\"userInput\" placeholder=\"Type your Message...\" /\u003e\n    \u003cbutton class=\"send-button\" id=\"sendMessage\"\u003e↵\u003c/button\u003e\n    \u003cbutton class=\"reset-button\" id=\"resetChat\"\u003e✎\u003c/button\u003e\n  \u003c/div\u003e\n  ```\n- **JavaScript**: Handles sending and resetting of messages.\n\n### Modals\n1. **Settings Modal**:\n   - Customize API key and system role message.\n   - Save data in `localStorage`.\n2. **History Modal**:\n   - Display chat history in a tabular format.\n\n---\n\n## Customization\n\n### Fonts\n- **Google Fonts**:\n  - `Doto` for headings.\n  - `Space Grotesk` for body text.\n\n### Colors\n- Background: `#202020` (dark theme).\n- Bot Messages: `#525252` (gray).\n- User Messages: `#ffffff` (white).\n\n### Variables\n- **CSS Variables**:\n  - `--dot-bg`: Background for the dotted pattern.\n  - `--dot-color`: Color for dots.\n\n---\n\n## Event Listeners\n\n### Core Events\n1. **Send Message**:\n   - Triggered by `#sendMessage` button or pressing Enter.\n   - Appends user message and a placeholder for bot response.\n2. **Reset Chat**:\n   - Clears all messages when `#resetChat` button is clicked.\n3. **Open Settings**:\n   - Displays the settings modal when `#openSettings` is clicked.\n4. **Close Settings**:\n   - Hides the settings modal when `#closeSettings` is clicked.\n5. **Save API Key**:\n   - Saves API key and system role message to `localStorage`.\n6. **View History**:\n   - Opens the history modal.\n7. **Close History**:\n   - Closes the history modal.\n\n---\n\n## Storage\n1. **LocalStorage**:\n   - **API Key**: `localStorage.getItem(\"apiKey\")`.\n   - **System Role**: `localStorage.getItem(\"systemRoleMessage\")`.\n2. **Chat History**:\n   - Saved in a structured format for retrieval.\n\n---\n\n## Future Enhancements\n1. **Backend Integration**:\n   - Connect with an API endpoint for bot responses.\n2. **Real-Time Chat**:\n   - Add WebSocket support for live updates.\n3. **Message Formatting**:\n   - Allow Markdown and emoji support.\n4. **Export Chat**:\n   - Add an option to export chat history as a file.\n5. **Themes**:\n   - Allow switching between light and dark modes.\n\n---\n##Future Updates \n-electron app\n-mobile app\n-document upload\n-additional model support \n-voice ai\n-token customisation\n---\n## Additional Notes\n- Ensure browser compatibility for all features.\n- Optimize performance for larger chat histories.\n- Use secure methods to store and handle API keys.\n\n---\n\n## Contact\nFor issues or suggestions, please contact [Your Email/Support Link].\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritul-void%2Fthe_grok-head","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fritul-void%2Fthe_grok-head","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritul-void%2Fthe_grok-head/lists"}