Merge 34d27d17af46e346eb5e2d0d0181e794bb99ea24 into d7eb05b9361febead29a74e71ddffc2ebeff5302

macapp/src/app.tsx

@@ -45,7 +45,7 @@ export default function () {
         )}
         {step === Step.CLI && (
           <>
-            <div className='mx-auto flex flex-col space-y-28 text-center'>
+            <div className='mx-auto flex flex-col gap-y-28 text-center'>
               <h1 className='mt-4 text-2xl tracking-tight text-gray-900'>Install the command line</h1>
               <pre className='mx-auto text-4xl text-gray-400'>&gt; ollama</pre>
               <div className='mx-auto'>
@@ -74,35 +74,48 @@ export default function () {
         )}
         {step === Step.FINISH && (
           <>
-            <div className='mx-auto flex flex-col space-y-20 text-center'>
+            <div className='mx-auto flex flex-col gap-y-16 text-center'>
               <h1 className='mt-4 text-2xl tracking-tight text-gray-900'>Run your first model</h1>
-              <div className='flex flex-col'>
+              <div>
-                <div className='group relative flex items-center'>
+                <div className='flex flex-col'>
-                  <pre className='language-none text-2xs w-full rounded-md bg-gray-100 px-4 py-3 text-start leading-normal'>
+                  <div className='group relative flex items-center'>
-                    {command}
+                    <pre className='language-none text-2xs w-full rounded-md bg-gray-100 px-4 py-3 text-start leading-normal'>
-                  </pre>
+                      {command}
-                  <button
+                    </pre>
-                    className={`no-drag absolute right-[5px] px-2 py-2 ${
+                    <button
-                      commandCopied
+                      className={`no-drag absolute right-[5px] px-2 py-2 ${
-                        ? 'text-gray-900 opacity-100 hover:cursor-auto'
+                        commandCopied
-                        : 'text-gray-200 opacity-50 hover:cursor-pointer'
+                          ? 'text-gray-900 opacity-100 hover:cursor-auto'
-                    } hover:font-bold hover:text-gray-900 group-hover:opacity-100`}
+                          : 'text-gray-200 opacity-50 hover:cursor-pointer'
-                    onClick={() => {
+                      } hover:font-bold hover:text-gray-900 group-hover:opacity-100`}
-                      copy(command)
+                      onClick={() => {
-                      setCommandCopied(true)
+                        copy(command)
-                      setTimeout(() => setCommandCopied(false), 3000)
+                        setCommandCopied(true)
-                    }}
+                        setTimeout(() => setCommandCopied(false), 3000)
-                  >
+                      }}
-                    {commandCopied ? (
+                    >
-                      <CheckIcon className='h-4 w-4 font-bold text-gray-500' />
+                      {commandCopied ? (
-                    ) : (
+                        <CheckIcon className='h-4 w-4 font-bold text-gray-500' />
-                      <DocumentDuplicateIcon className='h-4 w-4 text-gray-500' />
+                      ) : (
-                    )}
+                        <DocumentDuplicateIcon className='h-4 w-4 text-gray-500' />
-                  </button>
+                      )}
+                    </button>
+                  </div>
+                  <p className='mx-auto my-4 w-[70%] text-xs text-gray-400'>
+                    Run this command in your favorite terminal.
+                  </p>
+                </div>
+                <div
+                  className='rounded-lg bg-blue-50 p-4 text-start text-sm text-blue-800 dark:bg-gray-800 dark:text-blue-400'
+                  role='alert'
+                >
+                  <span className='font-semibold'>
+                    {app.getLoginItemSettings().openAtLogin
+                      ? 'Autostart is enabled by default.'
+                      : 'Autostart is disabled by default.'}
+                  </span>
+                  <p>You can modify this setting in the preferences menu.</p>
                 </div>
-                <p className='mx-auto my-4 w-[70%] text-xs text-gray-400'>
-                  Run this command in your favorite terminal.
-                </p>
               </div>
               <button
                 onClick={() => {

macapp/src/index.ts

@@ -1,5 +1,15 @@
 import { spawn, ChildProcess } from 'child_process'
-import { app, autoUpdater, dialog, Tray, Menu, BrowserWindow, MenuItemConstructorOptions, nativeTheme } from 'electron'
+import {
+  app,
+  autoUpdater,
+  dialog,
+  Tray,
+  Menu,
+  BrowserWindow,
+  MenuItemConstructorOptions,
+  nativeTheme,
+  Notification,
+} from 'electron'
 import Store from 'electron-store'
 import winston from 'winston'
 import 'winston-daily-rotate-file'
@@ -60,11 +70,11 @@ app.on('ready', () => {
 function firstRunWindow() {
   // Create the browser window.
   welcomeWindow = new BrowserWindow({
-    width: 400,
+    width: 440,
     height: 500,
     frame: false,
     fullscreenable: false,
-    resizable: false,
+    resizable: true,
     movable: true,
     show: false,
     webPreferences: {
@@ -104,6 +114,21 @@ function updateTrayIcon() {
   }
 }
 
+function toggleAutoStartup() {
+  const currentSettings = app.getLoginItemSettings()
+  const newOpenAtLogin = !currentSettings.openAtLogin
+
+  app.setLoginItemSettings({ openAtLogin: newOpenAtLogin })
+
+  const notification = new Notification({
+    title: 'Ollama Auto Startup',
+    body: `Auto startup is now ${newOpenAtLogin ? 'enabled' : 'disabled'}`,
+  })
+  notification.show()
+
+  updateTray()
+}
+
 function updateTray() {
   const updateItems: MenuItemConstructorOptions[] = [
     { label: 'An update is available', enabled: false },
@@ -114,13 +139,27 @@ function updateTray() {
     { type: 'separator' },
   ]
 
+  const isAutoStartupEnabled = app.getLoginItemSettings().openAtLogin
+  const toggleAutoStartupItem: MenuItemConstructorOptions = {
+    label: isAutoStartupEnabled ? 'Disable Auto Startup' : 'Enable Auto Startup',
+    click: () => {
+      toggleAutoStartup()
+    },
+  }
+
   const menu = Menu.buildFromTemplate([
     ...(updateAvailable ? updateItems : []),
-    { role: 'quit', label: 'Quit Ollama', accelerator: 'Command+Q' },
+    toggleAutoStartupItem,
+    { role: 'quit', accelerator: 'Command+Q' },
   ])
 
   if (!tray) {
     tray = new Tray(trayIconPath())
+    // make sure the tray is updated when clicked to avoid stale info
+    // e.g. user disables auto startup in system preferences but tray menu still shows it as enabled
+    tray.on('click', () => {
+      updateTray()
+    })
   }
 
   tray.setToolTip(updateAvailable ? 'An update is available' : 'Ollama')

macapp/tailwind.config.js

@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {},
   plugins: [],