Minor touchups for smol talk, abilty to go back/forward in browser hi…

…story (#114) Co-authored-by: swyxio <[email protected]>
smol-ai · Aug 7, 2023 · 2f0c366 · 2f0c366
1 parent 112a33b
commit 2f0c366
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 41 deletions.
diff --git a/index.css b/index.css
@@ -13,7 +13,7 @@ body {
 }
 
 :root {
-	--actual-height: calc(100vh - 80px);
+	--actual-height: calc(100vh - 20px);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,13 +24,14 @@ body {
 
 .page {
 	--superprompt-height: 100px;
+	--titlebar-height: 20px;
 
 	background: #eeeeee;
 	/* overflow: auto; */
 	/* disabled because its quite buggy */
 	/* resize: both;  */
 	width: 100%;
-	height: calc(100vh - var(--superprompt-height));
+	height: calc(100vh - var(--superprompt-height) - var(--titlebar-height));
 	margin-top: 4px;
 	margin: 0 auto;
 	position: relative;
@@ -97,13 +98,25 @@ body {
 	stroke: rgba(255, 255, 255, 0.8);
 }
 
+#webviewContainer {
+	border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	display: flex;
+	height: calc(100vh - 100px);
+}
+
+.titlebar {
+	display: flex;
+	justify-content: space-around;
+}
+
 webview {
 	/* overflow: hidden; */
 	position: absolute;
-	top: 0;
+	top: 20px;
 	left: 0;
 	width: 100%;
-	height: calc(100vh - var(--superprompt-height));
+	height: calc(100vh - var(--superprompt-height) - var(--titlebar-height));
 	display: inline-flex !important;
 }
 

diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
 	</head>
 
 	<body class="">
-		<div id="webviewContainer" class="flex split">
+		<div id="webviewContainer" class="split">
 			<!-- Panes Go Here -->
 		</div>
 		<form id="form" class="">

diff --git a/index.js b/index.js
@@ -36,10 +36,10 @@ const providers = {
 	Together: require('./providers/together'),
 	Perplexity: require('./providers/perplexity'),
 	Phind: require('./providers/phind'),
+	PerplexityLlama: require('./providers/perplexity-llama.js'),
 	HuggingChat: require('./providers/huggingchat'),
 	OobaBooga: require('./providers/oobabooga'),
 	Smol: require('./providers/smol'),
-	PerplexityLlama: require('./providers/perplexity-llama.js'),
 };
 
 // Getting all the providers in an array
@@ -80,20 +80,21 @@ app.on('ready', () => {
 			icon: image,
 			transparent: path.join(__dirname, `images/iconApp.png`),
 			autoHideMenuBar: false,
+			// zoomFactor: 0.8, // handled by webview.setZoomLevel, dont bother setting this
 			webPreferences: {
 				webviewTag: true,
 				nodeIntegration: true,
 				contextIsolation: false,
 				enableWebView: true, // from chatgpt
 				// nativeWindowOpen: true,
 			},
-			width: 1200,
+			width,
 			height: 750,
 		},
 		tray,
 		showOnAllWorkspaces: false,
 		preloadWindow: true,
-		showDockIcon: false,
+		showDockIcon: true,
 		icon: image,
 	});
 
@@ -169,9 +170,9 @@ app.on('ready', () => {
 							});
 						}
 
-						settingsWindow.once('ready-to-show', () => {
-							mb.hideWindow();
-						});
+						// settingsWindow.once('ready-to-show', () => {
+						// 	mb.hideWindow();
+						// });
 					},
 				},
 			];
@@ -288,15 +289,15 @@ app.on('ready', () => {
 		const menu = new Menu();
 
 		function quickOpen() {
-			if (window.isVisible()) {
-				mb.hideWindow();
-			} else {
-				mb.showWindow();
-				if (process.platform == 'darwin') {
-					mb.app.show();
-				}
-				mb.app.focus();
+			// if (window.isVisible()) {
+			// 	mb.hideWindow();
+			// } else {
+			mb.showWindow();
+			if (process.platform == 'darwin') {
+				mb.app.show();
 			}
+			// }
+			mb.app.focus();
 		}
 
 		globalShortcut.register(
@@ -364,6 +365,8 @@ app.on('ready', () => {
 				if (key === 'y') contents.redo();
 				if (key === 'q') app.quit();
 				if (key === 'r') contents.reload();
+				if (key === 'h') contents.goBack();
+				if (key === 'l') contents.goForward();
 			});
 		}
 		// we can't set the native app menu with "menubar" so need to manually register these events
@@ -379,6 +382,8 @@ app.on('ready', () => {
 			if (key === 'y') contents.redo();
 			if (key === 'q') app.quit();
 			if (key === 'r') contents.reload();
+			if (key === 'h') contents.goBack();
+			if (key === 'l') contents.goForward();
 		});
 	});
 

diff --git a/interface.js b/interface.js
@@ -15,10 +15,10 @@ const providers = {
 	Together: require('./providers/together'),
 	Perplexity: require('./providers/perplexity'),
 	Phind: require('./providers/phind'),
+	PerplexityLlama: require('./providers/perplexity-llama.js'),
 	HuggingChat: require('./providers/huggingchat'),
 	OobaBooga: require('./providers/oobabooga'),
 	Smol: require('./providers/smol'),
-	PerplexityLlama: require('./providers/perplexity-llama.js'),
 };
 
 const { drawPanes, updateSplitSizes } = require('./src/panes');

diff --git a/providers/huggingchat.js b/providers/huggingchat.js
@@ -75,7 +75,7 @@ class HuggingChat extends Provider {
 	}
 
 	static isEnabled() {
-		return store.get(`${this.webviewId}Enabled`, true);
+		return store.get(`${this.webviewId}Enabled`, false);
 	}
 }
 

