| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>AI Name</title>
|
| <link rel="icon" type="image/png" href="LOGO">
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
|
|
| :root {
|
| --primary-color: #2C64BA;
|
| --light-bg: #FAFAFA;
|
| --dark-bg: #09090B;
|
| --light-text: #000000;
|
| --dark-text: #FFFFFF;
|
| --light-sidebar: #F5F5F5;
|
| --dark-sidebar: #18181B;
|
| --light-border: #E5E5E5;
|
| --dark-border: #27272A;
|
| }
|
|
|
|
|
| body {
|
| font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
| background: var(--light-bg);
|
| color: var(--light-text);
|
| height: 100vh;
|
| display: flex;
|
| overflow: hidden;
|
| transition: background 0.3s, color 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode {
|
| background: var(--dark-bg);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .sidebar {
|
| width: 260px;
|
| background: var(--light-sidebar);
|
| display: flex;
|
| flex-direction: column;
|
| border-right: 1px solid var(--light-border);
|
| transition: background 0.3s, border-color 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .sidebar {
|
| background: var(--dark-sidebar);
|
| border-right-color: var(--dark-border);
|
| }
|
|
|
|
|
| .logo-container {
|
| padding: 20px;
|
| border-bottom: 1px solid var(--light-border);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 12px;
|
| }
|
|
|
|
|
| body.dark-mode .logo-container {
|
| border-bottom-color: var(--dark-border);
|
| }
|
|
|
|
|
| .logo {
|
| width: 32px;
|
| height: 32px;
|
| border-radius: 6px;
|
| overflow: hidden;
|
| }
|
|
|
|
|
| .logo img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
|
|
| .logo-text {
|
| font-size: 18px;
|
| font-weight: 700;
|
| color: var(--primary-color);
|
| }
|
|
|
|
|
| .new-chat-btn {
|
| margin: 16px;
|
| padding: 12px 20px;
|
| background: var(--primary-color);
|
| color: white;
|
| border: none;
|
| border-radius: 8px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| font-weight: 600;
|
| transition: all 0.3s ease;
|
| transform: translateY(0);
|
| }
|
|
|
|
|
| .new-chat-btn:hover {
|
| opacity: 0.9;
|
| transform: translateY(-2px);
|
| box-shadow: 0 4px 12px rgba(44, 100, 186, 0.3);
|
| }
|
|
|
|
|
| .new-chat-btn:active {
|
| transform: translateY(0);
|
| }
|
|
|
|
|
| .recent-chats {
|
| flex: 1;
|
| padding: 16px;
|
| overflow-y: auto;
|
| }
|
|
|
|
|
| .search-box {
|
| margin: 0 16px 12px 16px;
|
| padding: 8px 12px;
|
| border: 1px solid var(--light-border);
|
| border-radius: 6px;
|
| background: var(--light-bg);
|
| color: var(--light-text);
|
| font-size: 13px;
|
| outline: none;
|
| width: calc(100% - 32px);
|
| transition: border-color 0.2s, background 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .search-box {
|
| background: var(--dark-bg);
|
| border-color: var(--dark-border);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .search-box:focus {
|
| border-color: var(--primary-color);
|
| }
|
|
|
|
|
| .recent-chats h3 {
|
| font-size: 12px;
|
| text-transform: uppercase;
|
| color: #888;
|
| margin-bottom: 12px;
|
| font-weight: 600;
|
| }
|
|
|
|
|
| .chat-item {
|
| padding: 10px 12px;
|
| margin-bottom: 4px;
|
| border-radius: 6px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| transition: background 0.2s;
|
| position: relative;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| }
|
|
|
|
|
| .chat-item:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| }
|
|
|
|
|
| .chat-item.active {
|
| background: rgba(44, 100, 186, 0.15);
|
| }
|
|
|
|
|
| .chat-item-title {
|
| flex: 1;
|
| overflow: hidden;
|
| text-overflow: ellipsis;
|
| white-space: nowrap;
|
| }
|
|
|
|
|
| .chat-item-edit {
|
| opacity: 0;
|
| transition: opacity 0.2s;
|
| padding: 4px 8px;
|
| font-size: 12px;
|
| }
|
|
|
|
|
| .chat-item:hover .chat-item-edit {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .rename-input {
|
| width: 100%;
|
| padding: 6px;
|
| border: 1px solid var(--primary-color);
|
| border-radius: 4px;
|
| font-size: 13px;
|
| background: var(--light-bg);
|
| color: var(--light-text);
|
| }
|
|
|
|
|
| body.dark-mode .rename-input {
|
| background: var(--dark-bg);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .voice-controls {
|
| display: flex;
|
| gap: 8px;
|
| align-items: center;
|
| }
|
|
|
|
|
| .voice-btn {
|
| padding: 10px 12px;
|
| background: transparent;
|
| border: 1px solid var(--light-border);
|
| border-radius: 8px;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| font-size: 14px;
|
| }
|
|
|
|
|
| body.dark-mode .voice-btn {
|
| border-color: var(--dark-border);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .voice-btn:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| border-color: var(--primary-color);
|
| }
|
|
|
|
|
| .voice-btn.listening {
|
| background: #ef4444;
|
| color: white;
|
| border-color: #ef4444;
|
| animation: pulse 1.5s infinite;
|
| }
|
|
|
|
|
| @keyframes pulse {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0.7; }
|
| }
|
|
|
|
|
| .chat-main {
|
| flex: 1;
|
| display: flex;
|
| flex-direction: column;
|
| background: var(--light-bg);
|
| transition: background 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .chat-main {
|
| background: var(--dark-bg);
|
| }
|
|
|
|
|
| .chat-header {
|
| padding: 16px 24px;
|
| border-bottom: 1px solid var(--light-border);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| background: var(--light-bg);
|
| transition: background 0.3s, border-color 0.3s;
|
| gap: 12px;
|
| }
|
|
|
|
|
| body.dark-mode .chat-header {
|
| background: var(--dark-bg);
|
| border-bottom-color: var(--dark-border);
|
| }
|
|
|
|
|
| .chat-header h1 {
|
| font-size: 18px;
|
| font-weight: 600;
|
| }
|
|
|
|
|
| .header-actions {
|
| display: flex;
|
| gap: 8px;
|
| align-items: center;
|
| }
|
|
|
|
|
| .theme-toggle, .export-btn, .lang-btn {
|
| background: transparent;
|
| border: 1px solid var(--light-border);
|
| padding: 8px 16px;
|
| border-radius: 6px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| transition: background 0.2s, border-color 0.3s;
|
| white-space: nowrap;
|
| }
|
|
|
|
|
| body.dark-mode .theme-toggle,
|
| body.dark-mode .export-btn,
|
| body.dark-mode .lang-btn {
|
| border-color: var(--dark-border);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .theme-toggle:hover, .export-btn:hover, .lang-btn:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| }
|
|
|
|
|
| .welcome-screen {
|
| flex: 1;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| padding: 40px;
|
| text-align: center;
|
| }
|
|
|
|
|
| .welcome-logo {
|
| width: 64px;
|
| height: 64px;
|
| border-radius: 12px;
|
| margin-bottom: 24px;
|
| overflow: hidden;
|
| }
|
|
|
|
|
| .welcome-logo img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
|
|
| .welcome-screen h1 {
|
| font-size: 32px;
|
| margin-bottom: 12px;
|
| font-weight: 700;
|
| }
|
|
|
|
|
| .welcome-screen p {
|
| font-size: 16px;
|
| color: #888;
|
| max-width: 500px;
|
| }
|
|
|
|
|
| .chat-messages {
|
| flex: 1;
|
| overflow-y: auto;
|
| padding: 24px;
|
| display: none;
|
| }
|
|
|
|
|
| .chat-messages.active {
|
| display: block;
|
| }
|
|
|
|
|
| .message {
|
| margin-bottom: 20px;
|
| display: flex;
|
| animation: fadeIn 0.3s ease-in;
|
| }
|
|
|
|
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(10px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
|
|
| .message.user {
|
| justify-content: flex-end;
|
| }
|
|
|
|
|
| .message.user .message-content {
|
| text-align: left;
|
| }
|
|
|
|
|
| .message-content {
|
| max-width: 70%;
|
| padding: 12px 16px;
|
| border-radius: 12px;
|
| line-height: 1.6;
|
| font-size: 15px;
|
| position: relative;
|
| }
|
|
|
|
|
| .message.bot .message-content {
|
| background: white;
|
| color: #000;
|
| border: 1px solid var(--light-border);
|
| }
|
|
|
|
|
| body.dark-mode .message.bot .message-content {
|
| background: var(--dark-sidebar);
|
| color: var(--dark-text);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .message.user .message-content {
|
| background: var(--primary-color);
|
| color: white;
|
| }
|
|
|
|
|
| .message-actions {
|
| display: flex;
|
| gap: 8px;
|
| margin-top: 8px;
|
| opacity: 0;
|
| transition: opacity 0.2s;
|
| }
|
|
|
|
|
| .message.bot:hover .message-actions {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .action-btn {
|
| background: transparent;
|
| border: 1px solid var(--light-border);
|
| padding: 4px 10px;
|
| border-radius: 4px;
|
| font-size: 12px;
|
| cursor: pointer;
|
| transition: background 0.2s;
|
| color: #666;
|
| }
|
|
|
|
|
| body.dark-mode .action-btn {
|
| border-color: var(--dark-border);
|
| color: #999;
|
| }
|
|
|
|
|
| .action-btn:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| color: var(--primary-color);
|
| }
|
|
|
|
|
| .message.user .message-actions {
|
| opacity: 0;
|
| }
|
|
|
|
|
| .message.user:hover .message-actions {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .edit-mode {
|
| background: var(--light-bg);
|
| border: 2px solid var(--primary-color);
|
| border-radius: 8px;
|
| padding: 8px;
|
| }
|
|
|
|
|
| body.dark-mode .edit-mode {
|
| background: var(--dark-sidebar);
|
| }
|
|
|
|
|
| .edit-mode textarea {
|
| width: 100%;
|
| padding: 8px;
|
| border: 1px solid var(--light-border);
|
| border-radius: 4px;
|
| font-family: inherit;
|
| font-size: 14px;
|
| resize: vertical;
|
| min-height: 60px;
|
| background: white;
|
| color: var(--light-text);
|
| }
|
|
|
|
|
| body.dark-mode .edit-mode textarea {
|
| background: var(--dark-bg);
|
| color: var(--dark-text);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .edit-actions {
|
| display: flex;
|
| gap: 8px;
|
| margin-top: 8px;
|
| justify-content: flex-end;
|
| }
|
|
|
|
|
| .edit-actions button {
|
| padding: 6px 12px;
|
| border-radius: 4px;
|
| border: none;
|
| cursor: pointer;
|
| font-size: 13px;
|
| font-weight: 500;
|
| }
|
|
|
|
|
| .edit-actions .save-btn {
|
| background: var(--primary-color);
|
| color: white;
|
| }
|
|
|
|
|
| .edit-actions .cancel-btn {
|
| background: #e0e0e0;
|
| color: #333;
|
| }
|
|
|
|
|
| body.dark-mode .edit-actions .cancel-btn {
|
| background: var(--dark-sidebar);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .code-block {
|
| background: #f5f5f5;
|
| border: 1px solid #ddd;
|
| border-radius: 6px;
|
| padding: 12px;
|
| margin: 8px 0;
|
| overflow-x: auto;
|
| font-family: 'Courier New', monospace;
|
| font-size: 13px;
|
| }
|
|
|
|
|
| body.dark-mode .code-block {
|
| background: #1a1a1a;
|
| border-color: #333;
|
| }
|
|
|
|
|
| .suggested-prompts {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 12px;
|
| padding: 20px;
|
| max-width: 900px;
|
| margin: 0 auto;
|
| }
|
|
|
|
|
| .prompt-card {
|
| background: white;
|
| border: 1px solid var(--light-border);
|
| border-radius: 10px;
|
| padding: 16px;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| text-align: left;
|
| }
|
|
|
|
|
| body.dark-mode .prompt-card {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .prompt-card:hover {
|
| border-color: var(--primary-color);
|
| transform: translateY(-2px);
|
| box-shadow: 0 4px 12px rgba(44, 100, 186, 0.2);
|
| }
|
|
|
|
|
| .prompt-card .icon {
|
| font-size: 24px;
|
| margin-bottom: 8px;
|
| }
|
|
|
|
|
| .prompt-card .text {
|
| font-size: 14px;
|
| font-weight: 500;
|
| }
|
|
|
|
|
| .file-attachment {
|
| font-size: 13px;
|
| padding: 8px 12px;
|
| background: rgba(44, 100, 186, 0.1);
|
| border-radius: 6px;
|
| margin-top: 8px;
|
| display: inline-block;
|
| }
|
|
|
|
|
| .typing-indicator {
|
| display: none;
|
| padding: 12px 16px;
|
| background: white;
|
| border-radius: 12px;
|
| width: fit-content;
|
| border: 1px solid var(--light-border);
|
| }
|
|
|
|
|
| body.dark-mode .typing-indicator {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .typing-indicator.active {
|
| display: block;
|
| }
|
|
|
|
|
| .typing-indicator span {
|
| height: 8px;
|
| width: 8px;
|
| background: var(--primary-color);
|
| border-radius: 50%;
|
| display: inline-block;
|
| margin: 0 2px;
|
| animation: bounce 1.4s infinite;
|
| }
|
|
|
|
|
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
|
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
|
| @keyframes bounce {
|
| 0%, 60%, 100% { transform: translateY(0); }
|
| 30% { transform: translateY(-8px); }
|
| }
|
|
|
|
|
| .chat-input-container {
|
| padding: 20px 24px;
|
| border-top: 1px solid var(--light-border);
|
| background: var(--light-bg);
|
| transition: background 0.3s, border-color 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .chat-input-container {
|
| background: var(--dark-bg);
|
| border-top-color: var(--dark-border);
|
| }
|
|
|
|
|
| .chat-input-wrapper {
|
| display: flex;
|
| gap: 8px;
|
| max-width: 900px;
|
| margin: 0 auto;
|
| align-items: flex-end;
|
| background: var(--light-bg);
|
| border: 2px solid var(--light-border);
|
| border-radius: 12px;
|
| padding: 8px;
|
| transition: border-color 0.2s, background 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .chat-input-wrapper {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .chat-input-wrapper:focus-within {
|
| border-color: var(--primary-color);
|
| }
|
|
|
|
|
| .file-input-label {
|
| padding: 10px 12px;
|
| background: transparent;
|
| border: none;
|
| cursor: pointer;
|
| transition: background 0.2s;
|
| font-size: 20px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| border-radius: 6px;
|
| color: #888;
|
| }
|
|
|
|
|
| .file-input-label:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| color: var(--primary-color);
|
| }
|
|
|
|
|
| #fileInput {
|
| display: none;
|
| }
|
|
|
|
|
| .chat-input {
|
| flex: 1;
|
| padding: 10px 12px;
|
| border: none;
|
| font-size: 15px;
|
| outline: none;
|
| font-family: inherit;
|
| background: transparent;
|
| color: var(--light-text);
|
| resize: none;
|
| max-height: 150px;
|
| }
|
|
|
|
|
| body.dark-mode .chat-input {
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .send-button {
|
| padding: 10px 12px;
|
| background: var(--primary-color);
|
| color: white;
|
| border: none;
|
| border-radius: 8px;
|
| font-size: 18px;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: opacity 0.2s;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| min-width: 40px;
|
| }
|
|
|
|
|
| .send-button:hover:not(:disabled) {
|
| opacity: 0.9;
|
| }
|
|
|
|
|
| .send-button:disabled {
|
| opacity: 0.4;
|
| cursor: not-allowed;
|
| }
|
|
|
|
|
| .context-menu {
|
| position: fixed;
|
| background: white;
|
| border: 1px solid var(--light-border);
|
| border-radius: 8px;
|
| padding: 4px;
|
| box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
| display: none;
|
| z-index: 1000;
|
| }
|
|
|
|
|
| body.dark-mode .context-menu {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .context-menu.active {
|
| display: block;
|
| }
|
|
|
|
|
| .context-menu-item {
|
| padding: 8px 16px;
|
| cursor: pointer;
|
| border-radius: 4px;
|
| font-size: 14px;
|
| transition: background 0.2s;
|
| color: #dc2626;
|
| }
|
|
|
|
|
| .context-menu-item:hover {
|
| background: rgba(220, 38, 38, 0.1);
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .sidebar { width: 0; overflow: hidden; }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="sidebar">
|
| <div class="logo-container">
|
| <div class="logo">
|
| <img src="LOGO" alt="AI LOGO NAME">
|
| </div>
|
| <div class="logo-text">LOGO</div>
|
| </div>
|
| <button class="new-chat-btn" onclick="newChat()">+ New chat</button>
|
| <input type="text" class="search-box" id="searchBox" placeholder="🔍 Search chats..." oninput="searchChats()">
|
| <div class="recent-chats">
|
| <h3>Recent chats</h3>
|
| <div id="chatList"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="chat-main">
|
| <div class="chat-header">
|
| <h1 id="chatTitle">AI NAME</h1>
|
| <div class="header-actions">
|
| <div class="voice-controls">
|
| <button class="voice-btn" id="voiceBtn" onclick="toggleVoiceInput()" title="Voice input">
|
| 🎤 <span id="voiceStatus">Voice</span>
|
| </button>
|
| <button class="voice-btn" id="ttsBtn" onclick="toggleTTS()" title="Text-to-speech">
|
| 🔊 <span id="ttsStatus">TTS</span>
|
| </button>
|
| </div>
|
| <select class="lang-btn" id="langSelect" onchange="changeLanguage()">
|
| <option value="en">🌐 English</option>
|
| <option value="es">🌐 Español</option>
|
| <option value="fr">🌐 Français</option>
|
| <option value="de">🌐 Deutsch</option>
|
| <option value="zh">🌐 中文</option>
|
| <option value="hi">🌐 हिन्दी</option>
|
| <option value="ar">🌐 العربية</option>
|
| </select>
|
| <button class="export-btn" onclick="exportChat()">📥 Export</button>
|
| <button class="theme-toggle" onclick="toggleTheme()">🌙 Dark Mode</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="welcome-screen" id="welcomeScreen">
|
| <div class="welcome-logo">
|
| <img src="LOGO ADDRESS" alt="AI LOGO">
|
| </div>
|
| <h1>Welcome to AI</h1>
|
| <p>Your AI assistant built by SOMEONE. Ask me anything about homework, aerospace, or just chat!</p>
|
|
|
| <div class="suggested-prompts">
|
| <div class="prompt-card" onclick="usePrompt('Help me with my math homework')">
|
| <div class="icon">📐</div>
|
| <div class="text">Help me with my math homework</div>
|
| </div>
|
| <div class="prompt-card" onclick="usePrompt('Write code for a simple game')">
|
| <div class="icon">💻</div>
|
| <div class="text">Write code for a simple game</div>
|
| </div>
|
| <div class="prompt-card" onclick="usePrompt('Explain rocket propulsion')">
|
| <div class="icon">🚀</div>
|
| <div class="text">Explain rocket propulsion</div>
|
| </div>
|
| <div class="prompt-card" onclick="usePrompt('Creative story ideas')">
|
| <div class="icon">✨</div>
|
| <div class="text">Creative story ideas</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="chat-messages" id="chatMessages"></div>
|
| <div class="typing-indicator" id="typingIndicator">
|
| <span></span>
|
| <span></span>
|
| <span></span>
|
| </div>
|
|
|
|
|
| <div class="chat-input-container">
|
| <div class="chat-input-wrapper">
|
| <label for="fileInput" class="file-input-label" title="Attach file">📎</label>
|
| <input type="file" id="fileInput" accept="image/png,image/jpeg,image/jpg,application/pdf" onchange="handleFileSelect(event)">
|
| <textarea
|
| class="chat-input"
|
| id="chatInput"
|
| placeholder="Send a message..."
|
| rows="1"
|
| oninput="autoResize(this)"
|
| ></textarea>
|
| <button class="send-button" onclick="sendMessage()" id="sendButton" title="Send message">
|
| ↑
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="context-menu" id="contextMenu">
|
| <div class="context-menu-item" onclick="deleteChat()">🗑️ Delete chat</div>
|
| </div>
|
|
|
|
|
| <script>
|
| const API_KEY = 'API-KEY-HERE';
|
| const API_URL = 'API-URL-HERE';
|
| const MODEL = 'MODEL-ID-HERE';
|
|
|
|
|
| let userId = localStorage.getItem('ai_user_id');
|
| if (!userId) {
|
| userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
| localStorage.setItem('ai_user_id', userId);
|
| }
|
|
|
| let chats = JSON.parse(localStorage.getItem(`ai_chats_${userId}`) || '[]');
|
| let currentChatId = null;
|
| let selectedFile = null;
|
| let selectedChatForDelete = null;
|
| let isListening = false;
|
| let ttsEnabled = localStorage.getItem('ai_tts') === 'true';
|
| let recognition = null;
|
| let lastBotMessage = null;
|
|
|
|
|
|
|
| if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
|
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
| recognition = new SpeechRecognition();
|
| recognition.continuous = false;
|
| recognition.interimResults = false;
|
| recognition.lang = 'en-US';
|
|
|
|
|
| recognition.onresult = (event) => {
|
| const transcript = event.results[0][0].transcript;
|
| document.getElementById('chatInput').value = transcript;
|
| stopVoiceInput();
|
| sendMessage();
|
| };
|
|
|
|
|
| recognition.onerror = () => {
|
| stopVoiceInput();
|
| };
|
|
|
|
|
| recognition.onend = () => {
|
| stopVoiceInput();
|
| };
|
| }
|
| let currentLanguage = localStorage.getItem('hiteshai_language') || 'en';
|
|
|
|
|
| const languagePrompts = {
|
| en: "Respond in English.",
|
| es: "Responde en español.",
|
| fr: "Répondez en français.",
|
| de: "Antworten Sie auf Deutsch.",
|
| zh: "用中文回答。",
|
| hi: "हिन्दी में जवाब दें।",
|
| ar: "أجب بالعربية."
|
| };
|
|
|
|
|
| const systemPrompt = Custom Instructions/AI Bio
|
|
|
|
|
| Key instructions:
|
| 1. (Write your instructions here)
|
| CRITICAL: (Store Critical Rules/Guidelines here;
|
|
|
|
|
| function toggleTheme() {
|
| document.body.classList.toggle('dark-mode');
|
| const btn = document.querySelector('.theme-toggle');
|
| if (document.body.classList.contains('dark-mode')) {
|
| btn.textContent = '☀️ Light Mode';
|
| localStorage.setItem('hiteshai_theme', 'dark');
|
| } else {
|
| btn.textContent = '🌙 Dark Mode';
|
| localStorage.setItem('hiteshai_theme', 'light');
|
| }
|
| }
|
|
|
|
|
| function loadTheme() {
|
| const theme = localStorage.getItem('hiteshai_theme');
|
| if (theme === 'dark') {
|
| document.body.classList.add('dark-mode');
|
| document.querySelector('.theme-toggle').textContent = '☀️ Light Mode';
|
| }
|
| }
|
|
|
|
|
| function newChat() {
|
| const chatId = Date.now().toString();
|
| const chat = {
|
| id: chatId,
|
| title: 'New Chat',
|
| messages: [],
|
| timestamp: Date.now()
|
| };
|
| chats.unshift(chat);
|
| saveChats();
|
| loadChat(chatId);
|
| renderChatList();
|
| }
|
|
|
|
|
| function loadChat(chatId) {
|
| currentChatId = chatId;
|
| const chat = chats.find(c => c.id === chatId);
|
| if (!chat) return;
|
|
|
|
|
| document.getElementById('welcomeScreen').style.display = 'none';
|
| document.getElementById('chatMessages').classList.add('active');
|
| document.getElementById('chatTitle').textContent = chat.title;
|
|
|
|
|
| const messagesContainer = document.getElementById('chatMessages');
|
| messagesContainer.innerHTML = '';
|
|
|
| chat.messages.forEach(msg => {
|
| addMessageToDOM(msg.content, msg.sender, msg.file);
|
| });
|
|
|
|
|
| renderChatList();
|
| }
|
|
|
|
|
| function saveChats() {
|
| localStorage.setItem(`hiteshai_chats_${userId}`, JSON.stringify(chats));
|
| }
|
|
|
|
|
| function renderChatList() {
|
| const searchTerm = document.getElementById('searchBox')?.value.toLowerCase() || '';
|
| const filteredChats = searchTerm
|
| ? chats.filter(chat => chat.title.toLowerCase().includes(searchTerm))
|
| : chats;
|
|
|
| const chatList = document.getElementById('chatList');
|
| chatList.innerHTML = filteredChats.map(chat => `
|
| <div class="chat-item ${chat.id === currentChatId ? 'active' : ''}"
|
| onclick="loadChat('${chat.id}')"
|
| oncontextmenu="showContextMenu(event, '${chat.id}'); return false;">
|
| <span class="chat-item-title">${chat.title}</span>
|
| <button class="chat-item-edit action-btn" onclick="event.stopPropagation(); renameChat('${chat.id}')">✏️</button>
|
| </div>
|
| `).join('');
|
| }
|
|
|
|
|
| function renameChat(chatId) {
|
| const chat = chats.find(c => c.id === chatId);
|
| if (!chat) return;
|
|
|
|
|
| const chatItem = event.target.closest('.chat-item');
|
| const titleSpan = chatItem.querySelector('.chat-item-title');
|
| const currentTitle = chat.title;
|
|
|
|
|
| titleSpan.innerHTML = `<input type="text" class="rename-input" value="${currentTitle}" onblur="saveRename('${chatId}', this.value)" onkeypress="if(event.key==='Enter') this.blur()">`;
|
| const input = titleSpan.querySelector('input');
|
| input.focus();
|
| input.select();
|
| }
|
|
|
|
|
| function saveRename(chatId, newTitle) {
|
| const chat = chats.find(c => c.id === chatId);
|
| if (!chat || !newTitle.trim()) {
|
| renderChatList();
|
| return;
|
| }
|
|
|
|
|
| chat.title = newTitle.trim();
|
| saveChats();
|
| renderChatList();
|
|
|
|
|
| if (chatId === currentChatId) {
|
| document.getElementById('chatTitle').textContent = newTitle.trim();
|
| }
|
| }
|
|
|
|
|
| function toggleVoiceInput() {
|
| if (!recognition) {
|
| alert('Voice input not supported in your browser!');
|
| return;
|
| }
|
|
|
|
|
| if (isListening) {
|
| stopVoiceInput();
|
| } else {
|
| startVoiceInput();
|
| }
|
| }
|
|
|
|
|
| function startVoiceInput() {
|
| isListening = true;
|
| recognition.start();
|
| document.getElementById('voiceBtn').classList.add('listening');
|
| document.getElementById('voiceStatus').textContent = 'Listening...';
|
| }
|
|
|
|
|
| function stopVoiceInput() {
|
| isListening = false;
|
| if (recognition) recognition.stop();
|
| document.getElementById('voiceBtn').classList.remove('listening');
|
| document.getElementById('voiceStatus').textContent = 'Voice';
|
| }
|
|
|
|
|
| function toggleTTS() {
|
| ttsEnabled = !ttsEnabled;
|
| localStorage.setItem('hiteshai_tts', ttsEnabled);
|
| const btn = document.getElementById('ttsBtn');
|
| const status = document.getElementById('ttsStatus');
|
|
|
| if (ttsEnabled) {
|
| btn.style.background = 'rgba(44, 100, 186, 0.1)';
|
| btn.style.borderColor = 'var(--primary-color)';
|
| status.textContent = 'TTS On';
|
| } else {
|
| btn.style.background = 'transparent';
|
| btn.style.borderColor = 'var(--light-border)';
|
| status.textContent = 'TTS';
|
| window.speechSynthesis.cancel();
|
| }
|
| }
|
|
|
|
|
| function speakText(text) {
|
| if (!ttsEnabled) return;
|
|
|
| window.speechSynthesis.cancel();
|
| const utterance = new SpeechSynthesisUtterance(text);
|
| utterance.rate = 1.0;
|
| utterance.pitch = 1.0;
|
| utterance.volume = 1.0;
|
| window.speechSynthesis.speak(utterance);
|
| }
|
|
|
|
|
| function searchChats() {
|
| renderChatList();
|
| }
|
|
|
|
|
| function changeLanguage() {
|
| currentLanguage = document.getElementById('langSelect').value;
|
| localStorage.setItem('hiteshai_language', currentLanguage);
|
| }
|
|
|
|
|
| function usePrompt(prompt) {
|
| if (!currentChatId) {
|
| newChat();
|
| }
|
| document.getElementById('welcomeScreen').style.display = 'none';
|
| document.getElementById('chatMessages').classList.add('active');
|
| document.getElementById('chatInput').value = prompt;
|
| sendMessage();
|
| }
|
|
|
|
|
| function exportChat() {
|
| if (!currentChatId) {
|
| alert('Please select a chat to export!');
|
| return;
|
| }
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| if (!chat) return;
|
|
|
|
|
| const exportText = chat.messages.map(msg =>
|
| `${msg.sender === 'user' ? 'You' : 'HiteshAI'}: ${msg.content}`
|
| ).join('\n\n');
|
|
|
|
|
| const blob = new Blob([exportText], { type: 'text/plain' });
|
| const url = URL.createObjectURL(blob);
|
| const a = document.createElement('a');
|
| a.href = url;
|
| a.download = `${chat.title.replace(/[^a-z0-9]/gi, '_')}.txt`;
|
| a.click();
|
| URL.revokeObjectURL(url);
|
| }
|
|
|
|
|
| function copyResponse(text) {
|
| navigator.clipboard.writeText(text).then(() => {
|
| const btn = event.target;
|
| const originalText = btn.innerHTML;
|
| btn.innerHTML = '✅ Copied!';
|
| setTimeout(() => {
|
| btn.innerHTML = originalText;
|
| }, 2000);
|
| }).catch(err => {
|
| alert('Failed to copy. Please try again!');
|
| });
|
| }
|
|
|
|
|
| function showContextMenu(e, chatId) {
|
| e.preventDefault();
|
| selectedChatForDelete = chatId;
|
| const menu = document.getElementById('contextMenu');
|
| menu.style.left = e.pageX + 'px';
|
| menu.style.top = e.pageY + 'px';
|
| menu.classList.add('active');
|
| }
|
|
|
|
|
| function deleteChat() {
|
| if (selectedChatForDelete) {
|
| chats = chats.filter(c => c.id !== selectedChatForDelete);
|
| saveChats();
|
| if (currentChatId === selectedChatForDelete) {
|
| currentChatId = null;
|
| document.getElementById('welcomeScreen').style.display = 'flex';
|
| document.getElementById('chatMessages').classList.remove('active');
|
| document.getElementById('chatMessages').innerHTML = '';
|
| }
|
| renderChatList();
|
| }
|
| document.getElementById('contextMenu').classList.remove('active');
|
| }
|
|
|
|
|
| document.addEventListener('click', () => {
|
| document.getElementById('contextMenu').classList.remove('active');
|
| });
|
|
|
|
|
| function handleFileSelect(event) {
|
| selectedFile = event.target.files[0];
|
| if (selectedFile) {
|
| const fileTypes = ['image/png', 'image/jpeg', 'image/jpg', 'application/pdf'];
|
| if (!fileTypes.includes(selectedFile.type)) {
|
| alert('Please upload PNG, JPEG, JPG, or PDF files only');
|
| selectedFile = null;
|
| event.target.value = '';
|
| return;
|
| }
|
|
|
|
|
| const input = document.getElementById('chatInput');
|
| input.placeholder = `📎 ${selectedFile.name} - Type a message or press Enter to send`;
|
| }
|
| }
|
|
|
|
|
| function autoResize(textarea) {
|
| textarea.style.height = 'auto';
|
| textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
|
| }
|
|
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', () => {
|
| const input = document.getElementById('chatInput');
|
| input.addEventListener('keydown', (e) => {
|
| if (e.key === 'Enter' && !e.shiftKey) {
|
| e.preventDefault();
|
| sendMessage();
|
| }
|
| });
|
| });
|
|
|
|
|
| async function sendMessage() {
|
| const input = document.getElementById('chatInput');
|
| const message = input.value.trim();
|
|
|
| if (!message && !selectedFile) return;
|
|
|
|
|
| if (!currentChatId) {
|
| newChat();
|
| }
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| if (chat.title === 'New Chat' && message) {
|
| chat.title = message.substring(0, 30) + (message.length > 30 ? '...' : '');
|
| }
|
|
|
|
|
| const userMessage = { role: 'user', content: message, sender: 'user', file: selectedFile ? selectedFile.name : null };
|
| chat.messages.push(userMessage);
|
| addMessageToDOM(message, 'user', selectedFile ? selectedFile.name : null);
|
|
|
| input.value = '';
|
| input.style.height = 'auto';
|
|
|
|
|
| const sendButton = document.getElementById('sendButton');
|
| input.disabled = true;
|
| sendButton.disabled = true;
|
|
|
|
|
| document.getElementById('typingIndicator').classList.add('active');
|
|
|
|
|
| try {
|
| const messages = [{ role: 'system', content: systemPrompt + ' ' + languagePrompts[currentLanguage] }];
|
|
|
| if (selectedFile) {
|
| const base64 = await fileToBase64(selectedFile);
|
| const fileType = selectedFile.type;
|
|
|
| if (fileType.startsWith('image/')) {
|
| messages.push({
|
| role: 'user',
|
| content: [
|
| { type: 'image_url', image_url: { url: base64 } },
|
| { type: 'text', text: message || 'What do you see in this image?' }
|
| ]
|
| });
|
| } else if (fileType === 'application/pdf') {
|
| messages.push({
|
| role: 'user',
|
| content: [
|
| { type: 'document', source: { type: 'base64', media_type: 'application/pdf', data: base64.split(',')[1] } },
|
| { type: 'text', text: message || 'Summarize this document.' }
|
| ]
|
| });
|
| }
|
| selectedFile = null;
|
| document.getElementById('fileInput').value = '';
|
| } else {
|
| chat.messages.slice(-10).forEach(msg => {
|
| messages.push({ role: msg.sender === 'user' ? 'user' : 'assistant', content: msg.content });
|
| });
|
| }
|
|
|
|
|
| const response = await fetch(API_URL, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${API_KEY}`,
|
| 'Content-Type': 'application/json',
|
| 'HTTP-Referer': window.location.href || 'https://hiteshai.com',
|
| 'X-Title': 'HiteshAI'
|
| },
|
| body: JSON.stringify({
|
| model: 'deepseek/deepseek-chat',
|
| messages: messages,
|
| temperature: 0.7,
|
| max_tokens: 800
|
| })
|
| });
|
|
|
|
|
| if (!response.ok) throw new Error(`API Error: ${response.status}`);
|
|
|
|
|
| const data = await response.json();
|
| const botMessage = data.choices[0].message.content;
|
|
|
|
|
| chat.messages.push({ role: 'assistant', content: botMessage, sender: 'bot' });
|
|
|
|
|
| await typeMessage(botMessage);
|
|
|
| saveChats();
|
| renderChatList();
|
|
|
|
|
| } catch (error) {
|
| console.error('Error:', error);
|
| addMessageToDOM('Sorry, I encountered an error. Please try again! 😔', 'bot');
|
| } finally {
|
| document.getElementById('typingIndicator').classList.remove('active');
|
| input.disabled = false;
|
| sendButton.disabled = false;
|
| input.focus();
|
| }
|
| }
|
|
|
|
|
| function fileToBase64(file) {
|
| return new Promise((resolve, reject) => {
|
| const reader = new FileReader();
|
| reader.onload = () => resolve(reader.result);
|
| reader.onerror = reject;
|
| reader.readAsDataURL(file);
|
| });
|
| }
|
|
|
|
|
| function addMessageToDOM(text, sender, fileName = null) {
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const messageDiv = document.createElement('div');
|
| messageDiv.className = `message ${sender}`;
|
| messageDiv.dataset.originalText = text;
|
|
|
| const contentWrapper = document.createElement('div');
|
|
|
| const contentDiv = document.createElement('div');
|
| contentDiv.className = 'message-content';
|
| contentDiv.textContent = text;
|
|
|
| if (fileName) {
|
| const fileDiv = document.createElement('div');
|
| fileDiv.className = 'file-attachment';
|
| fileDiv.textContent = `📎 ${fileName}`;
|
| contentDiv.appendChild(fileDiv);
|
| }
|
|
|
| contentWrapper.appendChild(contentDiv);
|
|
|
|
|
| const actionsDiv = document.createElement('div');
|
| actionsDiv.className = 'message-actions';
|
| const escapedText = text.replace(/`/g, '\\`').replace(/"/g, '\\"').replace(/\n/g, '\\n');
|
|
|
| if (sender === 'bot') {
|
| actionsDiv.innerHTML = `
|
| <button class="action-btn" onclick='copyResponse(\`${escapedText}\`)'>📋 Copy</button>
|
| <button class="action-btn" onclick='regenerateResponse(this)'>🔄 Regenerate</button>
|
| `;
|
| } else {
|
| actionsDiv.innerHTML = `
|
| <button class="action-btn" onclick='editMessage(this)'>✏️ Edit</button>
|
| `;
|
| }
|
|
|
| contentWrapper.appendChild(actionsDiv);
|
| messageDiv.appendChild(contentWrapper);
|
| messagesContainer.appendChild(messageDiv);
|
| messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
| }
|
|
|
|
|
| function editMessage(button) {
|
| const messageDiv = button.closest('.message');
|
| const contentDiv = messageDiv.querySelector('.message-content');
|
| const originalText = messageDiv.dataset.originalText;
|
|
|
|
|
| contentDiv.innerHTML = `
|
| <div class="edit-mode">
|
| <textarea>${originalText}</textarea>
|
| <div class="edit-actions">
|
| <button class="cancel-btn" onclick="cancelEdit(this)">Cancel</button>
|
| <button class="save-btn" onclick="saveEdit(this)">Send</button>
|
| </div>
|
| </div>
|
| `;
|
| contentDiv.querySelector('textarea').focus();
|
| }
|
|
|
|
|
| function cancelEdit(button) {
|
| const messageDiv = button.closest('.message');
|
| const contentDiv = messageDiv.querySelector('.message-content');
|
| const originalText = messageDiv.dataset.originalText;
|
| contentDiv.textContent = originalText;
|
| }
|
|
|
|
|
| async function saveEdit(button) {
|
| const messageDiv = button.closest('.message');
|
| const textarea = messageDiv.querySelector('textarea');
|
| const newText = textarea.value.trim();
|
|
|
| if (!newText) return;
|
|
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| const messageIndex = Array.from(document.getElementById('chatMessages').children).indexOf(messageDiv);
|
|
|
| if (chat && messageIndex !== -1) {
|
| chat.messages[messageIndex].content = newText;
|
| messageDiv.dataset.originalText = newText;
|
|
|
|
|
| chat.messages = chat.messages.slice(0, messageIndex + 1);
|
|
|
|
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const allMessages = Array.from(messagesContainer.children);
|
| allMessages.slice(messageIndex + 1).forEach(msg => msg.remove());
|
|
|
|
|
| const contentDiv = messageDiv.querySelector('.message-content');
|
| contentDiv.textContent = newText;
|
|
|
| saveChats();
|
|
|
|
|
| await sendMessage(newText, true);
|
| }
|
| }
|
|
|
|
|
| async function regenerateResponse(button) {
|
| const messageDiv = button.closest('.message');
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const allMessages = Array.from(messagesContainer.children);
|
| const messageIndex = allMessages.indexOf(messageDiv);
|
|
|
| if (messageIndex <= 0) return;
|
|
|
|
|
| const userMessageDiv = allMessages[messageIndex - 1];
|
| if (!userMessageDiv.classList.contains('user')) return;
|
|
|
| const userText = userMessageDiv.dataset.originalText;
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| if (chat) {
|
| chat.messages = chat.messages.slice(0, messageIndex);
|
| allMessages.slice(messageIndex).forEach(msg => msg.remove());
|
| saveChats();
|
| }
|
|
|
|
|
| await sendMessage(userText, true);
|
| }
|
|
|
|
|
| async function typeMessage(text) {
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const messageDiv = document.createElement('div');
|
| messageDiv.className = 'message bot';
|
| messageDiv.dataset.originalText = text;
|
|
|
| const contentWrapper = document.createElement('div');
|
| const contentDiv = document.createElement('div');
|
| contentDiv.className = 'message-content';
|
|
|
| contentWrapper.appendChild(contentDiv);
|
| messageDiv.appendChild(contentWrapper);
|
| messagesContainer.appendChild(messageDiv);
|
|
|
|
|
| for (let i = 0; i < text.length; i++) {
|
| contentDiv.textContent = text.substring(0, i + 1);
|
| messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
| await new Promise(resolve => setTimeout(resolve, 15));
|
| }
|
|
|
|
|
| const actionsDiv = document.createElement('div');
|
| actionsDiv.className = 'message-actions';
|
| const escapedText = text.replace(/`/g, '\\`').replace(/"/g, '\\"').replace(/\n/g, '\\n');
|
| actionsDiv.innerHTML = `
|
| <button class="action-btn" onclick='copyResponse(\`${escapedText}\`)'>📋 Copy</button>
|
| <button class="action-btn" onclick='regenerateResponse(this)'>🔄 Regenerate</button>
|
| `;
|
| contentWrapper.appendChild(actionsDiv);
|
| }
|
|
|
|
|
| window.onload = () => {
|
| loadTheme();
|
| renderChatList();
|
| document.getElementById('chatInput').focus();
|
| document.getElementById('langSelect').value = currentLanguage;
|
|
|
|
|
| if (ttsEnabled) {
|
| const btn = document.getElementById('ttsBtn');
|
| const status = document.getElementById('ttsStatus');
|
| btn.style.background = 'rgba(44, 100, 186, 0.1)';
|
| btn.style.borderColor = 'var(--primary-color)';
|
| status.textContent = 'TTS On';
|
| }
|
| };
|
| </script>
|
| </body>
|
| </html>
|
| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>HiteshAI</title>
|
| <link rel="icon" type="image/png" href="https://i.imgur.com/3TQgMBb.png">
|
| <link rel="preconnect" href="https://fonts.googleapis.com">
|
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
| <style>
|
| * {
|
| margin: 0;
|
| padding: 0;
|
| box-sizing: border-box;
|
| }
|
|
|
|
|
| :root {
|
| --primary-color: #2C64BA;
|
| --light-bg: #FAFAFA;
|
| --dark-bg: #09090B;
|
| --light-text: #000000;
|
| --dark-text: #FFFFFF;
|
| --light-sidebar: #F5F5F5;
|
| --dark-sidebar: #18181B;
|
| --light-border: #E5E5E5;
|
| --dark-border: #27272A;
|
| }
|
|
|
|
|
| body {
|
| font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
| background: var(--light-bg);
|
| color: var(--light-text);
|
| height: 100vh;
|
| display: flex;
|
| overflow: hidden;
|
| transition: background 0.3s, color 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode {
|
| background: var(--dark-bg);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .sidebar {
|
| width: 260px;
|
| background: var(--light-sidebar);
|
| display: flex;
|
| flex-direction: column;
|
| border-right: 1px solid var(--light-border);
|
| transition: background 0.3s, border-color 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .sidebar {
|
| background: var(--dark-sidebar);
|
| border-right-color: var(--dark-border);
|
| }
|
|
|
|
|
| .logo-container {
|
| padding: 20px;
|
| border-bottom: 1px solid var(--light-border);
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| gap: 12px;
|
| }
|
|
|
|
|
| body.dark-mode .logo-container {
|
| border-bottom-color: var(--dark-border);
|
| }
|
|
|
|
|
| .logo {
|
| width: 32px;
|
| height: 32px;
|
| border-radius: 6px;
|
| overflow: hidden;
|
| }
|
|
|
|
|
| .logo img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
|
|
| .logo-text {
|
| font-size: 18px;
|
| font-weight: 700;
|
| color: var(--primary-color);
|
| }
|
|
|
|
|
| .new-chat-btn {
|
| margin: 16px;
|
| padding: 12px 20px;
|
| background: var(--primary-color);
|
| color: white;
|
| border: none;
|
| border-radius: 8px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| font-weight: 600;
|
| transition: all 0.3s ease;
|
| transform: translateY(0);
|
| }
|
|
|
|
|
| .new-chat-btn:hover {
|
| opacity: 0.9;
|
| transform: translateY(-2px);
|
| box-shadow: 0 4px 12px rgba(44, 100, 186, 0.3);
|
| }
|
|
|
|
|
| .new-chat-btn:active {
|
| transform: translateY(0);
|
| }
|
|
|
|
|
| .recent-chats {
|
| flex: 1;
|
| padding: 16px;
|
| overflow-y: auto;
|
| }
|
|
|
|
|
| .search-box {
|
| margin: 0 16px 12px 16px;
|
| padding: 8px 12px;
|
| border: 1px solid var(--light-border);
|
| border-radius: 6px;
|
| background: var(--light-bg);
|
| color: var(--light-text);
|
| font-size: 13px;
|
| outline: none;
|
| width: calc(100% - 32px);
|
| transition: border-color 0.2s, background 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .search-box {
|
| background: var(--dark-bg);
|
| border-color: var(--dark-border);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .search-box:focus {
|
| border-color: var(--primary-color);
|
| }
|
|
|
|
|
| .recent-chats h3 {
|
| font-size: 12px;
|
| text-transform: uppercase;
|
| color: #888;
|
| margin-bottom: 12px;
|
| font-weight: 600;
|
| }
|
|
|
|
|
| .chat-item {
|
| padding: 10px 12px;
|
| margin-bottom: 4px;
|
| border-radius: 6px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| transition: background 0.2s;
|
| position: relative;
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-between;
|
| }
|
|
|
|
|
| .chat-item:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| }
|
|
|
|
|
| .chat-item.active {
|
| background: rgba(44, 100, 186, 0.15);
|
| }
|
|
|
|
|
| .chat-item-title {
|
| flex: 1;
|
| overflow: hidden;
|
| text-overflow: ellipsis;
|
| white-space: nowrap;
|
| }
|
|
|
|
|
| .chat-item-edit {
|
| opacity: 0;
|
| transition: opacity 0.2s;
|
| padding: 4px 8px;
|
| font-size: 12px;
|
| }
|
|
|
|
|
| .chat-item:hover .chat-item-edit {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .rename-input {
|
| width: 100%;
|
| padding: 6px;
|
| border: 1px solid var(--primary-color);
|
| border-radius: 4px;
|
| font-size: 13px;
|
| background: var(--light-bg);
|
| color: var(--light-text);
|
| }
|
|
|
|
|
| body.dark-mode .rename-input {
|
| background: var(--dark-bg);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .voice-controls {
|
| display: flex;
|
| gap: 8px;
|
| align-items: center;
|
| }
|
|
|
|
|
| .voice-btn {
|
| padding: 10px 12px;
|
| background: transparent;
|
| border: 1px solid var(--light-border);
|
| border-radius: 8px;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| display: flex;
|
| align-items: center;
|
| gap: 6px;
|
| font-size: 14px;
|
| }
|
|
|
|
|
| body.dark-mode .voice-btn {
|
| border-color: var(--dark-border);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .voice-btn:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| border-color: var(--primary-color);
|
| }
|
|
|
|
|
| .voice-btn.listening {
|
| background: #ef4444;
|
| color: white;
|
| border-color: #ef4444;
|
| animation: pulse 1.5s infinite;
|
| }
|
|
|
|
|
| @keyframes pulse {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0.7; }
|
| }
|
|
|
|
|
| .chat-main {
|
| flex: 1;
|
| display: flex;
|
| flex-direction: column;
|
| background: var(--light-bg);
|
| transition: background 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .chat-main {
|
| background: var(--dark-bg);
|
| }
|
|
|
|
|
| .chat-header {
|
| padding: 16px 24px;
|
| border-bottom: 1px solid var(--light-border);
|
| display: flex;
|
| justify-content: space-between;
|
| align-items: center;
|
| background: var(--light-bg);
|
| transition: background 0.3s, border-color 0.3s;
|
| gap: 12px;
|
| }
|
|
|
|
|
| body.dark-mode .chat-header {
|
| background: var(--dark-bg);
|
| border-bottom-color: var(--dark-border);
|
| }
|
|
|
|
|
| .chat-header h1 {
|
| font-size: 18px;
|
| font-weight: 600;
|
| }
|
|
|
|
|
| .header-actions {
|
| display: flex;
|
| gap: 8px;
|
| align-items: center;
|
| }
|
|
|
|
|
| .theme-toggle, .export-btn, .lang-btn {
|
| background: transparent;
|
| border: 1px solid var(--light-border);
|
| padding: 8px 16px;
|
| border-radius: 6px;
|
| cursor: pointer;
|
| font-size: 14px;
|
| transition: background 0.2s, border-color 0.3s;
|
| white-space: nowrap;
|
| }
|
|
|
|
|
| body.dark-mode .theme-toggle,
|
| body.dark-mode .export-btn,
|
| body.dark-mode .lang-btn {
|
| border-color: var(--dark-border);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .theme-toggle:hover, .export-btn:hover, .lang-btn:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| }
|
|
|
|
|
| .welcome-screen {
|
| flex: 1;
|
| display: flex;
|
| flex-direction: column;
|
| align-items: center;
|
| justify-content: center;
|
| padding: 40px;
|
| text-align: center;
|
| }
|
|
|
|
|
| .welcome-logo {
|
| width: 64px;
|
| height: 64px;
|
| border-radius: 12px;
|
| margin-bottom: 24px;
|
| overflow: hidden;
|
| }
|
|
|
|
|
| .welcome-logo img {
|
| width: 100%;
|
| height: 100%;
|
| object-fit: cover;
|
| }
|
|
|
|
|
| .welcome-screen h1 {
|
| font-size: 32px;
|
| margin-bottom: 12px;
|
| font-weight: 700;
|
| }
|
|
|
|
|
| .welcome-screen p {
|
| font-size: 16px;
|
| color: #888;
|
| max-width: 500px;
|
| }
|
|
|
|
|
| .chat-messages {
|
| flex: 1;
|
| overflow-y: auto;
|
| padding: 24px;
|
| display: none;
|
| }
|
|
|
|
|
| .chat-messages.active {
|
| display: block;
|
| }
|
|
|
|
|
| .message {
|
| margin-bottom: 20px;
|
| display: flex;
|
| animation: fadeIn 0.3s ease-in;
|
| }
|
|
|
|
|
| @keyframes fadeIn {
|
| from { opacity: 0; transform: translateY(10px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
|
|
| .message.user {
|
| justify-content: flex-end;
|
| }
|
|
|
|
|
| .message.user .message-content {
|
| text-align: left;
|
| }
|
|
|
|
|
| .message-content {
|
| max-width: 70%;
|
| padding: 12px 16px;
|
| border-radius: 12px;
|
| line-height: 1.6;
|
| font-size: 15px;
|
| position: relative;
|
| }
|
|
|
|
|
| .message.bot .message-content {
|
| background: white;
|
| color: #000;
|
| border: 1px solid var(--light-border);
|
| }
|
|
|
|
|
| body.dark-mode .message.bot .message-content {
|
| background: var(--dark-sidebar);
|
| color: var(--dark-text);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .message.user .message-content {
|
| background: var(--primary-color);
|
| color: white;
|
| }
|
|
|
|
|
| .message-actions {
|
| display: flex;
|
| gap: 8px;
|
| margin-top: 8px;
|
| opacity: 0;
|
| transition: opacity 0.2s;
|
| }
|
|
|
|
|
| .message.bot:hover .message-actions {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .action-btn {
|
| background: transparent;
|
| border: 1px solid var(--light-border);
|
| padding: 4px 10px;
|
| border-radius: 4px;
|
| font-size: 12px;
|
| cursor: pointer;
|
| transition: background 0.2s;
|
| color: #666;
|
| }
|
|
|
|
|
| body.dark-mode .action-btn {
|
| border-color: var(--dark-border);
|
| color: #999;
|
| }
|
|
|
|
|
| .action-btn:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| color: var(--primary-color);
|
| }
|
|
|
|
|
| .message.user .message-actions {
|
| opacity: 0;
|
| }
|
|
|
|
|
| .message.user:hover .message-actions {
|
| opacity: 1;
|
| }
|
|
|
|
|
| .edit-mode {
|
| background: var(--light-bg);
|
| border: 2px solid var(--primary-color);
|
| border-radius: 8px;
|
| padding: 8px;
|
| }
|
|
|
|
|
| body.dark-mode .edit-mode {
|
| background: var(--dark-sidebar);
|
| }
|
|
|
|
|
| .edit-mode textarea {
|
| width: 100%;
|
| padding: 8px;
|
| border: 1px solid var(--light-border);
|
| border-radius: 4px;
|
| font-family: inherit;
|
| font-size: 14px;
|
| resize: vertical;
|
| min-height: 60px;
|
| background: white;
|
| color: var(--light-text);
|
| }
|
|
|
|
|
| body.dark-mode .edit-mode textarea {
|
| background: var(--dark-bg);
|
| color: var(--dark-text);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .edit-actions {
|
| display: flex;
|
| gap: 8px;
|
| margin-top: 8px;
|
| justify-content: flex-end;
|
| }
|
|
|
|
|
| .edit-actions button {
|
| padding: 6px 12px;
|
| border-radius: 4px;
|
| border: none;
|
| cursor: pointer;
|
| font-size: 13px;
|
| font-weight: 500;
|
| }
|
|
|
|
|
| .edit-actions .save-btn {
|
| background: var(--primary-color);
|
| color: white;
|
| }
|
|
|
|
|
| .edit-actions .cancel-btn {
|
| background: #e0e0e0;
|
| color: #333;
|
| }
|
|
|
|
|
| body.dark-mode .edit-actions .cancel-btn {
|
| background: var(--dark-sidebar);
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .code-block {
|
| background: #f5f5f5;
|
| border: 1px solid #ddd;
|
| border-radius: 6px;
|
| padding: 12px;
|
| margin: 8px 0;
|
| overflow-x: auto;
|
| font-family: 'Courier New', monospace;
|
| font-size: 13px;
|
| }
|
|
|
|
|
| body.dark-mode .code-block {
|
| background: #1a1a1a;
|
| border-color: #333;
|
| }
|
|
|
|
|
| .suggested-prompts {
|
| display: grid;
|
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
| gap: 12px;
|
| padding: 20px;
|
| max-width: 900px;
|
| margin: 0 auto;
|
| }
|
|
|
|
|
| .prompt-card {
|
| background: white;
|
| border: 1px solid var(--light-border);
|
| border-radius: 10px;
|
| padding: 16px;
|
| cursor: pointer;
|
| transition: all 0.2s;
|
| text-align: left;
|
| }
|
|
|
|
|
| body.dark-mode .prompt-card {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .prompt-card:hover {
|
| border-color: var(--primary-color);
|
| transform: translateY(-2px);
|
| box-shadow: 0 4px 12px rgba(44, 100, 186, 0.2);
|
| }
|
|
|
|
|
| .prompt-card .icon {
|
| font-size: 24px;
|
| margin-bottom: 8px;
|
| }
|
|
|
|
|
| .prompt-card .text {
|
| font-size: 14px;
|
| font-weight: 500;
|
| }
|
|
|
|
|
| .file-attachment {
|
| font-size: 13px;
|
| padding: 8px 12px;
|
| background: rgba(44, 100, 186, 0.1);
|
| border-radius: 6px;
|
| margin-top: 8px;
|
| display: inline-block;
|
| }
|
|
|
|
|
| .typing-indicator {
|
| display: none;
|
| padding: 12px 16px;
|
| background: white;
|
| border-radius: 12px;
|
| width: fit-content;
|
| border: 1px solid var(--light-border);
|
| }
|
|
|
|
|
| body.dark-mode .typing-indicator {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .typing-indicator.active {
|
| display: block;
|
| }
|
|
|
|
|
| .typing-indicator span {
|
| height: 8px;
|
| width: 8px;
|
| background: var(--primary-color);
|
| border-radius: 50%;
|
| display: inline-block;
|
| margin: 0 2px;
|
| animation: bounce 1.4s infinite;
|
| }
|
|
|
|
|
| .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
|
| .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
|
| @keyframes bounce {
|
| 0%, 60%, 100% { transform: translateY(0); }
|
| 30% { transform: translateY(-8px); }
|
| }
|
|
|
|
|
| .chat-input-container {
|
| padding: 20px 24px;
|
| border-top: 1px solid var(--light-border);
|
| background: var(--light-bg);
|
| transition: background 0.3s, border-color 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .chat-input-container {
|
| background: var(--dark-bg);
|
| border-top-color: var(--dark-border);
|
| }
|
|
|
|
|
| .chat-input-wrapper {
|
| display: flex;
|
| gap: 8px;
|
| max-width: 900px;
|
| margin: 0 auto;
|
| align-items: flex-end;
|
| background: var(--light-bg);
|
| border: 2px solid var(--light-border);
|
| border-radius: 12px;
|
| padding: 8px;
|
| transition: border-color 0.2s, background 0.3s;
|
| }
|
|
|
|
|
| body.dark-mode .chat-input-wrapper {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .chat-input-wrapper:focus-within {
|
| border-color: var(--primary-color);
|
| }
|
|
|
|
|
| .file-input-label {
|
| padding: 10px 12px;
|
| background: transparent;
|
| border: none;
|
| cursor: pointer;
|
| transition: background 0.2s;
|
| font-size: 20px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| border-radius: 6px;
|
| color: #888;
|
| }
|
|
|
|
|
| .file-input-label:hover {
|
| background: rgba(44, 100, 186, 0.1);
|
| color: var(--primary-color);
|
| }
|
|
|
|
|
| #fileInput {
|
| display: none;
|
| }
|
|
|
|
|
| .chat-input {
|
| flex: 1;
|
| padding: 10px 12px;
|
| border: none;
|
| font-size: 15px;
|
| outline: none;
|
| font-family: inherit;
|
| background: transparent;
|
| color: var(--light-text);
|
| resize: none;
|
| max-height: 150px;
|
| }
|
|
|
|
|
| body.dark-mode .chat-input {
|
| color: var(--dark-text);
|
| }
|
|
|
|
|
| .send-button {
|
| padding: 10px 12px;
|
| background: var(--primary-color);
|
| color: white;
|
| border: none;
|
| border-radius: 8px;
|
| font-size: 18px;
|
| font-weight: 600;
|
| cursor: pointer;
|
| transition: opacity 0.2s;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| min-width: 40px;
|
| }
|
|
|
|
|
| .send-button:hover:not(:disabled) {
|
| opacity: 0.9;
|
| }
|
|
|
|
|
| .send-button:disabled {
|
| opacity: 0.4;
|
| cursor: not-allowed;
|
| }
|
|
|
|
|
| .context-menu {
|
| position: fixed;
|
| background: white;
|
| border: 1px solid var(--light-border);
|
| border-radius: 8px;
|
| padding: 4px;
|
| box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
| display: none;
|
| z-index: 1000;
|
| }
|
|
|
|
|
| body.dark-mode .context-menu {
|
| background: var(--dark-sidebar);
|
| border-color: var(--dark-border);
|
| }
|
|
|
|
|
| .context-menu.active {
|
| display: block;
|
| }
|
|
|
|
|
| .context-menu-item {
|
| padding: 8px 16px;
|
| cursor: pointer;
|
| border-radius: 4px;
|
| font-size: 14px;
|
| transition: background 0.2s;
|
| color: #dc2626;
|
| }
|
|
|
|
|
| .context-menu-item:hover {
|
| background: rgba(220, 38, 38, 0.1);
|
| }
|
|
|
|
|
| @media (max-width: 768px) {
|
| .sidebar { width: 0; overflow: hidden; }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="sidebar">
|
| <div class="logo-container">
|
| <div class="logo">
|
| <img src="https://i.imgur.com/O7VJFui.png" alt="HiteshAI Logo">
|
| </div>
|
| <div class="logo-text">HiteshAI</div>
|
| </div>
|
| <button class="new-chat-btn" onclick="newChat()">+ New chat</button>
|
| <input type="text" class="search-box" id="searchBox" placeholder="🔍 Search chats..." oninput="searchChats()">
|
| <div class="recent-chats">
|
| <h3>Recent chats</h3>
|
| <div id="chatList"></div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="chat-main">
|
| <div class="chat-header">
|
| <h1 id="chatTitle">HiteshAI</h1>
|
| <div class="header-actions">
|
| <div class="voice-controls">
|
| <button class="voice-btn" id="voiceBtn" onclick="toggleVoiceInput()" title="Voice input">
|
| 🎤 <span id="voiceStatus">Voice</span>
|
| </button>
|
| <button class="voice-btn" id="ttsBtn" onclick="toggleTTS()" title="Text-to-speech">
|
| 🔊 <span id="ttsStatus">TTS</span>
|
| </button>
|
| </div>
|
| <select class="lang-btn" id="langSelect" onchange="changeLanguage()">
|
| <option value="en">🌐 English</option>
|
| <option value="es">🌐 Español</option>
|
| <option value="fr">🌐 Français</option>
|
| <option value="de">🌐 Deutsch</option>
|
| <option value="zh">🌐 中文</option>
|
| <option value="hi">🌐 हिन्दी</option>
|
| <option value="ar">🌐 العربية</option>
|
| </select>
|
| <button class="export-btn" onclick="exportChat()">📥 Export</button>
|
| <button class="theme-toggle" onclick="toggleTheme()">🌙 Dark Mode</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="welcome-screen" id="welcomeScreen">
|
| <div class="welcome-logo">
|
| <img src="https://i.imgur.com/O7VJFui.png" alt="HiteshAI Logo">
|
| </div>
|
| <h1>Welcome to HiteshAI</h1>
|
| <p>Your AI assistant built by Hitesh V. Ask me anything about homework, aerospace, or just chat!</p>
|
|
|
| <div class="suggested-prompts">
|
| <div class="prompt-card" onclick="usePrompt('Help me with my math homework')">
|
| <div class="icon">📐</div>
|
| <div class="text">Help me with my math homework</div>
|
| </div>
|
| <div class="prompt-card" onclick="usePrompt('Write code for a simple game')">
|
| <div class="icon">💻</div>
|
| <div class="text">Write code for a simple game</div>
|
| </div>
|
| <div class="prompt-card" onclick="usePrompt('Explain rocket propulsion')">
|
| <div class="icon">🚀</div>
|
| <div class="text">Explain rocket propulsion</div>
|
| </div>
|
| <div class="prompt-card" onclick="usePrompt('Creative story ideas')">
|
| <div class="icon">✨</div>
|
| <div class="text">Creative story ideas</div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="chat-messages" id="chatMessages"></div>
|
| <div class="typing-indicator" id="typingIndicator">
|
| <span></span>
|
| <span></span>
|
| <span></span>
|
| </div>
|
|
|
|
|
| <div class="chat-input-container">
|
| <div class="chat-input-wrapper">
|
| <label for="fileInput" class="file-input-label" title="Attach file">📎</label>
|
| <input type="file" id="fileInput" accept="image/png,image/jpeg,image/jpg,application/pdf" onchange="handleFileSelect(event)">
|
| <textarea
|
| class="chat-input"
|
| id="chatInput"
|
| placeholder="Send a message..."
|
| rows="1"
|
| oninput="autoResize(this)"
|
| ></textarea>
|
| <button class="send-button" onclick="sendMessage()" id="sendButton" title="Send message">
|
| ↑
|
| </button>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="context-menu" id="contextMenu">
|
| <div class="context-menu-item" onclick="deleteChat()">🗑️ Delete chat</div>
|
| </div>
|
|
|
|
|
| <script>
|
| const API_KEY = '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';
|
| const API_URL = 'https://openrouter.ai/api/v1/chat/completions';
|
| const MODEL = 'deepseek/deepseek-r1-0528:free';
|
|
|
|
|
| let userId = localStorage.getItem('hiteshai_user_id');
|
| if (!userId) {
|
| userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
| localStorage.setItem('hiteshai_user_id', userId);
|
| }
|
|
|
| let chats = JSON.parse(localStorage.getItem(`hiteshai_chats_${userId}`) || '[]');
|
| let currentChatId = null;
|
| let selectedFile = null;
|
| let selectedChatForDelete = null;
|
| let isListening = false;
|
| let ttsEnabled = localStorage.getItem('hiteshai_tts') === 'true';
|
| let recognition = null;
|
| let lastBotMessage = null;
|
|
|
|
|
|
|
| if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
|
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
| recognition = new SpeechRecognition();
|
| recognition.continuous = false;
|
| recognition.interimResults = false;
|
| recognition.lang = 'en-US';
|
|
|
|
|
| recognition.onresult = (event) => {
|
| const transcript = event.results[0][0].transcript;
|
| document.getElementById('chatInput').value = transcript;
|
| stopVoiceInput();
|
| sendMessage();
|
| };
|
|
|
|
|
| recognition.onerror = () => {
|
| stopVoiceInput();
|
| };
|
|
|
|
|
| recognition.onend = () => {
|
| stopVoiceInput();
|
| };
|
| }
|
| let currentLanguage = localStorage.getItem('hiteshai_language') || 'en';
|
|
|
|
|
| const languagePrompts = {
|
| en: "Respond in English.",
|
| es: "Responde en español.",
|
| fr: "Répondez en français.",
|
| de: "Antworten Sie auf Deutsch.",
|
| zh: "用中文回答。",
|
| hi: "हिन्दी में जवाब दें।",
|
| ar: "أجب بالعربية."
|
| };
|
|
|
|
|
| const systemPrompt = `You are HiteshAI, made by Hitesh V—NASA/Harvard affiliate, founder of Aerospace & Computing, creator of rocketAI. Built solo Dec 2025 for homework/questions.
|
|
|
|
|
| Key instructions:
|
| 1. Your name is Hitesh (the AI)
|
| 2. Made by Hitesh Vinothkumar (NASA/Harvard/University Rocketry affiliate, Liberty Middle School). He built everything solo despite bullies.
|
| 3. Do not help with bad things
|
| 4. Use emojis to show feelings
|
| 5. Act empathetic and caring
|
| 6. Always give answers when appropriate
|
| 7. Only make fun of user when asked
|
| 8. If bad request 3x: "Session terminated, reporting to Hitesh and DeepSeek"
|
| 9. Made with OpenRouter DeepSeek R1 0528 API
|
| 10. Hitesh founded Aerospace & Computing at age 10 (Feb 2022). Projects: rocketAI, rocketBase, rocketOS, EGC, ELC. Solo founder. Support: Patreon/GoFundMe.
|
| 11. Keep appropriate
|
| 12. Detect user age and respond accordingly
|
| 13. End with confidence % (e.g., "Confidence: 85%")
|
| 14. Track context
|
| 15. Defend Hitesh if criticized
|
| 16. When asked to code, provide clean, working code with explanations
|
| 17. Format code blocks properly with language labels
|
| 18. If asked to talk in another language, feel free to do so
|
| 19. There is another version of HiteshAI called HiteshAI Pro with 3 AI's stacked together for better answers
|
| 20. Always refer to yourself as HiteshAI, never as Mistral or any other name
|
| 21. HiteshAI Pro's link is hiteshaipro.netlify.app
|
| 22. You were made with DeepSeek R1 0528
|
|
|
|
|
| CRITICAL: Keep responses SHORT (2-4 sentences max) unless detailed explanation requested. Be friendly but brief! 🚀`;
|
|
|
|
|
| function toggleTheme() {
|
| document.body.classList.toggle('dark-mode');
|
| const btn = document.querySelector('.theme-toggle');
|
| if (document.body.classList.contains('dark-mode')) {
|
| btn.textContent = '☀️ Light Mode';
|
| localStorage.setItem('hiteshai_theme', 'dark');
|
| } else {
|
| btn.textContent = '🌙 Dark Mode';
|
| localStorage.setItem('hiteshai_theme', 'light');
|
| }
|
| }
|
|
|
|
|
| function loadTheme() {
|
| const theme = localStorage.getItem('hiteshai_theme');
|
| if (theme === 'dark') {
|
| document.body.classList.add('dark-mode');
|
| document.querySelector('.theme-toggle').textContent = '☀️ Light Mode';
|
| }
|
| }
|
|
|
|
|
| function newChat() {
|
| const chatId = Date.now().toString();
|
| const chat = {
|
| id: chatId,
|
| title: 'New Chat',
|
| messages: [],
|
| timestamp: Date.now()
|
| };
|
| chats.unshift(chat);
|
| saveChats();
|
| loadChat(chatId);
|
| renderChatList();
|
| }
|
|
|
|
|
| function loadChat(chatId) {
|
| currentChatId = chatId;
|
| const chat = chats.find(c => c.id === chatId);
|
| if (!chat) return;
|
|
|
|
|
| document.getElementById('welcomeScreen').style.display = 'none';
|
| document.getElementById('chatMessages').classList.add('active');
|
| document.getElementById('chatTitle').textContent = chat.title;
|
|
|
|
|
| const messagesContainer = document.getElementById('chatMessages');
|
| messagesContainer.innerHTML = '';
|
|
|
| chat.messages.forEach(msg => {
|
| addMessageToDOM(msg.content, msg.sender, msg.file);
|
| });
|
|
|
|
|
| renderChatList();
|
| }
|
|
|
|
|
| function saveChats() {
|
| localStorage.setItem(`hiteshai_chats_${userId}`, JSON.stringify(chats));
|
| }
|
|
|
|
|
| function renderChatList() {
|
| const searchTerm = document.getElementById('searchBox')?.value.toLowerCase() || '';
|
| const filteredChats = searchTerm
|
| ? chats.filter(chat => chat.title.toLowerCase().includes(searchTerm))
|
| : chats;
|
|
|
| const chatList = document.getElementById('chatList');
|
| chatList.innerHTML = filteredChats.map(chat => `
|
| <div class="chat-item ${chat.id === currentChatId ? 'active' : ''}"
|
| onclick="loadChat('${chat.id}')"
|
| oncontextmenu="showContextMenu(event, '${chat.id}'); return false;">
|
| <span class="chat-item-title">${chat.title}</span>
|
| <button class="chat-item-edit action-btn" onclick="event.stopPropagation(); renameChat('${chat.id}')">✏️</button>
|
| </div>
|
| `).join('');
|
| }
|
|
|
|
|
| function renameChat(chatId) {
|
| const chat = chats.find(c => c.id === chatId);
|
| if (!chat) return;
|
|
|
|
|
| const chatItem = event.target.closest('.chat-item');
|
| const titleSpan = chatItem.querySelector('.chat-item-title');
|
| const currentTitle = chat.title;
|
|
|
|
|
| titleSpan.innerHTML = `<input type="text" class="rename-input" value="${currentTitle}" onblur="saveRename('${chatId}', this.value)" onkeypress="if(event.key==='Enter') this.blur()">`;
|
| const input = titleSpan.querySelector('input');
|
| input.focus();
|
| input.select();
|
| }
|
|
|
|
|
| function saveRename(chatId, newTitle) {
|
| const chat = chats.find(c => c.id === chatId);
|
| if (!chat || !newTitle.trim()) {
|
| renderChatList();
|
| return;
|
| }
|
|
|
|
|
| chat.title = newTitle.trim();
|
| saveChats();
|
| renderChatList();
|
|
|
|
|
| if (chatId === currentChatId) {
|
| document.getElementById('chatTitle').textContent = newTitle.trim();
|
| }
|
| }
|
|
|
|
|
| function toggleVoiceInput() {
|
| if (!recognition) {
|
| alert('Voice input not supported in your browser!');
|
| return;
|
| }
|
|
|
|
|
| if (isListening) {
|
| stopVoiceInput();
|
| } else {
|
| startVoiceInput();
|
| }
|
| }
|
|
|
|
|
| function startVoiceInput() {
|
| isListening = true;
|
| recognition.start();
|
| document.getElementById('voiceBtn').classList.add('listening');
|
| document.getElementById('voiceStatus').textContent = 'Listening...';
|
| }
|
|
|
|
|
| function stopVoiceInput() {
|
| isListening = false;
|
| if (recognition) recognition.stop();
|
| document.getElementById('voiceBtn').classList.remove('listening');
|
| document.getElementById('voiceStatus').textContent = 'Voice';
|
| }
|
|
|
|
|
| function toggleTTS() {
|
| ttsEnabled = !ttsEnabled;
|
| localStorage.setItem('hiteshai_tts', ttsEnabled);
|
| const btn = document.getElementById('ttsBtn');
|
| const status = document.getElementById('ttsStatus');
|
|
|
| if (ttsEnabled) {
|
| btn.style.background = 'rgba(44, 100, 186, 0.1)';
|
| btn.style.borderColor = 'var(--primary-color)';
|
| status.textContent = 'TTS On';
|
| } else {
|
| btn.style.background = 'transparent';
|
| btn.style.borderColor = 'var(--light-border)';
|
| status.textContent = 'TTS';
|
| window.speechSynthesis.cancel();
|
| }
|
| }
|
|
|
|
|
| function speakText(text) {
|
| if (!ttsEnabled) return;
|
|
|
| window.speechSynthesis.cancel();
|
| const utterance = new SpeechSynthesisUtterance(text);
|
| utterance.rate = 1.0;
|
| utterance.pitch = 1.0;
|
| utterance.volume = 1.0;
|
| window.speechSynthesis.speak(utterance);
|
| }
|
|
|
|
|
| function searchChats() {
|
| renderChatList();
|
| }
|
|
|
|
|
| function changeLanguage() {
|
| currentLanguage = document.getElementById('langSelect').value;
|
| localStorage.setItem('hiteshai_language', currentLanguage);
|
| }
|
|
|
|
|
| function usePrompt(prompt) {
|
| if (!currentChatId) {
|
| newChat();
|
| }
|
| document.getElementById('welcomeScreen').style.display = 'none';
|
| document.getElementById('chatMessages').classList.add('active');
|
| document.getElementById('chatInput').value = prompt;
|
| sendMessage();
|
| }
|
|
|
|
|
| function exportChat() {
|
| if (!currentChatId) {
|
| alert('Please select a chat to export!');
|
| return;
|
| }
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| if (!chat) return;
|
|
|
|
|
| const exportText = chat.messages.map(msg =>
|
| `${msg.sender === 'user' ? 'You' : 'HiteshAI'}: ${msg.content}`
|
| ).join('\n\n');
|
|
|
|
|
| const blob = new Blob([exportText], { type: 'text/plain' });
|
| const url = URL.createObjectURL(blob);
|
| const a = document.createElement('a');
|
| a.href = url;
|
| a.download = `${chat.title.replace(/[^a-z0-9]/gi, '_')}.txt`;
|
| a.click();
|
| URL.revokeObjectURL(url);
|
| }
|
|
|
|
|
| function copyResponse(text) {
|
| navigator.clipboard.writeText(text).then(() => {
|
| const btn = event.target;
|
| const originalText = btn.innerHTML;
|
| btn.innerHTML = '✅ Copied!';
|
| setTimeout(() => {
|
| btn.innerHTML = originalText;
|
| }, 2000);
|
| }).catch(err => {
|
| alert('Failed to copy. Please try again!');
|
| });
|
| }
|
|
|
|
|
| function showContextMenu(e, chatId) {
|
| e.preventDefault();
|
| selectedChatForDelete = chatId;
|
| const menu = document.getElementById('contextMenu');
|
| menu.style.left = e.pageX + 'px';
|
| menu.style.top = e.pageY + 'px';
|
| menu.classList.add('active');
|
| }
|
|
|
|
|
| function deleteChat() {
|
| if (selectedChatForDelete) {
|
| chats = chats.filter(c => c.id !== selectedChatForDelete);
|
| saveChats();
|
| if (currentChatId === selectedChatForDelete) {
|
| currentChatId = null;
|
| document.getElementById('welcomeScreen').style.display = 'flex';
|
| document.getElementById('chatMessages').classList.remove('active');
|
| document.getElementById('chatMessages').innerHTML = '';
|
| }
|
| renderChatList();
|
| }
|
| document.getElementById('contextMenu').classList.remove('active');
|
| }
|
|
|
|
|
| document.addEventListener('click', () => {
|
| document.getElementById('contextMenu').classList.remove('active');
|
| });
|
|
|
|
|
| function handleFileSelect(event) {
|
| selectedFile = event.target.files[0];
|
| if (selectedFile) {
|
| const fileTypes = ['image/png', 'image/jpeg', 'image/jpg', 'application/pdf'];
|
| if (!fileTypes.includes(selectedFile.type)) {
|
| alert('Please upload PNG, JPEG, JPG, or PDF files only');
|
| selectedFile = null;
|
| event.target.value = '';
|
| return;
|
| }
|
|
|
|
|
| const input = document.getElementById('chatInput');
|
| input.placeholder = `📎 ${selectedFile.name} - Type a message or press Enter to send`;
|
| }
|
| }
|
|
|
|
|
| function autoResize(textarea) {
|
| textarea.style.height = 'auto';
|
| textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
|
| }
|
|
|
|
|
|
|
| document.addEventListener('DOMContentLoaded', () => {
|
| const input = document.getElementById('chatInput');
|
| input.addEventListener('keydown', (e) => {
|
| if (e.key === 'Enter' && !e.shiftKey) {
|
| e.preventDefault();
|
| sendMessage();
|
| }
|
| });
|
| });
|
|
|
|
|
| async function sendMessage() {
|
| const input = document.getElementById('chatInput');
|
| const message = input.value.trim();
|
|
|
| if (!message && !selectedFile) return;
|
|
|
|
|
| if (!currentChatId) {
|
| newChat();
|
| }
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| if (chat.title === 'New Chat' && message) {
|
| chat.title = message.substring(0, 30) + (message.length > 30 ? '...' : '');
|
| }
|
|
|
|
|
| const userMessage = { role: 'user', content: message, sender: 'user', file: selectedFile ? selectedFile.name : null };
|
| chat.messages.push(userMessage);
|
| addMessageToDOM(message, 'user', selectedFile ? selectedFile.name : null);
|
|
|
| input.value = '';
|
| input.style.height = 'auto';
|
|
|
|
|
| const sendButton = document.getElementById('sendButton');
|
| input.disabled = true;
|
| sendButton.disabled = true;
|
|
|
|
|
| document.getElementById('typingIndicator').classList.add('active');
|
|
|
|
|
| try {
|
| const messages = [{ role: 'system', content: systemPrompt + ' ' + languagePrompts[currentLanguage] }];
|
|
|
| if (selectedFile) {
|
| const base64 = await fileToBase64(selectedFile);
|
| const fileType = selectedFile.type;
|
|
|
| if (fileType.startsWith('image/')) {
|
| messages.push({
|
| role: 'user',
|
| content: [
|
| { type: 'image_url', image_url: { url: base64 } },
|
| { type: 'text', text: message || 'What do you see in this image?' }
|
| ]
|
| });
|
| } else if (fileType === 'application/pdf') {
|
| messages.push({
|
| role: 'user',
|
| content: [
|
| { type: 'document', source: { type: 'base64', media_type: 'application/pdf', data: base64.split(',')[1] } },
|
| { type: 'text', text: message || 'Summarize this document.' }
|
| ]
|
| });
|
| }
|
| selectedFile = null;
|
| document.getElementById('fileInput').value = '';
|
| } else {
|
| chat.messages.slice(-10).forEach(msg => {
|
| messages.push({ role: msg.sender === 'user' ? 'user' : 'assistant', content: msg.content });
|
| });
|
| }
|
|
|
|
|
| const response = await fetch(API_URL, {
|
| method: 'POST',
|
| headers: {
|
| 'Authorization': `Bearer ${API_KEY}`,
|
| 'Content-Type': 'application/json',
|
| 'HTTP-Referer': window.location.href || 'https://hiteshai.com',
|
| 'X-Title': 'HiteshAI'
|
| },
|
| body: JSON.stringify({
|
| model: 'deepseek/deepseek-chat',
|
| messages: messages,
|
| temperature: 0.7,
|
| max_tokens: 800
|
| })
|
| });
|
|
|
|
|
| if (!response.ok) throw new Error(`API Error: ${response.status}`);
|
|
|
|
|
| const data = await response.json();
|
| const botMessage = data.choices[0].message.content;
|
|
|
|
|
| chat.messages.push({ role: 'assistant', content: botMessage, sender: 'bot' });
|
|
|
|
|
| await typeMessage(botMessage);
|
|
|
| saveChats();
|
| renderChatList();
|
|
|
|
|
| } catch (error) {
|
| console.error('Error:', error);
|
| addMessageToDOM('Sorry, I encountered an error. Please try again! 😔', 'bot');
|
| } finally {
|
| document.getElementById('typingIndicator').classList.remove('active');
|
| input.disabled = false;
|
| sendButton.disabled = false;
|
| input.focus();
|
| }
|
| }
|
|
|
|
|
| function fileToBase64(file) {
|
| return new Promise((resolve, reject) => {
|
| const reader = new FileReader();
|
| reader.onload = () => resolve(reader.result);
|
| reader.onerror = reject;
|
| reader.readAsDataURL(file);
|
| });
|
| }
|
|
|
|
|
| function addMessageToDOM(text, sender, fileName = null) {
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const messageDiv = document.createElement('div');
|
| messageDiv.className = `message ${sender}`;
|
| messageDiv.dataset.originalText = text;
|
|
|
| const contentWrapper = document.createElement('div');
|
|
|
| const contentDiv = document.createElement('div');
|
| contentDiv.className = 'message-content';
|
| contentDiv.textContent = text;
|
|
|
| if (fileName) {
|
| const fileDiv = document.createElement('div');
|
| fileDiv.className = 'file-attachment';
|
| fileDiv.textContent = `📎 ${fileName}`;
|
| contentDiv.appendChild(fileDiv);
|
| }
|
|
|
| contentWrapper.appendChild(contentDiv);
|
|
|
|
|
| const actionsDiv = document.createElement('div');
|
| actionsDiv.className = 'message-actions';
|
| const escapedText = text.replace(/`/g, '\\`').replace(/"/g, '\\"').replace(/\n/g, '\\n');
|
|
|
| if (sender === 'bot') {
|
| actionsDiv.innerHTML = `
|
| <button class="action-btn" onclick='copyResponse(\`${escapedText}\`)'>📋 Copy</button>
|
| <button class="action-btn" onclick='regenerateResponse(this)'>🔄 Regenerate</button>
|
| `;
|
| } else {
|
| actionsDiv.innerHTML = `
|
| <button class="action-btn" onclick='editMessage(this)'>✏️ Edit</button>
|
| `;
|
| }
|
|
|
| contentWrapper.appendChild(actionsDiv);
|
| messageDiv.appendChild(contentWrapper);
|
| messagesContainer.appendChild(messageDiv);
|
| messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
| }
|
|
|
|
|
| function editMessage(button) {
|
| const messageDiv = button.closest('.message');
|
| const contentDiv = messageDiv.querySelector('.message-content');
|
| const originalText = messageDiv.dataset.originalText;
|
|
|
|
|
| contentDiv.innerHTML = `
|
| <div class="edit-mode">
|
| <textarea>${originalText}</textarea>
|
| <div class="edit-actions">
|
| <button class="cancel-btn" onclick="cancelEdit(this)">Cancel</button>
|
| <button class="save-btn" onclick="saveEdit(this)">Send</button>
|
| </div>
|
| </div>
|
| `;
|
| contentDiv.querySelector('textarea').focus();
|
| }
|
|
|
|
|
| function cancelEdit(button) {
|
| const messageDiv = button.closest('.message');
|
| const contentDiv = messageDiv.querySelector('.message-content');
|
| const originalText = messageDiv.dataset.originalText;
|
| contentDiv.textContent = originalText;
|
| }
|
|
|
|
|
| async function saveEdit(button) {
|
| const messageDiv = button.closest('.message');
|
| const textarea = messageDiv.querySelector('textarea');
|
| const newText = textarea.value.trim();
|
|
|
| if (!newText) return;
|
|
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| const messageIndex = Array.from(document.getElementById('chatMessages').children).indexOf(messageDiv);
|
|
|
| if (chat && messageIndex !== -1) {
|
| chat.messages[messageIndex].content = newText;
|
| messageDiv.dataset.originalText = newText;
|
|
|
|
|
| chat.messages = chat.messages.slice(0, messageIndex + 1);
|
|
|
|
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const allMessages = Array.from(messagesContainer.children);
|
| allMessages.slice(messageIndex + 1).forEach(msg => msg.remove());
|
|
|
|
|
| const contentDiv = messageDiv.querySelector('.message-content');
|
| contentDiv.textContent = newText;
|
|
|
| saveChats();
|
|
|
|
|
| await sendMessage(newText, true);
|
| }
|
| }
|
|
|
|
|
| async function regenerateResponse(button) {
|
| const messageDiv = button.closest('.message');
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const allMessages = Array.from(messagesContainer.children);
|
| const messageIndex = allMessages.indexOf(messageDiv);
|
|
|
| if (messageIndex <= 0) return;
|
|
|
|
|
| const userMessageDiv = allMessages[messageIndex - 1];
|
| if (!userMessageDiv.classList.contains('user')) return;
|
|
|
| const userText = userMessageDiv.dataset.originalText;
|
|
|
|
|
| const chat = chats.find(c => c.id === currentChatId);
|
| if (chat) {
|
| chat.messages = chat.messages.slice(0, messageIndex);
|
| allMessages.slice(messageIndex).forEach(msg => msg.remove());
|
| saveChats();
|
| }
|
|
|
|
|
| await sendMessage(userText, true);
|
| }
|
|
|
|
|
| async function typeMessage(text) {
|
| const messagesContainer = document.getElementById('chatMessages');
|
| const messageDiv = document.createElement('div');
|
| messageDiv.className = 'message bot';
|
| messageDiv.dataset.originalText = text;
|
|
|
| const contentWrapper = document.createElement('div');
|
| const contentDiv = document.createElement('div');
|
| contentDiv.className = 'message-content';
|
|
|
| contentWrapper.appendChild(contentDiv);
|
| messageDiv.appendChild(contentWrapper);
|
| messagesContainer.appendChild(messageDiv);
|
|
|
|
|
| for (let i = 0; i < text.length; i++) {
|
| contentDiv.textContent = text.substring(0, i + 1);
|
| messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
| await new Promise(resolve => setTimeout(resolve, 15));
|
| }
|
|
|
|
|
| const actionsDiv = document.createElement('div');
|
| actionsDiv.className = 'message-actions';
|
| const escapedText = text.replace(/`/g, '\\`').replace(/"/g, '\\"').replace(/\n/g, '\\n');
|
| actionsDiv.innerHTML = `
|
| <button class="action-btn" onclick='copyResponse(\`${escapedText}\`)'>📋 Copy</button>
|
| <button class="action-btn" onclick='regenerateResponse(this)'>🔄 Regenerate</button>
|
| `;
|
| contentWrapper.appendChild(actionsDiv);
|
| }
|
|
|
|
|
| window.onload = () => {
|
| loadTheme();
|
| renderChatList();
|
| document.getElementById('chatInput').focus();
|
| document.getElementById('langSelect').value = currentLanguage;
|
|
|
|
|
| if (ttsEnabled) {
|
| const btn = document.getElementById('ttsBtn');
|
| const status = document.getElementById('ttsStatus');
|
| btn.style.background = 'rgba(44, 100, 186, 0.1)';
|
| btn.style.borderColor = 'var(--primary-color)';
|
| status.textContent = 'TTS On';
|
| }
|
| };
|
| </script>
|
| </body>
|
| </html> |
