josStorer / chatGPTBox

Integrating ChatGPT into your browser deeply, everything you need is here
MIT License
10.03k stars 755 forks source link

Reduce NotificationForChatGPTWeb popup to 2500ms, add Explain as default selection tool option #710

Closed azidancorp closed 5 months ago

azidancorp commented 6 months ago

Since it appears to refresh token each time the website is navigated to/opened, the long popup used to be a minor nuisance. Now on the new ChatGPT website it actually obstructs the user icon menu, which is on the top right corner

azidancorp commented 6 months ago

Also "Explain" is the option I use pretty much more than all the rest combined, I'd think that would be the same for most other users

josStorer commented 6 months ago

Actually, most of the time, "explain" and "ask" serve the same function. In my daily usage, I find "ask" to be more versatile. Have you ever tried using "ask" instead of "explain"? What are some typical differences, or situations where "ask" performs poorly?

Mohamed3nan commented 6 months ago

Actually, most of the time, "explain" and "ask" serve the same function. In my daily usage, I find "ask" to be more versatile. Have you ever tried using "ask" instead of "explain"? What are some typical differences, or situations where "ask" performs poorly?

456

IMO if we can make all prompts "optional" we will get the most out of this extension, I tried something but not working, looks some issues with local storage..

here take a look please:

https://github.com/josStorer/chatGPTBox/assets/19733801/e4e3e435-af0e-41c8-964e-9a66b1ff53c8

Here is a change suggested for the SelectionTools.jsx file:


// SelectionTools.jsx
import { useTranslation } from 'react-i18next';
import { config as toolsConfig } from '../../content-script/selection-tools/index.mjs';
import PropTypes from 'prop-types';
import { useState, useEffect } from 'react';

SelectionTools.propTypes = {
  config: PropTypes.object.isRequired,
  updateConfig: PropTypes.func.isRequired,
};

export function SelectionTools({ config, updateConfig }) {
  const { t } = useTranslation();
  const [toolValues, setToolValues] = useState({});

  useEffect(() => {
    // Load initial values from local storage or use default from config
    const storedToolData = JSON.parse(localStorage.getItem('toolData')) || {};
    const initialToolValues = {};
    config.selectionTools.forEach((key) => {
      initialToolValues[key] = storedToolData[key] || '';
    });
    setToolValues(initialToolValues);
  }, [config.selectionTools]);

  const handleCheckboxChange = (key, checked) => {
    const activeSelectionTools = config.activeSelectionTools.filter((i) => i !== key);
    if (checked) activeSelectionTools.push(key);

    // Update the active selection tools in local storage
    localStorage.setItem('activeSelectionTools', JSON.stringify(activeSelectionTools));
    updateConfig({ ...config, activeSelectionTools });
  };

  const handleInputChange = (key, value) => {
    const newToolValues = { ...toolValues, [key]: value };
    setToolValues(newToolValues);

    // Update the tool data in local storage and the main config
    localStorage.setItem('toolData', JSON.stringify(newToolValues));
    updateConfig({ ...config, toolData: newToolValues });
  };

  return (
    <>
      {config.selectionTools.map((key) => (
        <div key={key} style={{ marginBottom: '10px' }}>
          <label>
            <input
              type="checkbox"
              checked={config.activeSelectionTools.includes(key)}
              onChange={(e) => handleCheckboxChange(key, e.target.checked)}
            />
            {t(toolsConfig[key].label)}
          </label>
          {config.activeSelectionTools.includes(key) && (
            <input
              type="text"
              value={toolValues[key]}
              onChange={(e) => handleInputChange(key, e.target.value)}
              placeholder={t(`Enter value for ${toolsConfig[key].label}`)}
            />
          )}
        </div>
      ))}
    </>
  );
}
azidancorp commented 5 months ago

@josStorer Given the prompt, I only use the "Ask" response when I highlight a question and want an answer, as opposed to seeking an explanation of a highlighted text segment. For OpenAI models the difference isn't too terrible (but still noticeable) as they have been trained a specific way, but the differences become much more apparent when you begin to use different models and providers.

@Mohamed3nan Indeed, I was hoping to eventually get to the point where the users can do their own prompt management, edit base prompts and/or add their own ones. That would be a great addition. Another similar feature (I'd have called it Ask, but perhaps Query is fitting) would be to ask a question about highlighted text.

Sider currently has all these features, would be great to absorb them

josStorer commented 5 months ago

v2.5.6

NotificationForChatGPTWeb will now only pop up when necessary, direct access to https://chatgpt.com will no longer pop up.

Simple custom selection tools is now supported