diff --git a/providers/openai.js b/providers/openai.js
@@ -3,7 +3,7 @@ const store = new Store();
 
 const Provider = require('./provider');
 
-class OpenAi extends Provider {
+class OpenAI extends Provider {
 	static webviewId = 'webviewOAI';
 	static fullName = 'OpenAI ChatGPT';
 
@@ -70,4 +70,4 @@ class OpenAi extends Provider {
 	}
 }
 
-module.exports = OpenAi;
+module.exports = OpenAI;
diff --git a/providers/phind.js b/providers/phind.js
@@ -16,15 +16,11 @@ class Phind extends Provider {
             inputElement = document.querySelector('textarea[placeholder*="Send message"]');
         }
 
-        function simulateUserInput(element, text) {
-          var nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
-          var event = new Event('input', { bubbles: true});
+        var nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
+        var event = new Event('input', { bubbles: true});
 
-          nativeTextAreaValueSetter.call(inputElement, text);
-          inputElement.dispatchEvent(event);
-        }
-
-        simulateUserInput(inputElement, "${input}");
+        nativeTextAreaValueSetter.call(inputElement, "${input}");
+        inputElement.dispatchEvent(event);
       `);
 	}
 

diff --git a/providers/smol.js b/providers/smol.js
@@ -11,17 +11,32 @@ class SmolTalk extends Provider {
 
 	static handleInput(input) {
 		this.getWebview().executeJavaScript(`
-    function simulateUserInput(element, text) {
-      const inputEvent = new Event('input', { bubbles: true });
-      element.focus();
-      element.value = text;
-      element.dispatchEvent(inputEvent);
-    }
-    var inputElement = document.querySelector('#smol-inputbox')
-    simulateUserInput(inputElement, "${input}");
+		var inputElement = document.querySelector('#smol-inputbox')
+		function simulateUserInput(element, text) {
+			var nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
+			var event = new Event('input', { bubbles: true});
+
+			nativeTextAreaValueSetter.call(inputElement, text);
+			inputElement.dispatchEvent(event);
+		}
+
+		simulateUserInput(inputElement, "${input}");
 	`);
 	}
 
+	static clearCookies() {
+		this.getWebview().executeJavaScript(`
+      const cookies = document.cookie.split(";");
+  
+      for (let i = 0; i < cookies.length; i++) {
+          const cookie = cookies[i];
+          const eqPos = cookie.indexOf("=");
+          const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
+          document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
+      }
+      `);
+	}
+
 	static handleSubmit() {
 		this.getWebview().executeJavaScript(`
 
@@ -72,7 +87,7 @@ class SmolTalk extends Provider {
 	}
 
 	static isEnabled() {
-		return store.get(`${this.webviewId}Enabled`, false);
+		return store.get(`${this.webviewId}Enabled`, true);
 	}
 }
 

diff --git a/src/panes.js b/src/panes.js
@@ -22,13 +22,28 @@ function drawPanes(providers) {
 		div.className = 'page darwin';
 		div.id = provider.paneId();
 
+		// create a title bar
+		const titlebar = document.createElement('div');
+		titlebar.className = 'titlebar';
+		// add in a h1 with the provider name
+		const title = document.createElement('span');
+		title.innerHTML = provider.name;
+		titlebar.appendChild(title);
+		// add in a button to toggle dark mode
+		const darkModeButton = document.createElement('button');
+		darkModeButton.innerHTML = 'Clear Cookies';
+		darkModeButton.addEventListener('click', provider.clearCookies);
+		titlebar.appendChild(darkModeButton);
+
+		div.appendChild(titlebar);
+
 		// Create a new webview and set its id, source url, and autosize attributes
 		const webview = document.createElement('webview');
 		webview.id = provider.webviewId;
 		webview.src = provider.url;
 		webview.autosize = 'on';
 		webview.addEventListener('dom-ready', () => {
-			webview.setZoomLevel(0); // Set initial zoom level here
+			webview.setZoomLevel(-1); // Set initial zoom level here
 		});
 
 		// If the provider has a getUserAgent function, set the webview's useragent