add image and functions to welcome screen template

app/forge.config.ts

@@ -58,7 +58,7 @@ const config: ForgeConfig = {
     new AutoUnpackNativesPlugin({}),
     new WebpackPlugin({
       mainConfig,
-      devContentSecurityPolicy: `default-src * 'unsafe-eval' 'unsafe-inline'`,
+      devContentSecurityPolicy: `default-src * 'unsafe-eval' 'unsafe-inline'; img-src data: 'self'`,
       renderer: {
         config: rendererConfig,
         nodeIntegration: true,

app/package.json

@@ -30,6 +30,7 @@
     "@electron-forge/plugin-auto-unpack-natives": "^6.2.1",
     "@electron-forge/plugin-webpack": "^6.2.1",
     "@electron-forge/publisher-github": "^6.2.1",
+    "@svgr/webpack": "^8.0.1",
     "@types/chmodr": "^1.0.0",
     "@types/node": "^20.4.0",
     "@types/react": "^18.2.14",
@@ -45,7 +46,6 @@
     "electron": "25.2.0",
     "eslint": "^8.43.0",
     "eslint-plugin-import": "^2.27.5",
-    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
     "node-loader": "^2.0.0",
     "postcss": "^8.4.24",
@@ -55,10 +55,12 @@
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "style-loader": "^3.3.3",
+    "svg-inline-loader": "^0.8.2",
     "tailwindcss": "^3.3.2",
     "ts-loader": "^9.4.3",
     "ts-node": "^10.9.1",
     "typescript": "~4.5.4",
+    "url-loader": "^4.1.1",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"

app/src/app.tsx

@@ -1,12 +1,45 @@
 import { useState } from "react"
 import copy from 'copy-to-clipboard'
+import { exec } from 'child_process'
+import * as path from 'path'
+import * as fs from 'fs'
 import { DocumentDuplicateIcon } from '@heroicons/react/24/outline'
+import { app } from '@electron/remote'
+import OllamaIcon from './ollama.svg'
+
+const ollama = app.isPackaged
+? path.join(process.resourcesPath, 'ollama')
+: path.resolve(process.cwd(), '..', 'ollama')
+
+function installCLI() {
+  const symlinkPath = '/usr/local/bin/ollama'
+
+  if (fs.existsSync(symlinkPath) && fs.readlinkSync(symlinkPath) === ollama) {
+    return
+  }
+
+
+  const command = `
+    do shell script "ln -F -s ${ollama} /usr/local/bin/ollama" with administrator privileges
+  `
+  exec(`osascript -e '${command}'`, (error: Error | null, stdout: string, stderr: string) => {
+    if (error) {
+      console.error(`cli: failed to install cli: ${error.message}`)
+      return
+    }
+
+    console.info(stdout)
+    console.error(stderr)
+  })
+}
 
 export default function () {
   const [step, setStep] = useState(0)
 
   const command = 'ollama run orca'
 
+  
+
   return (
     <div className='flex flex-col justify-between mx-auto w-full pt-16 px-4 min-h-screen bg-white'>
       {step === 0 && (
@@ -26,7 +59,7 @@ export default function () {
             </button>      
           </div>
           <div className="mx-auto">
-            <img src='/assets/ollama.png' />
+            <OllamaIcon />
           </div>
         </>
       )}
@@ -41,6 +74,7 @@ export default function () {
               <button
                 onClick={() => {
                   // install the command line
+                  installCLI()
                   setStep(2)
                 }}
                 className='mx-auto w-[60%] rounded-dm rounded-md bg-black px-4 py-2 text-sm text-white hover:brightness-110'
@@ -78,7 +112,7 @@ export default function () {
             </div>
             <button
               onClick={() => {
-                // close the window
+                window.close()
               }}
               className='mx-auto w-[60%] rounded-dm rounded-md bg-black px-4 py-2 text-sm text-white hover:brightness-110'
             >

app/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

app/src/index.ts

@@ -1,10 +1,9 @@
-import { spawn, exec } from 'child_process'
+import { spawn } from 'child_process'
 import { app, autoUpdater, dialog, Tray, Menu, BrowserWindow } from 'electron'
 import Store from 'electron-store'
 import winston from 'winston'
 import 'winston-daily-rotate-file'
 import * as path from 'path'
-import * as fs from 'fs'
 
 import { analytics, id } from './telemetry'
 
@@ -13,6 +12,7 @@ require('@electron/remote/main').initialize()
 
 const store = new Store()
 let tray: Tray | null = null
+let welcomeWindow: BrowserWindow | null = null
 
 declare const MAIN_WINDOW_WEBPACK_ENTRY: string
 
@@ -35,9 +35,8 @@ if (!SingleInstanceLock) {
 
 
 function firstRunWindow() {
-    // Create the browser window.
   // Create the browser window.
-  const welcomeWindow = new BrowserWindow({
+  welcomeWindow = new BrowserWindow({
     width: 400,
     height: 500,
     frame: false,
@@ -55,8 +54,13 @@ function firstRunWindow() {
 
   // and load the index.html of the app.
   welcomeWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY)
-  welcomeWindow.webContents.openDevTools()
 
+  // for debugging
+  // welcomeWindow.webContents.openDevTools()
+
+  if (process.platform === 'darwin') {
+    app.dock.hide()
+  }
 }
 
 
@@ -79,8 +83,6 @@ if (require('electron-squirrel-startup')) {
   app.quit()
 }
 
-const ollama = path.join(process.resourcesPath, 'ollama')
-
 function server() {
   const binary = app.isPackaged
     ? path.join(process.resourcesPath, 'ollama')
@@ -111,63 +113,12 @@ function server() {
   })
 }
 
-// function installCLI() {
+if (process.platform === 'darwin') {
-//   const symlinkPath = '/usr/local/bin/ollama'
+  app.dock.hide()
-
-//   if (fs.existsSync(symlinkPath) && fs.readlinkSync(symlinkPath) === ollama) {
-//     return
-//   }
-
-//   dialog
-//     .showMessageBox({
-//       type: 'info',
-//       title: 'Ollama CLI installation',
-//       message: 'To make the Ollama command work in your terminal, it needs administrator privileges.',
-//       buttons: ['OK'],
-//     })
-//     .then(result => {
-//       if (result.response === 0) {
-//         const command = `
-//     do shell script "ln -F -s ${ollama} /usr/local/bin/ollama" with administrator privileges
-//     `
-//         exec(`osascript -e '${command}'`, (error: Error | null, stdout: string, stderr: string) => {
-//           if (error) {
-//             logger.error(`cli: failed to install cli: ${error.message}`)
-//             return
-//           }
-
-//           logger.info(stdout)
-//           logger.error(stderr)
-//         })
-//       }
-//     })
-// }
-
-export function installCLI() {
-  const symlinkPath = '/usr/local/bin/ollama'
-
-  if (fs.existsSync(symlinkPath) && fs.readlinkSync(symlinkPath) === ollama) {
-    return
-  }
-
-
-  const command = `
-    do shell script "ln -F -s ${ollama} /usr/local/bin/ollama" with administrator privileges
-  `
-  exec(`osascript -e '${command}'`, (error: Error | null, stdout: string, stderr: string) => {
-    if (error) {
-      logger.error(`cli: failed to install cli: ${error.message}`)
-      return
-    }
-
-    logger.info(stdout)
-    logger.error(stderr)
-  })
 }
 
 app.on('ready', () => {
   if (process.platform === 'darwin') {
-    app.dock.hide()
     if (app.isPackaged) {
       if (!app.isInApplicationsFolder()) {
         const chosen = dialog.showMessageBoxSync({
@@ -199,19 +150,17 @@ app.on('ready', () => {
           }
         }
       }
-
-      // installCLI()
     }
   }
 
   createSystemtray()
   server()
-  firstRunWindow()
   
-  if (!store.has('first-time-run')) {
+  if (!store.has('first-time-run-0')) {
     // This is the first run
     app.setLoginItemSettings({ openAtLogin: true })
-    store.set('first-time-run', false)
+    firstRunWindow()
+    store.set('first-time-run-0', false)
   } else {
     // The app has been run before
     app.setLoginItemSettings({ openAtLogin: app.getLoginItemSettings().openAtLogin })

app/webpack.rules.ts

@@ -29,11 +29,7 @@ export const rules: Required<ModuleOptions>['rules'] = [
     },
   },
   {
-    test: /\.(png|jpe?g|gif)$/i,
+    test: /\.svg$/,
-    use: [
+    use: ['@svgr/webpack'],
-      {
-        loader: 'file-loader',
-      },
-    ],
   },
 ]