feat: onboarding

.github/workflows/template-build-linux-x64.yml

@@ -100,6 +100,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           ANALYTICS_ID: ${{ secrets.JAN_APP_UMAMI_PROJECT_API_KEY }}
           ANALYTICS_HOST: ${{ secrets.JAN_APP_UMAMI_URL }}
+          API_KEY_BREVO: ${{ secrets.API_KEY_BREVO }}
 
       - name: Upload Artifact .deb file
         if: inputs.public_provider != 'github'

.github/workflows/template-build-macos-arm64.yml

@@ -152,6 +152,7 @@ jobs:
           DEVELOPER_ID: ${{ secrets.DEVELOPER_ID }}
           ANALYTICS_ID: ${{ secrets.JAN_APP_UMAMI_PROJECT_API_KEY }}
           ANALYTICS_HOST: ${{ secrets.JAN_APP_UMAMI_URL }}
+          API_KEY_BREVO: ${{ secrets.API_KEY_BREVO }}
 
       - name: Upload Artifact
         if: inputs.public_provider != 'github'

.github/workflows/template-build-macos-x64.yml

@@ -146,6 +146,7 @@ jobs:
           DEVELOPER_ID: ${{ secrets.DEVELOPER_ID }}
           ANALYTICS_ID: ${{ secrets.JAN_APP_UMAMI_PROJECT_API_KEY }}
           ANALYTICS_HOST: ${{ secrets.JAN_APP_UMAMI_URL }}
+          API_KEY_BREVO: ${{ secrets.API_KEY_BREVO }}
 
       - name: Upload Artifact
         if: inputs.public_provider != 'github'

.github/workflows/template-build-windows-x64.yml

@@ -129,6 +129,7 @@ jobs:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           ANALYTICS_ID: ${{ secrets.JAN_APP_UMAMI_PROJECT_API_KEY }}
           ANALYTICS_HOST: ${{ secrets.JAN_APP_UMAMI_URL }}
+          API_KEY_BREVO: ${{ secrets.API_KEY_BREVO }}
           AZURE_KEY_VAULT_URI: ${{ secrets.AZURE_KEY_VAULT_URI }}
           AZURE_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
           AZURE_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}

core/src/api/index.ts

@@ -16,7 +16,10 @@ export enum NativeRoute {
   hideMainWindow = 'hideMainWindow',
   showMainWindow = 'showMainWindow',
 
+  getSelectedText = 'getSelectedText',
+
   quickAskSizeUpdated = 'quickAskSizeUpdated',
+  setQuickAskHotKey = 'setQuickAskHotKey',
 }
 
 /**

core/src/node/helper/config.ts

@@ -21,19 +21,16 @@ const defaultAppConfig: AppConfiguration = {
 export const getAppConfigurations = (): AppConfiguration => {
   // Retrieve Application Support folder path
   // Fallback to user home directory if not found
-  const configurationFile = getConfigurationFilePath()
-
-  if (!fs.existsSync(configurationFile)) {
+  const path = getConfigurationFilePath()
+  if (!fs.existsSync(path)) {
     // create default app config if we don't have one
-    console.debug(`App config not found, creating default config at ${configurationFile}`)
-    fs.writeFileSync(configurationFile, JSON.stringify(defaultAppConfig))
+    console.debug(`App config not found, creating default config at ${path}`)
+    fs.writeFileSync(path, JSON.stringify(defaultAppConfig))
     return defaultAppConfig
   }
 
   try {
-    const appConfigurations: AppConfiguration = JSON.parse(
-      fs.readFileSync(configurationFile, 'utf-8')
-    )
+    const appConfigurations: AppConfiguration = JSON.parse(fs.readFileSync(path, 'utf-8'))
     return appConfigurations
   } catch (err) {
     console.error(`Failed to read app config, return default config instead! Err: ${err}`)
@@ -47,12 +44,19 @@ const getConfigurationFilePath = () =>
     configurationFileName
   )
 
-export const updateAppConfiguration = (configuration: AppConfiguration): Promise<void> => {
-  const configurationFile = getConfigurationFilePath()
-  console.debug('updateAppConfiguration, configurationFile: ', configurationFile)
+export const updateAppConfiguration = (configuration: Partial<AppConfiguration>): void => {
+  const path = getConfigurationFilePath()
+  const currentConfig = getAppConfigurations()
+  console.debug('updateAppConfiguration, configurationFilePath: ', path)
 
-  fs.writeFileSync(configurationFile, JSON.stringify(configuration))
-  return Promise.resolve()
+  fs.writeFileSync(
+    path,
+    JSON.stringify({
+      ...currentConfig,
+      ...configuration,
+    })
+  )
+  Promise.resolve()
 }
 
 /**

core/src/types/config/appConfigEntity.ts

@@ -1,3 +1,5 @@
 export type AppConfiguration = {
   data_folder: string
+  finish_onboarding?: boolean
+  quick_ask_hotkey?: string
 }

electron/handlers/native.ts

@@ -132,4 +132,15 @@ export function handleAppIPCs() {
     async (_event, heightOffset: number): Promise<void> =>
       windowManager.expandQuickAskWindow(heightOffset)
   )
+
+  ipcMain.handle(
+    NativeRoute.setQuickAskHotKey,
+    async (_event, hotKey: string) => {
+      windowManager.setQuickAskHotKey(hotKey)
+    }
+  )
+
+  ipcMain.handle(NativeRoute.getSelectedText, async (_event) => {
+    windowManager.getSelectedText()
+  })
 }

electron/main.ts

@@ -5,7 +5,7 @@ import { join } from 'path'
  * Managers
  **/
 import { windowManager } from './managers/window'
