UI Updates, ChatGPT UX.

[techwithanirudh]

Hello,

I am a user of your talk to ChatGPT project and I really appreciate your work. However, I have a suggestion for improving the user interface of the widget.

Currently, the UI is very simple and does not resemble chatgpt's UI.

I have created some tampermonkey code that modifies the UI of the widget to make it look more good looking.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://chat.openai.com/chat
// @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com
// @grant        none
// ==/UserScript==

(function () {
  "use strict";
  setTimeout(() => {
    var ttgpt = document.querySelector("#TTGPTSettings");
    var startBtn = ttgpt.querySelector("#CNStartButton");
    var heading = ttgpt.querySelector("a");
    var br = ttgpt.querySelector("br");
    br.remove();

    ttgpt.style.padding = "0px 8px 0px 8px";
    heading.style.color = "transparent";
    heading.style.height = "1px";
    heading.style.pointerEvents = "none";
    heading.style.display = "block";

    heading.href = "javascript:void(0)";
    heading.onClick = () => {};

    ttgpt.style.background = "#3e3f4b";
    startBtn.style.cssText = "";
    startBtn.classList.value =
      "flex py-3 px-3 items-center justify-center w-full gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-2 flex-shrink-0 border border-white/20 mt-3";
    startBtn.textContent = "🎙️Start Talking";

    setInterval(() => {
      try {
        var ttgptModal = document.querySelector("#TTGPTSettingsArea");

        ttgptModal.querySelector("table").style.width = "88%";

        ttgptModal.querySelectorAll("button").forEach((btn) => {
          btn.classList.value =
            " py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-2 flex-shrink-0 border border-white/20 bg-gray-900";
        });

        ttgptModal.querySelectorAll('input[type="text"]').forEach((input) => {
          input.classList.value =
            " flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]";
          input.style.color = "white";
          input.style.width = "100%";
          input.style.height = "37px";
        });

        ttgptModal.querySelectorAll('input[type="number"]').forEach((input) => {
          input.classList.value =
            " flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]";
          input.style.color = "white";
          input.style.width = "100%";
          input.style.height = "37px";
        });

        ttgptModal.querySelectorAll("select").forEach((select) => {
          select.classList.value =
            " flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]";
          select.style.color = "white";
          select.style.width = "100%";
          //   select.style.height = "50px";
        });
      } catch (e) {}
    }, 1000);

    // py-3 px-3 gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm mb-2 flex-shrink-0 border border-white/20 bg-gray-900
    // flex flex-col w-full py-2 flex-grow md:py-3 md:pl-4 relative border border-black/10 bg-white dark:border-gray-900/50 dark:text-white dark:bg-gray-700 rounded-md shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]
  }, 1500);
})();

[C-Nedelcu]

Could you maybe send a screenshot for those of us who don't use tampermonkey? And how about creating a pull request to implement your UI changes?

[techwithanirudh]

K, You can also just run this code in the console and this will give you the same result.

[techwithanirudh]

[C-Nedelcu]

Does it work in light mode too?

[techwithanirudh]

Wait... Going to update my pull request

[C-Nedelcu]

ok sure take your time. :) thanks for your contribs

[techwithanirudh]

Wlc! It works in light mode now!

[C-Nedelcu]

Hello, I am really sorry but I had to implement other changes to the settings UI so I ended up not using your code. The settings menu is now more compact (to fit smaller screens) And it is scrollable, so that small screens can go all the way down and press Save correctly. I appreciate the time you have spent working on this and again, I am very sorry that I ended up discarding your changes.