Merge branch 'main' into fix/refreshing-commands

src/components/job/Message.tsx

@@ -101,15 +101,15 @@ const Message = (props: MessageProps) => {
   return (
     <div
       key={index}
-      className={messageType === "user" && loading ? 'usermessagewaiting' : (messageType === "initial" || messageType === "api" || messageType === 'existing_api') ? "apimessage" : "usermessage"}
+      className={messageType === "user" && loading ? 'usermessagewaiting' : (messageType === "initial" || messageType === "api" || messageType === 'existing_api') ? "apimessage pt-4 pb-10 px-6 text-white text-sm" : "usermessage py-4 px-6 bg-gray-900 text-gray-500 italic text-sm"}
     >
       {messageType === 'user' ? <img src = {usericon} alt = "User" width = "30" height = "30" className = "usericon" />
       : <img src = {indigosmall} alt = "AI" width = "30" height = "30" className = "boticon" />}
       <div className = "markdownanswer">
         {/* <ReactMarkdown
           remarkPlugins={[remarkMath, rehypeKatex]}
         > */}
-        <code style={{color: '#e0e0e0'}}>
+        <code>
           {output}
         </code>
         {
@@ -121,7 +121,7 @@ const Message = (props: MessageProps) => {
         {/* </ReactMarkdown>   */}
       </div>
       {messageType !== 'user' &&
-        <div style={{position: 'absolute', bottom: 10, right: 10, display: 'flex', color: '#6D5ACF'}} title="Copy">
+        <div style={{position: 'absolute', bottom: 25, right: 25, display: 'flex', color: '#6D5ACF'}} title="Copy">
           <div onClick={copyToClipboard}>
             <svg viewBox='0 0 115.77 122.88' className="svgiconbutton" xmlns='http://www.w3.org/2000/svg'>
               <path d="M89.62,13.96v7.73h12.19h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02v0.02 v73.27v0.01h-0.02c-0.01,3.84-1.57,7.33-4.1,9.86c-2.51,2.5-5.98,4.06-9.82,4.07v0.02h-0.02h-61.7H40.1v-0.02 c-3.84-0.01-7.34-1.57-9.86-4.1c-2.5-2.51-4.06-5.98-4.07-9.82h-0.02v-0.02V92.51H13.96h-0.01v-0.02c-3.84-0.01-7.34-1.57-9.86-4.1 c-2.5-2.51-4.06-5.98-4.07-9.82H0v-0.02V13.96v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07V0h0.02h61.7 h0.01v0.02c3.85,0.01,7.34,1.57,9.86,4.1c2.5,2.51,4.06,5.98,4.07,9.82h0.02V13.96L89.62,13.96z M79.04,21.69v-7.73v-0.02h0.02 c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v64.59v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h12.19V35.65 v-0.01h0.02c0.01-3.85,1.58-7.34,4.1-9.86c2.51-2.5,5.98-4.06,9.82-4.07v-0.02h0.02H79.04L79.04,21.69z M105.18,108.92V35.65v-0.02 h0.02c0-0.91-0.39-1.75-1.01-2.37c-0.61-0.61-1.46-1-2.37-1v0.02h-0.01h-61.7h-0.02v-0.02c-0.91,0-1.75,0.39-2.37,1.01 c-0.61,0.61-1,1.46-1,2.37h0.02v0.01v73.27v0.02h-0.02c0,0.91,0.39,1.75,1.01,2.37c0.61,0.61,1.46,1,2.37,1v-0.02h0.01h61.7h0.02 v0.02c0.91,0,1.75-0.39,2.37-1.01c0.61-0.61,1-1.46,1-2.37h-0.02V108.92L105.18,108.92z"/>

src/components/job/RunJob.tsx

@@ -4,6 +4,8 @@ import Message from './Message';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useNavigate } from 'react-router-dom';
+import IconBack from '../../renderer/icons/IconBack';
+import IconHistory from '../../renderer/icons/IconHistory';
 
 export const runtime = 'edge';
 
@@ -151,14 +153,14 @@ export default function RunJob({id}: any) {
   }
 
   return (
-    <main className="main">
+    <main className="main flex flex-col h-screen overflow-x-hidden">
       {/* <button onClick={getJob}>
         Get Initial Job
       </button> */}
       {/* <div className = {styles.originalPrompt}>
         {originalPrompt}
       </div> */}
-      <div className="cloud">
+      <div className="cloud flex-grow overflow-y-auto">
         <div
           ref={messageListRef}
           className="messagelist"
@@ -179,22 +181,22 @@ export default function RunJob({id}: any) {
 
       <div className="center">
 
-        <div className="cloudform">
-          <form onSubmit={onSubmit}>
+        <div className="cloudform px-4">
+          <form className='relative' onSubmit={onSubmit}>
             <input
               disabled = {loading}
               autoFocus = {false}
               type="text"
               placeholder="Ask..."
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              className="textarea"
+              className="textarea w-full py-3 px-4 bg-gray-800  rounded-lg"
               ref = {textAreaRef}
             />
             <button
               type = "submit"
               disabled = {loading}
-              className="generatebutton"
+              className=" top-4 right-4 absolute"
             >
               <svg
                 viewBox='0 0 20 20'
@@ -209,7 +211,16 @@ export default function RunJob({id}: any) {
         <ToastContainer />
 
       </div>
-
+      <div className="flex flex-row">
+      <div onClick={() => navigate(-1)} className='flex flex-row flex-grow text-white cursor-pointer my-4 mx-8 w-auto'>
+          <span className='mr-2 w-auto'><IconBack/></span>
+          <span className='text-gray-400 text-xs'>Back</span>
+      </div>
+      <div onClick={() => navigate('/history')} className='flex flex-row text-white cursor-pointer my-4 mx-8 w-auto'>
+          <span className='mr-2 w-auto'><IconHistory/></span>
+          <span className='text-gray-400 text-xs'>History</span>
+      </div>
+      </div>
     </main>
   );
 }

src/components/job/styles.css

@@ -1,8 +1,4 @@
 .main {
-  display: block;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
   /* padding: 0rem;
   position: absolute;
   top: 0;
@@ -17,19 +13,12 @@
 }
 
 .cloudform {
-  position: relative;
+  /* position: relative; */
 }
 
 .textarea {
   position: relative;
   resize: none;
-  font-size: 14px;
-  padding: 1rem 2rem 1rem 2rem;
-  width: 100vw;
-  border: rgba(72,71,80,0.8) 1px solid;
-  border-radius: 0.5rem;
-  background: #161617;
-  color: #DCD9F1;
   outline: none;
 }
 
@@ -43,8 +32,6 @@
 
 .generatebutton {
   position: absolute;
-  top: 0.87rem;
-  right: 1rem;
   color: rgb(165, 162, 162);
   background: none;
   padding: 0.3rem;
@@ -114,12 +101,9 @@
 }
 
 .usermessage {
-  background: #333341;
-  padding: 1.5rem;
-  color: #DCD9F1;
-  font-size: 14px;
   position: relative;
   margin-bottom: 10px;
+  box-shadow: rgba(150, 129, 175, 0.1) 0px 0px 200px 0px inset;
 }
 
 .usermessagewaiting{
@@ -144,12 +128,10 @@
 }
 
 .apimessage {
-  background: #1c1b21;
-  padding: 1.5rem;
-  color: #DCD9F1;
+
   animation: fadein 0.5s;
-  font-size: 14px;
   position: relative;
+  box-shadow: rgba(66, 54, 77, 0.1) 0px 0px 400px 0px inset;
 }
 
 @keyframes fadein {
@@ -163,7 +145,6 @@
 
 .markdownanswer {
   line-height: 1.75;
-  font-size: 15px;
 }
 
 .markdownanswer a:hover {
@@ -172,14 +153,12 @@
 
 .markdownanswer a {
   color: #16bed7;
-  font-weight: 500;
 }
 
 .markdownanswer code {
-  color: #15cb19;
-  font-weight:300;
   white-space: pre-wrap !important;
   font-family: 'Inter', sans-serif;
+  font-weight: 300;
 
 }
 
@@ -199,43 +178,12 @@
 
 
 .center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 59px;
-  position: absolute;
-  bottom: 10px;
-  /* padding: 2rem 0; */
-  flex-direction: column;
 }
 
 .cloud {
-  width: 100vw;
-  height: 100vh;
-  padding-bottom: 69px;
-  display: flex;
-  flex: 1;
-  justify-content: center;
-}
-
-.cloud ::-webkit-scrollbar {
-  /* width: 6px; */
-  width: 9px;
-  background: transparent; /* make scrollbar transparent */
-  height: 5px;
-  z-index: 100;
 }
 
-.cloud ::-webkit-scrollbar-thumb {
-  background: #343245;
-  /* border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px; */
-  border-radius: 6px;
-}
 
-.cloud ::-webkit-scrollbar-thumb:hover {
-  background: #3e3b55;
-}
 
 .originalPrompt {
   width: 100vw;

src/main/main.ts

@@ -93,7 +93,7 @@ let tray: Tray | null = null;
 const createTray = () => {
   const icon = getAssetPath('IndigoLogoSmall1.png')
   const trayicon = nativeImage.createFromPath(icon)
-  tray = new Tray(trayicon.resize({width: 50}))
+  tray = new Tray(trayicon.resize({width: 16}))
   const contextMenu = Menu.buildFromTemplate([
     {
       label: 'Show App',
@@ -131,7 +131,7 @@ const createWindow = async () => {
     show: false,
     width: 600,
     height: 400,
-    icon: getAssetPath('IndigoLogoSmall1.png'),
+    icon: getAssetPath('icon.ico'),// Set the icon here
     // visibleOnAllWorkspaces: true,
     // alwaysOnTop: true,
     // resizable: false,
@@ -216,6 +216,9 @@ const registerGlobalShortcut = () => {
 app
   .whenReady()
   .then(() => {
+    if (app.dock) { // Check if dock is available (macOS)
+      app.dock.hide();
+    }
     createWindow();
     registerGlobalShortcut();
     app.on('activate', () => {

src/renderer/App.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 body {
   position: relative;

src/renderer/Commands.tsx

@@ -9,6 +9,7 @@ import IconArrowDown from './icons/IconArrowDown';
 import IconArrowUp from './icons/IconArrowUp';
 import IconEsc from './icons/IconEsc';
 import { useAppStore } from '../../lib/store';
+import IconHistory from './icons/IconHistory';
 
 const Commands = () => {
   const [baseCommands, setBaseCommands] = useState([]);
@@ -119,10 +120,10 @@ const Commands = () => {
 
   const runCommand = async (command: any) => {
     const clipContents = await getClip();
-    if(clipContents === '') {
-      setError('Clipboard is empty');
-      return;
-    }
+    // if(clipContents === '') {
+    //   setError('Clipboard is empty');
+    //   return;
+    // }
     if(command.inputs.length > 0) {
       navigate('/inputs',{state: {...command, copied: clipContents}})
     } else {
@@ -203,8 +204,9 @@ const Commands = () => {
         <button className='text-gray-300' type="button" onClick={handleLogout}>
           Logout
         </button>
-        <button className='text-gray-300' type="button" onClick={() => navigate('/history')}>
-          History
+        <button className='text-gray-300 flex flex-row align-middle' type="button" onClick={() => navigate('/history')}>
+        <span className='mr-1'><IconHistory/></span>
+          <span className='text-gray-400'>History</span>
         </button>
       </div>
     </div>

src/renderer/Job.tsx

@@ -10,8 +10,8 @@ const Job = () => {
   useEffect(() => {
     window.electron.ipcRenderer.send(
       'window-resize',
-      900, // height
-      600  // width
+      1080, // height
+      768  // width
     )
   }, []);
 
@@ -39,9 +39,7 @@ const Job = () => {
           id={location.state.id}
         />
       }
-      <div onClick={() => navigate(-1)} className='fixed bottom-1 left-2 text-white-500 cursor-pointer'>
-        Go Back
-      </div>
+
     </div>
   );
 };

src/renderer/Login.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Auth, API } from 'aws-amplify';
 import { useNavigate } from 'react-router-dom';
 import logo from '../../assets/images/IndigoLogoHorizontal2.png';
@@ -12,6 +12,13 @@ const Login = () => {
   const [loginIncorrect, setLoginIncorrect] = useState(false);
   const navigate = useNavigate();
   const { fetchCommands } = useAppStore()
+  const emailRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    if (emailRef.current) {
+      emailRef.current.focus();
+    }
+  }, []);
 
   useEffect(() => {
     window.electron.ipcRenderer.send(
@@ -53,6 +60,7 @@ const Login = () => {
             Email
           </label>
           <input
+            ref={emailRef}
             type="email"
             name="email"
             onChange={(e) => setEmail(e.target.value)}

src/renderer/icons/IconHistory.tsx

@@ -0,0 +1,13 @@
+export default function IconHistory({
+  size = 18, // or any default size of your choice
+  className = "",
+  colorClass = "text-gray-300"
+}) {
+  return (
+    <div className={colorClass}>
+      <svg className="fill-current" width={size} height={size} viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10 2.5C7.39502 2.5 5.09521 3.8208 3.75 5.83984V3.75H2.5V8.125H6.875V6.875H4.60938C5.68848 5.01221 7.68555 3.75 10 3.75C13.4595 3.75 16.25 6.54053 16.25 10C16.25 13.4595 13.4595 16.25 10 16.25C6.54053 16.25 3.75 13.4595 3.75 10H2.5C2.5 14.1357 5.86426 17.5 10 17.5C14.1357 17.5 17.5 14.1357 17.5 10C17.5 5.86426 14.1357 2.5 10 2.5ZM9.375 5V10.625H13.75V9.375H10.625V5H9.375Z"/>
+      </svg>
+    </div>
+  )
+}

tailwind.config.js

@@ -3,6 +3,7 @@ module.exports = {
   theme: {
     extend: {
     colors: {
+      white: "#F7F1F9",
       gray:{
         500: '#A4A4C2',
         600: '#61617E',