-import { log } from '@janhq/core/node'
+import { getAppConfigurations, log } from '@janhq/core/node'
 
 /**
  * IPC Handlers
@@ -37,8 +37,6 @@ const mainPath = join(rendererPath, 'index.html')
 const mainUrl = 'http://localhost:3000'
 const quickAskUrl = `${mainUrl}/search`
 
-const quickAskHotKey = 'CommandOrControl+J'
-
 app
   .whenReady()
   .then(setupReactDevTool)
@@ -51,6 +49,17 @@ app
   .then(handleAppUpdates)
   .then(() => process.env.CI !== 'e2e' && createQuickAskWindow())
   .then(createMainWindow)
+  .then(() => {
+    const config = getAppConfigurations()
+    const quickAskHotKey = config.quick_ask_hotkey
+    if (!quickAskHotKey) {
+      console.warn(
+        'No quick_ask_hotkey found in the configuration. Ignore registering global shortcut!'
+      )
+      return
+    }
+    registerGlobalShortcuts(quickAskHotKey)
+  })
   .then(() => {
     if (!app.isPackaged) {
       windowManager.mainWindow?.webContents.openDevTools()
@@ -69,10 +78,6 @@ app
   })
   .then(() => cleanLogs())
 
-app.on('ready', () => {
-  registerGlobalShortcuts()
-})
-
 app.once('quit', () => {
   cleanUpAndQuit()
 })
@@ -87,8 +92,8 @@ function createMainWindow() {
   windowManager.createMainWindow(preloadPath, startUrl)
 }
 
-function registerGlobalShortcuts() {
-  const ret = registerShortcut(quickAskHotKey, (selectedText: string) => {
+function registerGlobalShortcuts(hotkey: string) {
+  const ret = registerShortcut(hotkey, (selectedText: string) => {
     if (!windowManager.isQuickAskWindowVisible()) {
       windowManager.showQuickAskWindow()
       windowManager.sendQuickAskSelectedText(selectedText)

electron/managers/window.ts

@@ -2,12 +2,14 @@ import { BrowserWindow, app, shell } from 'electron'
 import { quickAskWindowConfig } from './quickAskWindowConfig'
 import { AppEvent } from '@janhq/core'
 import { mainWindowConfig } from './mainWindowConfig'
+import { getSelectedText, registerShortcut } from '../utils/selectedText'
 
 /**
  * Manages the current window instance.
  */
 // TODO: refactor this
 let isAppQuitting = false
+
 class WindowManager {
   public mainWindow?: BrowserWindow
   private _quickAskWindow: BrowserWindow | undefined = undefined
@@ -111,6 +113,28 @@ class WindowManager {
     )
   }
 
+  // TODO: refactor this part since we have a duplicated code at main.ts also.
+  setQuickAskHotKey(hotKey: string): void {
+    const ret = registerShortcut(hotKey, (selectedText: string) => {
+      if (!windowManager.isQuickAskWindowVisible()) {
+        windowManager.showQuickAskWindow()
+        windowManager.sendQuickAskSelectedText(selectedText)
+      } else {
+        windowManager.hideQuickAskWindow()
+      }
+    })
+
+    if (!ret) {
+      console.error('Global shortcut registration failed')
+    } else {
+      console.log('Global shortcut registered successfully')
+    }
+  }
+
+  getSelectedText(): void {
+    getSelectedText()
+  }
+
   cleanUp(): void {
     this.mainWindow?.destroy()
     this._quickAskWindow?.destroy()

web/app/layout.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: PropsWithChildren) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="bg-white font-sans text-sm antialiased dark:bg-background">
+      <body className="h-screen bg-white/30 font-sans text-sm antialiased backdrop-blur-3xl dark:bg-black/10">
         <div className="title-bar" />
         <Providers>{children}</Providers>
       </body>

web/constants/screens.ts

@@ -4,4 +4,5 @@ export enum MainViewState {
   Settings,
   Thread,
   LocalServer,
+  Onboarding,
 }

web/containers/Layout/BottomBar/index.tsx

@@ -36,7 +36,7 @@ const BottomBar = () => {
   const progress = useAtomValue(appDownloadProgress)
 
   return (
-    <div className="fixed bottom-0 left-16 z-50 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-background/80 px-3">
+    <div className="fixed bottom-0 left-16 z-50 flex h-12 w-[calc(100%-64px)] items-center justify-between border-t border-border bg-white px-3 dark:bg-background">
       <div className="flex flex-shrink-0 items-center gap-x-2">
         <div className="flex items-center space-x-2">
           {progress && progress > 0 ? (

web/containers/Layout/TopBar/index.tsx

@@ -68,7 +68,7 @@ const TopBar = () => {
   }
 
   return (
-    <div className="fixed left-0 top-0 z-20 flex h-12 w-full border-b border-border bg-background/80 backdrop-blur-md">
+    <div className="fixed left-0 top-0 z-20 flex h-12 w-full border-b border-border bg-background/80 bg-white backdrop-blur-md dark:bg-background">
       {mainViewState !== MainViewState.Thread &&
       mainViewState !== MainViewState.LocalServer ? (
         <div className="relative left-16 flex w-[calc(100%-64px)] items-center justify-between space-x-4 pl-6 pr-2">