\`.
121 | * **Section Titles:** Use \`
\` for main section titles. Each \`\` MUST start with a relevant emoji.
122 | * Example (Hebrew): \`📊 סקירה כללית:
\`
123 | * Example (English): \`📊 Main Overview:
\`
124 | * **Paragraphs:** Use \`
\` for all descriptive text.
125 | * **Emphasis:** Use \`\` for bolding key terms, names, or takeaways. Use \`\` for italics if needed for nuance.
126 | * **Lists:** Use \`\` for unordered lists and \`- \` for list items. List items should generally contain a \`
\` tag for their content for consistent spacing.
127 | * **Hyperlinks:**
128 | * **MUST be HTML anchor tags:** \`Descriptive Link Text\`.
129 | * \`target="_blank"\` is crucial.
130 | * Link text MUST be descriptive (e.g., "Research Paper on LLMs," not just the URL).
131 | * **Comprehensiveness & Detail:** For larger message sets or longer date ranges, expand the "Key Topics & Insights" section to cover more distinct topics (e.g., 5-7 instead of 3-5 if warranted) and provide more detail within each. Similarly, the "Notable Links" and "Key Questions" sections can be more extensive. The goal is to transfer the full message of the group discussions effectively.
132 |
133 | **SUMMARY STRUCTURE (Follow this order precisely, adapt detail based on input size):**
134 |
135 | \`\`\`html
136 |
137 |
📊 Main Overview (סקירה כללית):
138 |
Provide a high-level summary (2-4 sentences, more if many messages). What were the absolute main themes and the general conversational drift in this segment of messages${dateRangeInfo}? Focus on the essence.
139 |
140 |
💡 Key Topics & Insights (נושאים ותובנות עיקריים):
141 |
This is the core of your summary. Identify the most significant, distinct topics discussed. For ${numMessages > 500 ? 'a larger set of messages like this, aim for 5-7 key topics if distinct threads exist' : 'this set of messages, aim for 3-5 key topics'}. For each topic:
142 |
143 | -
144 |
Topic Name 1: Explain the core discussion points, new information shared (e.g., new AI models, tools, techniques), or main questions/debates in more detail if the message volume is high. Mention key insights or conclusions if any were reached.
145 |
146 |
147 |
148 |
149 |
🔗 Notable Links & Resources (קישורים ומשאבים חשובים):
150 |
List important links, articles, tools, GitHub repositories, or other resources shared. Be more inclusive if many resources were shared over a longer period.
151 |
155 |
156 |
❓ Key Questions Asked (שאלות מרכזיות שנשאלו):
157 |
List significant or recurring questions. For larger message sets, include more questions if they represent distinct areas of inquiry.
158 |
162 |
163 |
🔥 Hot Topic Snippet (נושא חם בקצרה):
164 |
From the key topics, identify the single most actively discussed, debated, or "hottest" thread. Provide a 2-3 sentence highlight capturing its essence, potentially more if it was a very dominant topic.
165 |
166 |
🗣️ Dive Deeper? (רוצים לצלול פנימה?):
167 |
Is there a specific topic or question from this summary you'd like to explore in more detail?
168 |
\` and ending with \`
\`. No extra text, no markdown, no code fences.
172 | `;
173 |
174 | let systemPromptToUse = DEFAULT_SYSTEM_PROMPT_FOR_SUMMARY;
175 | if (customPromptText && customPromptText.trim() !== "") {
176 | systemPromptToUse = `${customPromptText.trim()}\n\nIMPORTANT: The following is the primary set of instructions you must adhere to:\n\n${DEFAULT_SYSTEM_PROMPT_FOR_SUMMARY}`;
177 | console.log(`[AI.SERVICE] Augmenting default summary prompt with custom instruction: "${customPromptText.substring(0, 100)}..."`);
178 | } else {
179 | console.log(`[AI.SERVICE] Using default system prompt for summary.`);
180 | }
181 |
182 | if (openaiApiKey && openaiApiKey.trim() !== "") {
183 | console.log(`[AI.SERVICE] Using user-provided OpenAI API key for summary.`);
184 | } else {
185 | console.log(`[AI.SERVICE] Using default backend OpenAI API key for summary.`);
186 | }
187 |
188 | const userQuery = `${conversationContext}\n\nTask: Summarize the above conversation (which includes ${numMessages} messages${dateRangeInfo}) according to the detailed system instructions. Prioritize comprehensiveness and detail appropriate for the volume of messages, ensuring the summary is not too short. Pay close attention to the language instruction.`;
189 |
190 | const formattedMessagesForOpenAI: MessageForAI[] = [
191 | { role: 'system', content: systemPromptToUse },
192 | { role: 'user', content: userQuery }
193 | ];
194 |
195 | const aiResponse = await activeOpenAI.chat.completions.create({
196 | model: process.env.OPENAI_MODEL || 'gpt-4o-mini',
197 | messages: formattedMessagesForOpenAI,
198 | max_tokens: maxTokensForSummary,
199 | temperature: 0.5,
200 | });
201 |
202 | return aiResponse.choices[0].message.content || 'Sorry, I could not generate a summary.';
203 | } catch (error: any) {
204 | console.error('Error generating summary with AI:', error);
205 | if (error.response && error.response.data && error.response.data.error) {
206 | return `AI API Error: ${error.response.data.error.message}`;
207 | }
208 | return 'An error occurred while generating the summary. Please try again later.';
209 | }
210 | };
211 |
212 | /**
213 | * Answers a question based on a given array of WhatsApp messages and a question string, using the OpenAI API.
214 | * @param {Message[]} messages - An array of `whatsapp-web.js` Message objects providing context.
215 | * @param {string} question - The question to answer.
216 | * @param {string} [customPromptText] - Optional custom system prompt text.
217 | * @param {string} [openaiApiKey] - Optional user-provided OpenAI API key.
218 | * @returns {Promise} A promise that resolves to the AI-generated answer, or an error message.
219 | */
220 | export const answerQuestion = async (
221 | messages: Message[],
222 | question: string,
223 | customPromptText?: string,
224 | openaiApiKey?: string
225 | ): Promise => {
226 | const activeOpenAI = (openaiApiKey && openaiApiKey.trim() !== "")
227 | ? new OpenAI({ apiKey: openaiApiKey.trim() })
228 | : openai;
229 |
230 | if (!activeOpenAI.apiKey) { // Check the potentially new client's API key
231 | return "AI service is not configured (OpenAI API key missing or invalid).";
232 | }
233 | if (!messages || messages.length === 0) {
234 | return "No message context provided to answer the question.";
235 | }
236 | if (!question || question.trim() === "") {
237 | return "No question provided.";
238 | }
239 |
240 | try {
241 | const conversationContext = await formatMessagesForAI(messages);
242 | const DEFAULT_SYSTEM_PROMPT_FOR_QA = `You are an AI assistant designed to answer questions about a specific WhatsApp group conversation, often focused on technology or AI discussions. Use ONLY the provided message history to answer the user's question accurately and concisely, extracting relevant information.
243 |
244 | **LANGUAGE INSTRUCTION:**
245 | * **If the conversation history (and potentially the user's question) contains a significant amount of Hebrew, your answer MUST be in HEBREW.**
246 | * Otherwise, if another non-English language is clearly predominant in the conversation, respond in that language.
247 | * If the conversation is primarily English or a mix of languages without a clear non-English predominance, respond in English.
248 |
249 | If the answer to the question cannot be found within the provided messages, clearly state that the information is not available in the provided context (in the target language). Do not make assumptions or provide information from outside the conversation.`;
250 |
251 | let systemPromptToUse = DEFAULT_SYSTEM_PROMPT_FOR_QA;
252 | if (customPromptText && customPromptText.trim() !== "") {
253 | systemPromptToUse = `${customPromptText.trim()}\n\nIMPORTANT: The following is the primary set of instructions you must adhere to:\n\n${DEFAULT_SYSTEM_PROMPT_FOR_QA}`;
254 | console.log(`[AI.SERVICE] Augmenting default Q&A prompt with custom instruction: "${customPromptText.substring(0, 100)}..."`);
255 | } else {
256 | console.log(`[AI.SERVICE] Using default system prompt for Q&A.`);
257 | }
258 |
259 | if (openaiApiKey && openaiApiKey.trim() !== "") {
260 | console.log(`[AI.SERVICE] Using user-provided OpenAI API key for Q&A.`);
261 | } else {
262 | console.log(`[AI.SERVICE] Using default backend OpenAI API key for Q&A.`);
263 | }
264 |
265 | const userQuery = `${conversationContext}\n\nUser's Question: ${question}\n\nTask: Answer the user's question based ONLY on the conversation history provided above, paying close attention to the language instruction.`;
266 |
267 | const formattedMessagesForOpenAI: MessageForAI[] = [
268 | { role: 'system', content: systemPromptToUse },
269 | { role: 'user', content: userQuery }
270 | ];
271 |
272 | const aiResponse = await activeOpenAI.chat.completions.create({
273 | model: process.env.OPENAI_MODEL || 'gpt-4o-mini', // Ensure this uses the intended model
274 | messages: formattedMessagesForOpenAI,
275 | max_tokens: 250, // Slightly increased if answers might need more detail
276 | temperature: 0.3, // Lower temperature for more factual, context-bound answers
277 | });
278 |
279 | return aiResponse.choices[0].message.content || 'Sorry, I could not generate an answer.';
280 | } catch (error: any) {
281 | console.error('Error answering question with AI:', error);
282 | if (error.response && error.response.data && error.response.data.error) {
283 | return `AI API Error: ${error.response.data.error.message}`;
284 | }
285 | return 'An error occurred while generating the answer. Please try again later.';
286 | }
287 | };
--------------------------------------------------------------------------------
/extension/panel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WhatsApp AI Co-Pilot - Sidebar Interactions
3 | */
4 |
5 | // This script will be injected by content.js and will handle sidebar interactions
6 |
7 | // Sidebar animation variables
8 | let sidebarOpen = true;
9 | const BACKEND_URL = 'http://localhost:3000';
10 | let currentSelectedChatId = null; // Stores the ID of the currently selected chat
11 | let currentSelectedChatName = null; // Stores the name of the currently selected chat
12 | let fetchedMessagesForSelectedChat = []; // Stores messages for AI processing (role might change)
13 |
14 | const DEFAULT_SUMMARY_PROMPT_TEXT_DISPLAY = `The default summary prompt is dynamically generated by the backend based on message count and date range. It instructs the AI to produce a detailed HTML summary, adapting to the conversation's primary language (e.g., Hebrew or English), and focusing on key topics, insights, notable links, and questions. The structure includes sections like Main Overview, Key Topics, Notable Links, Key Questions, and a Hot Topic Snippet.`;
15 | const DEFAULT_QA_PROMPT_TEXT_DISPLAY = `You are an AI assistant designed to answer questions about a specific WhatsApp group conversation, often focused on technology or AI discussions. Use ONLY the provided message history to answer the user's question accurately and concisely, extracting relevant information.
16 |
17 | **LANGUAGE INSTRUCTION:**
18 | * If the conversation history (and potentially the user's question) contains a significant amount of Hebrew, your answer MUST be in HEBREW.
19 | * Otherwise, if another non-English language is clearly predominant in the conversation, respond in that language.
20 | * If the conversation is primarily English or a mix of languages without a clear non-English predominance, respond in English.
21 |
22 | If the answer to the question cannot be found within the provided messages, clearly state that the information is not available in the provided context (in the target language). Do not make assumptions or provide information from outside the conversation.`;
23 |
24 | // Date filter elements
25 | let startDateInput, endDateInput, clearDatesButton, dateFilterAreaEl, fetchUnreadCheckbox, filterOptionsLabelEl, unreadFilterAreaEl;
26 |
27 | // DOM element references
28 | let chatSelectorDropdown, whatsappStatusArea, whatsappConnectionStatus, whatsappQrCodeArea, whatsappQrCodeImg, chatSelectorArea, summarizeButton, askQuestionButton, aiQueryInput, aiChatMessagesDiv, foldButtonElement;
29 | let settingsButton, customPromptSettingsSection, customPromptTextarea, saveCustomPromptButton, resetCustomPromptButton, viewDefaultPromptsButton, defaultPromptsDisplayArea, defaultSummaryPromptDisplay, defaultQaPromptDisplay;
30 | let openaiApiKeyInput, saveOpenaiApiKeyButton; // New elements for OpenAI API Key
31 |
32 | // Wait for DOM to be ready
33 | document.addEventListener('DOMContentLoaded', () => {
34 | // Get DOM elements
35 | chatSelectorDropdown = document.getElementById('chat-selector');
36 | whatsappStatusArea = document.getElementById('whatsapp-status-area');
37 | whatsappConnectionStatus = document.getElementById('whatsapp-connection-status');
38 | whatsappQrCodeArea = document.getElementById('whatsapp-qr-code-area');
39 | whatsappQrCodeImg = document.getElementById('whatsapp-qr-code-img'); // This is a div now
40 | chatSelectorArea = document.getElementById('chat-selector-area');
41 |
42 | summarizeButton = document.getElementById('summarize-group-button');
43 | askQuestionButton = document.getElementById('ask-question-button');
44 | aiQueryInput = document.getElementById('ai-query-input');
45 | aiChatMessagesDiv = document.getElementById('ai-chat-messages');
46 | foldButtonElement = document.getElementById('fold-button');
47 |
48 | // NEW: Get date filter elements
49 | startDateInput = document.getElementById('startDate');
50 | endDateInput = document.getElementById('endDate');
51 | clearDatesButton = document.getElementById('clear-dates-button');
52 | dateFilterAreaEl = document.getElementById('date-filter-area');
53 | fetchUnreadCheckbox = document.getElementById('fetch-unread-checkbox');
54 | filterOptionsLabelEl = document.getElementById('filter-options-label');
55 | unreadFilterAreaEl = document.getElementById('unread-filter-area');
56 |
57 | // Custom Prompt Settings Elements
58 | settingsButton = document.getElementById('settings-button');
59 | customPromptSettingsSection = document.getElementById('custom-prompt-settings-section');
60 | customPromptTextarea = document.getElementById('custom-prompt-textarea');
61 | saveCustomPromptButton = document.getElementById('save-custom-prompt-button');
62 | resetCustomPromptButton = document.getElementById('reset-custom-prompt-button');
63 | viewDefaultPromptsButton = document.getElementById('view-default-prompts-button');
64 | defaultPromptsDisplayArea = document.getElementById('default-prompts-display-area');
65 | defaultSummaryPromptDisplay = document.getElementById('default-summary-prompt-display');
66 | defaultQaPromptDisplay = document.getElementById('default-qa-prompt-display');
67 |
68 | // OpenAI API Key Elements
69 | openaiApiKeyInput = document.getElementById('openai-api-key-input');
70 | saveOpenaiApiKeyButton = document.getElementById('save-openai-api-key-button');
71 |
72 | if (clearDatesButton) {
73 | clearDatesButton.addEventListener('click', () => {
74 | if (startDateInput) startDateInput.value = '';
75 | if (endDateInput) endDateInput.value = '';
76 | });
77 | }
78 |
79 | setupCustomPromptControls();
80 | setupOpenApiKeyControls(); // New function call
81 | waitForSidebarAndSetup();
82 |
83 | function updateFoldButtonIcon(isCollapsed) {
84 | if (foldButtonElement) {
85 | const icon = foldButtonElement.querySelector('i');
86 | if (isCollapsed) {
87 | icon.className = 'fas fa-chevron-left';
88 | } else {
89 | icon.className = 'fas fa-chevron-right';
90 | }
91 | }
92 | }
93 |
94 | function handleToggleSidebarVisibility() {
95 | sidebarOpen = !sidebarOpen;
96 | window.parent.postMessage({ action: 'toggleSidebarVisibility', isCollapsed: !sidebarOpen }, '*');
97 | }
98 |
99 | if (foldButtonElement) {
100 | foldButtonElement.addEventListener('click', (e) => {
101 | e.preventDefault();
102 | e.stopPropagation();
103 | handleToggleSidebarVisibility();
104 | });
105 | }
106 |
107 | window.addEventListener('message', (event) => {
108 | if (event.source !== window.parent) {
109 | return;
110 | }
111 | const message = event.data;
112 | if (message && message.action === 'updatePanelControls') {
113 | let isSidebarCollapsed = message.isCollapsed;
114 | sidebarOpen = !isSidebarCollapsed;
115 | updateFoldButtonIcon(isSidebarCollapsed);
116 | }
117 | });
118 |
119 | });
120 |
121 | function updateWhatsappConnectionStatus(message, isError = false) {
122 | if (whatsappConnectionStatus) {
123 | whatsappConnectionStatus.textContent = message;
124 | whatsappConnectionStatus.className = isError ? 'status-error' : 'status-ok';
125 | }
126 |
127 | const elementsToHideOnError = [
128 | chatSelectorArea, summarizeButton, dateFilterAreaEl,
129 | filterOptionsLabelEl, unreadFilterAreaEl, document.querySelector('.chat-input-area')
130 | ];
131 |
132 | if (isError) {
133 | elementsToHideOnError.forEach(el => { if (el) el.style.display = 'none'; });
134 | if(whatsappQrCodeArea) whatsappQrCodeArea.style.display = 'block';
135 | }
136 | }
137 |
138 | async function fetchAndDisplayQrCode() {
139 | if (!whatsappQrCodeImg || !whatsappQrCodeArea || !whatsappConnectionStatus) {
140 | console.error("QR display elements not found.");
141 | return;
142 | }
143 | try {
144 | updateWhatsappConnectionStatus('Fetching QR code...');
145 | const response = await fetch(`${BACKEND_URL}/auth/qr`);
146 | if (!response.ok) {
147 | const errorData = await response.json().catch(() => ({ error: 'Failed to fetch QR code details.' }));
148 | throw new Error(errorData.error || `HTTP error ${response.status}`);
149 | }
150 | const data = await response.json();
151 | if (data.qrCode) {
152 | if (typeof QRCode !== 'undefined') {
153 | whatsappQrCodeImg.innerHTML = '';
154 | new QRCode(whatsappQrCodeImg, {
155 | text: data.qrCode, width: 180, height: 180,
156 | colorDark: "#000000", colorLight: "#ffffff",
157 | correctLevel: QRCode.CorrectLevel.H
158 | });
159 | updateWhatsappConnectionStatus('Scan QR code with WhatsApp.');
160 | whatsappQrCodeArea.style.display = 'block';
161 | const elementsToHide = [
162 | chatSelectorArea, summarizeButton, dateFilterAreaEl,
163 | filterOptionsLabelEl, unreadFilterAreaEl, document.querySelector('.chat-input-area')
164 | ];
165 | elementsToHide.forEach(el => { if (el) el.style.display = 'none'; });
166 | } else {
167 | whatsappQrCodeImg.innerHTML = 'QR Library not loaded.';
168 | updateWhatsappConnectionStatus('QR library missing. Check console.', true);
169 | console.error("QRCode library is not loaded.");
170 | }
171 | } else {
172 | updateWhatsappConnectionStatus('QR code not available from backend.', false);
173 | if(whatsappQrCodeArea) whatsappQrCodeArea.style.display = 'none';
174 | }
175 | } catch (error) {
176 | console.error('Error fetching or displaying QR code:', error);
177 | updateWhatsappConnectionStatus(`Error fetching QR: ${error.message}`, true);
178 | if(whatsappQrCodeArea) whatsappQrCodeArea.style.display = 'none';
179 | }
180 | }
181 |
182 | async function fetchGroups() {
183 | if (!isBackendConnected()) {
184 | updateWhatsappConnectionStatus('Backend not connected. Cannot fetch groups.', true);
185 | return;
186 | }
187 | try {
188 | updateWhatsappConnectionStatus('Fetching group list...');
189 | const response = await fetch(`${BACKEND_URL}/groups`);
190 | if (!response.ok) {
191 | let errorText = `HTTP error ${response.status}`;
192 | try { const errorData = await response.json(); errorText = errorData.error || errorText; } catch (e) { /* ignore */ }
193 | throw new Error(errorText);
194 | }
195 | const groups = await response.json();
196 | populateChatSelector(groups);
197 | if (groups && Array.isArray(groups) && groups.length > 0) {
198 | updateWhatsappConnectionStatus('WhatsApp Connected. Select a group.');
199 | if(chatSelectorArea) chatSelectorArea.style.display = 'block';
200 | if(whatsappQrCodeArea) whatsappQrCodeArea.style.display = 'none';
201 | } else {
202 | updateWhatsappConnectionStatus('WhatsApp Connected. No groups found or accessible.');
203 | if(chatSelectorArea) chatSelectorArea.style.display = 'block';
204 | if(whatsappQrCodeArea) whatsappQrCodeArea.style.display = 'none';
205 | }
206 | hideInitialLoadingIndicator();
207 | } catch (error) {
208 | const errorMessage = error instanceof Error ? error.message : String(error);
209 | updateWhatsappConnectionStatus(`Error fetching groups: ${errorMessage}`, true);
210 | populateChatSelector([]);
211 | hideInitialLoadingIndicator();
212 | }
213 | }
214 |
215 | function populateChatSelector(groups) {
216 | if (!chatSelectorDropdown) return;
217 | const previouslySelectedId = currentSelectedChatId;
218 | chatSelectorDropdown.innerHTML = '';
219 | const defaultOption = document.createElement('option');
220 | defaultOption.value = "";
221 | defaultOption.textContent = groups && groups.length > 0 ? "-- Select a Group --" : "-- No Groups Available --";
222 | chatSelectorDropdown.appendChild(defaultOption);
223 |
224 | if (groups && Array.isArray(groups)) {
225 | groups.forEach(group => {
226 | if (group && group.id && group.name) {
227 | const option = document.createElement('option');
228 | option.value = group.id;
229 | option.textContent = group.name;
230 | chatSelectorDropdown.appendChild(option);
231 | }
232 | });
233 | if (previouslySelectedId) {
234 | chatSelectorDropdown.value = previouslySelectedId;
235 | if (chatSelectorDropdown.value !== previouslySelectedId) currentSelectedChatId = "";
236 | }
237 | }
238 | }
239 |
240 | function waitForSidebarAndSetup() {
241 | const panel = document.getElementById('ai-copilot-panel');
242 | if (!panel) {
243 | setTimeout(waitForSidebarAndSetup, 50);
244 | return;
245 | }
246 | showInitialLoadingIndicator();
247 | setupChatInterface();
248 | attachLoadingIndicators();
249 | addRefreshButton();
250 | initAuthAndGroupListing();
251 | checkBackendAndWhatsAppStatus();
252 | const messageList = document.querySelector('.message-list');
253 | if (messageList && messageList.childElementCount === 0) {
254 | addMessageToChat('assistant', "Welcome! Connect to WhatsApp and select a group to begin.");
255 | }
256 | setInterval(checkBackendAndWhatsAppStatus, 15000);
257 | setTimeout(setupNewFeatureButtons, 100);
258 | loadCustomPrompt();
259 | loadOpenAIApiKey(); // Load saved OpenAI API Key
260 | }
261 |
262 | function setupOpenApiKeyControls() {
263 | if (saveOpenaiApiKeyButton && openaiApiKeyInput) {
264 | saveOpenaiApiKeyButton.addEventListener('click', () => {
265 | const apiKey = openaiApiKeyInput.value.trim();
266 | if (apiKey) {
267 | chrome.storage.local.set({ userOpenAIApiKey: apiKey }, () => {
268 | if (chrome.runtime.lastError) {
269 | console.error('Error saving OpenAI API Key:', chrome.runtime.lastError);
270 | showStatus('שגיאה בשמירת מפתח OpenAI API.', true);
271 | } else {
272 | console.log('OpenAI API Key saved.');
273 | showStatus('מפתח OpenAI API נשמר!', false);
274 | }
275 | });
276 | } else {
277 | // If user clears the input and saves, remove it from storage
278 | chrome.storage.local.remove('userOpenAIApiKey', () => {
279 | if (chrome.runtime.lastError) {
280 | console.error('Error removing OpenAI API Key:', chrome.runtime.lastError);
281 | showStatus('שגיאה בניקוי מפתח OpenAI API.', true);
282 | } else {
283 | console.log('OpenAI API Key removed from storage.');
284 | showStatus('מפתח OpenAI API נמחק (הגדרות שרת ישמשו כברירת מחדל).', false);
285 | }
286 | });
287 | }
288 | });
289 | }
290 | }
291 |
292 | function loadOpenAIApiKey() {
293 | if (openaiApiKeyInput) {
294 | chrome.storage.local.get('userOpenAIApiKey', (result) => {
295 | if (chrome.runtime.lastError) {
296 | console.error('Error loading OpenAI API Key:', chrome.runtime.lastError);
297 | return;
298 | }
299 | if (result.userOpenAIApiKey) {
300 | openaiApiKeyInput.value = result.userOpenAIApiKey;
301 | }
302 | });
303 | }
304 | }
305 |
306 | function setupCustomPromptControls() {
307 | if (settingsButton) {
308 | settingsButton.addEventListener('click', () => {
309 | if (customPromptSettingsSection) {
310 | customPromptSettingsSection.style.display = customPromptSettingsSection.style.display === 'none' ? 'block' : 'none';
311 | }
312 | });
313 | }
314 |
315 | if (saveCustomPromptButton) {
316 | saveCustomPromptButton.addEventListener('click', () => {
317 | const promptText = customPromptTextarea ? customPromptTextarea.value.trim() : "";
318 | chrome.storage.local.set({ customSystemPrompt: promptText }, () => {
319 | if (chrome.runtime.lastError) {
320 | console.error('Error saving custom prompt:', chrome.runtime.lastError);
321 | showStatus('שגיאה בשמירת ההנחיה.', true);
322 | } else {
323 | console.log('Custom prompt saved.');
324 | showStatus('הנחיה מותאמת אישית נשמרה!', false);
325 | }
326 | });
327 | });
328 | }
329 |
330 | if (resetCustomPromptButton) {
331 | resetCustomPromptButton.addEventListener('click', () => {
332 | chrome.storage.local.remove('customSystemPrompt', () => {
333 | if (chrome.runtime.lastError) {
334 | console.error('Error resetting custom prompt:', chrome.runtime.lastError);
335 | showStatus('שגיאה באיפוס ההנחיה.', true);
336 | } else {
337 | if (customPromptTextarea) customPromptTextarea.value = '';
338 | console.log('Custom prompt reset.');
339 | showStatus('הנחיה אופסה לברירת מחדל.', false);
340 | }
341 | });
342 | });
343 | }
344 |
345 | if (viewDefaultPromptsButton) {
346 | viewDefaultPromptsButton.addEventListener('click', () => {
347 | if (defaultSummaryPromptDisplay) defaultSummaryPromptDisplay.textContent = DEFAULT_SUMMARY_PROMPT_TEXT_DISPLAY;
348 | if (defaultQaPromptDisplay) defaultQaPromptDisplay.textContent = DEFAULT_QA_PROMPT_TEXT_DISPLAY;
349 | if (defaultPromptsDisplayArea) {
350 | defaultPromptsDisplayArea.style.display = defaultPromptsDisplayArea.style.display === 'none' ? 'block' : 'none';
351 | }
352 | });
353 | }
354 | }
355 |
356 | function loadCustomPrompt() {
357 | if (customPromptTextarea) {
358 | chrome.storage.local.get('customSystemPrompt', (result) => {
359 | if (chrome.runtime.lastError) {
360 | console.error('Error loading custom prompt:', chrome.runtime.lastError);
361 | return;
362 | }
363 | if (result.customSystemPrompt) {
364 | customPromptTextarea.value = result.customSystemPrompt;
365 | }
366 | });
367 | }
368 | }
369 |
370 | function showAILoading(feature) {
371 | if (feature === 'summarize' && summarizeButton) {
372 | summarizeButton.disabled = true;
373 | summarizeButton.innerHTML = ` מסכם...`;
374 | } else if (feature === 'ask' && askQuestionButton) {
375 | askQuestionButton.disabled = true;
376 | if (aiQueryInput) aiQueryInput.disabled = true;
377 | }
378 | }
379 |
380 | function hideAILoading(feature) {
381 | const messagesAvailable = !!currentSelectedChatId;
382 | const chatInputArea = document.querySelector('.chat-input-area');
383 |
384 | if (feature === 'summarize' && summarizeButton) {
385 | summarizeButton.disabled = !messagesAvailable;
386 | summarizeButton.innerHTML = ` סכם קבוצה`;
387 | if (summarizeButton) summarizeButton.style.display = currentSelectedChatId ? 'flex' : 'none';
388 | } else if (feature === 'ask' && askQuestionButton) {
389 | askQuestionButton.disabled = !messagesAvailable;
390 | if (aiQueryInput) aiQueryInput.disabled = !messagesAvailable;
391 | }
392 | if (chatInputArea) chatInputArea.style.display = currentSelectedChatId ? 'flex' : 'none';
393 | if(summarizeButton) { // Redundant check but safe
394 | summarizeButton.style.display = currentSelectedChatId ? 'flex' : 'none';
395 | summarizeButton.disabled = !messagesAvailable;
396 | }
397 | }
398 |
399 | function isValidDdMmYyyy(dateString) {
400 | if (!dateString) return true;
401 | const regex = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
402 | const parts = dateString.match(regex);
403 | if (!parts) return false;
404 | const day = parseInt(parts[1], 10);
405 | const month = parseInt(parts[2], 10);
406 | const year = parseInt(parts[3], 10);
407 | if (year < 1000 || year > 3000 || month === 0 || month > 12) return false;
408 | const monthLength = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
409 | if (year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0)) monthLength[1] = 29;
410 | return day > 0 && day <= monthLength[month - 1];
411 | }
412 |
413 | function setupNewFeatureButtons() {
414 | if (!summarizeButton || !askQuestionButton || !aiQueryInput) {
415 | console.error('AI feature buttons or input not found in DOM.');
416 | return;
417 | }
418 | hideAILoading('summarize');
419 | hideAILoading('ask');
420 |
421 | summarizeButton.addEventListener('click', async () => {
422 | if (!currentSelectedChatId) {
423 | addMessageToChat('assistant', 'יש לבחור קבוצה לפני בקשת סיכום.', true);
424 | return;
425 | }
426 | const startDate = startDateInput ? startDateInput.value.trim() : null;
427 | const endDate = endDateInput ? endDateInput.value.trim() : null;
428 | if ((startDate && !isValidDdMmYyyy(startDate)) || (endDate && !isValidDdMmYyyy(endDate))) {
429 | addMessageToChat('assistant', 'פורמט תאריך לא תקין. אנא השתמש בפורמט DD/MM/YYYY או השאר ריק.', true);
430 | return;
431 | }
432 | addMessageToChat('user', `מבקש סיכום עבור ${currentSelectedChatName || 'הקבוצה הנבחרת'}${startDate || endDate ? ` (תאריכים: ${startDate || ''} - ${endDate || ''})` : ''}.`);
433 | showAILoading('summarize');
434 | chrome.storage.local.get(['customSystemPrompt', 'userOpenAIApiKey'], async (storageResult) => {
435 | if (chrome.runtime.lastError) {
436 | console.error('Error getting data from storage for summary:', chrome.runtime.lastError);
437 | addMessageToChat('assistant', 'שגיאה בטעינת הגדרות.', true);
438 | hideAILoading('summarize');
439 | return;
440 | }
441 | const customPromptText = storageResult.customSystemPrompt || null;
442 | const userApiKey = storageResult.userOpenAIApiKey || null;
443 |
444 | let logMsg = "[PANEL.JS] For summary: ";
445 | logMsg += customPromptText ? "Sending custom prompt. " : "No custom prompt. ";
446 | logMsg += userApiKey ? "Sending user API key." : "No user API key.";
447 | console.log(logMsg);
448 |
449 | try {
450 | const requestBody = {
451 | chatId: currentSelectedChatId,
452 | startDate: startDate || null,
453 | endDate: endDate || null,
454 | fetchOnlyUnread: fetchUnreadCheckbox ? fetchUnreadCheckbox.checked : false,
455 | ...(customPromptText && { customPromptText: customPromptText }),
456 | ...(userApiKey && { openaiApiKey: userApiKey })
457 | };
458 | const response = await fetch(`${BACKEND_URL}/ai/summarize`, {
459 | method: 'POST',
460 | headers: { 'Content-Type': 'application/json' },
461 | body: JSON.stringify(requestBody)
462 | });
463 | const data = await response.json();
464 | if (!response.ok) throw new Error(data.error || `HTTP error ${response.status}`);
465 | addMessageToChat('assistant', `סיכום עבור ${currentSelectedChatName}:\n${data.summary}`);
466 | } catch (error) {
467 | console.error('Error summarizing group:', error);
468 | addMessageToChat('assistant', `שגיאה בסיכום: ${error.message}`, true);
469 | } finally {
470 | hideAILoading('summarize');
471 | }
472 | });
473 | });
474 |
475 | askQuestionButton.addEventListener('click', async () => {
476 | const question = aiQueryInput.value.trim();
477 | if (!question) {
478 | addMessageToChat('assistant', 'יש להקליד שאלה תחילה.', true);
479 | return;
480 | }
481 | if (!currentSelectedChatId) {
482 | addMessageToChat('assistant', 'יש לבחור קבוצה עם הודעות לפני שליחת שאלה.', true);
483 | return;
484 | }
485 | const startDate = startDateInput ? startDateInput.value.trim() : null;
486 | const endDate = endDateInput ? endDateInput.value.trim() : null;
487 | if ((startDate && !isValidDdMmYyyy(startDate)) || (endDate && !isValidDdMmYyyy(endDate))) {
488 | addMessageToChat('assistant', 'פורמט תאריך לא תקין. אנא השתמש בפורמט DD/MM/YYYY או השאר ריק.', true);
489 | return;
490 | }
491 | addMessageToChat('user', `שאלה: ${question}${startDate || endDate ? ` (בהקשר תאריכים: ${startDate || ''} - ${endDate || ''})` : ''}`);
492 | showAILoading('ask');
493 |
494 | chrome.storage.local.get(['customSystemPrompt', 'userOpenAIApiKey'], async (storageResult) => {
495 | if (chrome.runtime.lastError) {
496 | console.error('Error getting data from storage for Q&A:', chrome.runtime.lastError);
497 | addMessageToChat('assistant', 'שגיאה בטעינת הגדרות.', true);
498 | hideAILoading('ask');
499 | return;
500 | }
501 | const customPromptText = storageResult.customSystemPrompt || null;
502 | const userApiKey = storageResult.userOpenAIApiKey || null;
503 |
504 | let logMsg = "[PANEL.JS] For Q&A: ";
505 | logMsg += customPromptText ? "Sending custom prompt. " : "No custom prompt. ";
506 | logMsg += userApiKey ? "Sending user API key." : "No user API key.";
507 | console.log(logMsg);
508 |
509 | try {
510 | const requestBody = {
511 | chatId: currentSelectedChatId,
512 | question: question,
513 | startDate: startDate || null,
514 | endDate: endDate || null,
515 | fetchOnlyUnread: fetchUnreadCheckbox ? fetchUnreadCheckbox.checked : false,
516 | ...(customPromptText && { customPromptText: customPromptText }),
517 | ...(userApiKey && { openaiApiKey: userApiKey })
518 | };
519 | const response = await fetch(`${BACKEND_URL}/ai/ask`, {
520 | method: 'POST',
521 | headers: { 'Content-Type': 'application/json' },
522 | body: JSON.stringify(requestBody)
523 | });
524 | const data = await response.json();
525 | if (!response.ok) throw new Error(data.error || `HTTP error ${response.status}`);
526 | addMessageToChat('assistant', `תשובה:\n${data.answer}`);
527 | aiQueryInput.value = '';
528 | } catch (error) {
529 | console.error('Error asking question:', error);
530 | addMessageToChat('assistant', `שגיאה בקבלת תשובה: ${error.message}`, true);
531 | } finally {
532 | hideAILoading('ask');
533 | }
534 | });
535 | });
536 | }
537 |
538 | async function checkBackendAndWhatsAppStatus() {
539 | const backendOk = await checkBackendConnection();
540 | const elementsToHide = [
541 | chatSelectorArea, summarizeButton, dateFilterAreaEl,
542 | filterOptionsLabelEl, unreadFilterAreaEl, document.querySelector('.chat-input-area')
543 | ];
544 |
545 | if (backendOk) {
546 | try {
547 | const response = await fetch(`${BACKEND_URL}/auth/status`);
548 | if (!response.ok) {
549 | const errorData = await response.json().catch(() => ({ message: 'Failed to get WhatsApp status details.' }));
550 | throw new Error(errorData.message || `HTTP error ${response.status}`);
551 | }
552 | const status = await response.json();
553 | updateWhatsappConnectionStatus(status.message, !status.ready && !status.qrCodeAvailable);
554 |
555 | if (status.ready) {
556 | if(whatsappQrCodeArea) whatsappQrCodeArea.style.display = 'none';
557 | // Filter elements visibility will be handled by initAuthAndGroupListing after groups are fetched
558 | fetchGroups();
559 | } else if (status.qrCodeAvailable) {
560 | elementsToHide.forEach(el => { if (el) el.style.display = 'none'; });
561 | fetchAndDisplayQrCode();
562 | } else {
563 | elementsToHide.forEach(el => { if (el) el.style.display = 'none'; });
564 | if(whatsappQrCodeArea) whatsappQrCodeArea.style.display = 'none';
565 | }
566 | } catch (error) {
567 | updateWhatsappConnectionStatus(`Error checking WhatsApp: ${error.message}`, true);
568 | }
569 | } else {
570 | updateWhatsappConnectionStatus('Backend not connected. Cannot check WhatsApp status.', true);
571 | }
572 | hideInitialLoadingIndicator();
573 | }
574 |
575 | function initAuthAndGroupListing() {
576 | if (chatSelectorDropdown) {
577 | chatSelectorDropdown.addEventListener('change', async () => {
578 | currentSelectedChatId = chatSelectorDropdown.value;
579 | const selectedOption = chatSelectorDropdown.options[chatSelectorDropdown.selectedIndex];
580 | currentSelectedChatName = selectedOption ? selectedOption.text.split(' (')[0] : null;
581 |
582 | const chatInputArea = document.querySelector('.chat-input-area');
583 | const elementsToShow = [summarizeButton, filterOptionsLabelEl, unreadFilterAreaEl, dateFilterAreaEl, chatInputArea];
584 | const elementsToHide = [summarizeButton, filterOptionsLabelEl, unreadFilterAreaEl, dateFilterAreaEl, chatInputArea];
585 |
586 |
587 | if (currentSelectedChatId) {
588 | console.log(`[PANEL.JS] Group selected: ${currentSelectedChatName} (ID: ${currentSelectedChatId})`);
589 | showStatus(`טוען הודעות עבור ${currentSelectedChatName}...`);
590 | fetchedMessagesForSelectedChat = [];
591 |
592 | elementsToShow.forEach(el => { if(el) el.style.display = el === summarizeButton || el === chatInputArea ? 'flex' : 'block';});
593 | if(aiQueryInput) aiQueryInput.disabled = false;
594 | if(askQuestionButton) askQuestionButton.disabled = false;
595 |
596 | hideAILoading('summarize'); // Correctly sets button state
597 | hideAILoading('ask'); // Correctly sets button state
598 |
599 | try {
600 | const messageCount = 1000;
601 | const response = await fetch(`${BACKEND_URL}/groups/${currentSelectedChatId}/messages?count=${messageCount}`);
602 | if (!response.ok) {
603 | const errorData = await response.json().catch(() => ({ error: 'Failed to fetch messages.' }));
604 | throw new Error(errorData.error || `HTTP error ${response.status}`);
605 | }
606 | const messages = await response.json();
607 | fetchedMessagesForSelectedChat = messages;
608 | console.log(`[PANEL.JS] Fetched ${fetchedMessagesForSelectedChat.length} messages for ${currentSelectedChatName}`);
609 | showStatus(`${fetchedMessagesForSelectedChat.length} הודעות נטענו עבור ${currentSelectedChatName}. מוכן לפעולות AI.`);
610 |
611 | hideAILoading('summarize');
612 | hideAILoading('ask');
613 |
614 | } catch (error) {
615 | console.error('[PANEL.JS] Error fetching messages:', error);
616 | showStatus(`שגיאה בטעינת הודעות: ${error.message}`, true);
617 | fetchedMessagesForSelectedChat = [];
618 | hideAILoading('summarize');
619 | hideAILoading('ask');
620 | }
621 | } else {
622 | currentSelectedChatName = null;
623 | fetchedMessagesForSelectedChat = [];
624 | elementsToHide.forEach(el => { if(el) el.style.display = 'none'; });
625 | if(aiQueryInput) aiQueryInput.disabled = true;
626 | if(askQuestionButton) askQuestionButton.disabled = true;
627 | showStatus('לא נבחרה קבוצה.');
628 | hideAILoading('summarize'); // Ensure buttons are correctly disabled/hidden
629 | hideAILoading('ask');
630 | }
631 | });
632 | }
633 | }
634 |
635 | let backendConnected = false;
636 |
637 | async function checkBackendConnection() {
638 | const debugInfo = document.getElementById('debug-connection-info');
639 | try {
640 | const response = await fetch(`${BACKEND_URL}/health`);
641 | if (response.ok) {
642 | if (debugInfo) {
643 | debugInfo.textContent = `Backend: Connected`;
644 | debugInfo.style.color = 'green';
645 | }
646 | backendConnected = true;
647 | return true;
648 | } else {
649 | if (debugInfo) {
650 | debugInfo.textContent = `Backend: Failed (Status ${response.status})`;
651 | debugInfo.style.color = 'red';
652 | }
653 | backendConnected = false;
654 | return false;
655 | }
656 | } catch (error) {
657 | if (debugInfo) {
658 | debugInfo.textContent = `Backend: Error (${error.message.substring(0,20)}...)`;
659 | debugInfo.style.color = 'red';
660 | }
661 | backendConnected = false;
662 | return false;
663 | }
664 | }
665 | function isBackendConnected() { return backendConnected; }
666 |
667 | function showInitialLoadingIndicator() {
668 | if (document.querySelector('.initial-loading-indicator')) return;
669 | const indicator = document.createElement('div');
670 | indicator.className = 'initial-loading-indicator';
671 | indicator.innerHTML = `Initializing WhatsApp Insights AI...
`;
672 | document.body.appendChild(indicator);
673 | }
674 |
675 | function hideInitialLoadingIndicator() {
676 | const indicator = document.querySelector('.initial-loading-indicator');
677 | if (indicator) indicator.remove();
678 | }
679 |
680 | function showStatus(message, isError = false) {
681 | const statusElement = document.getElementById('ai-status-message');
682 | if (statusElement) {
683 | statusElement.textContent = message;
684 | statusElement.className = `status-message ${isError ? 'status-error' : 'status-ok'}`;
685 | statusElement.style.display = 'block';
686 | if (!isError) {
687 | setTimeout(() => { statusElement.style.display = 'none'; }, 4000);
688 | }
689 | } else {
690 | console.log(`Status (${isError ? 'Error' : 'Info'}): ${message}`);
691 | }
692 | }
693 |
694 | function addMessageToChat(sender, text, isError = false) {
695 | if (!aiChatMessagesDiv) {
696 | console.error("Chat message display area not found");
697 | return;
698 | }
699 | const messageItem = document.createElement('div');
700 | messageItem.classList.add('message', sender === 'user' ? 'user-message' : 'assistant-message');
701 | if (isError) messageItem.classList.add('error-message');
702 | const senderNameStrong = document.createElement('strong');
703 | senderNameStrong.textContent = sender === 'user' ? 'You:' : 'AI Assistant:';
704 | const messageContentDiv = document.createElement('div');
705 | messageContentDiv.classList.add('message-content');
706 | messageContentDiv.innerHTML = text;
707 | messageItem.appendChild(senderNameStrong);
708 | messageItem.appendChild(messageContentDiv);
709 | aiChatMessagesDiv.appendChild(messageItem);
710 | aiChatMessagesDiv.scrollTop = aiChatMessagesDiv.scrollHeight;
711 | }
712 |
713 | function setupChatInterface() {
714 | }
715 |
716 | function attachLoadingIndicators() {
717 | }
718 |
719 | function addRefreshButton() {
720 | const refreshButton = document.getElementById('refresh-button');
721 | if (refreshButton) {
722 | refreshButton.addEventListener('click', () => {
723 | console.log("Refresh button clicked. Re-checking status.");
724 | showInitialLoadingIndicator();
725 | checkBackendAndWhatsAppStatus();
726 | });
727 | }
728 | }
--------------------------------------------------------------------------------