Add about window

README.md

@@ -3,7 +3,7 @@
 Chie
 </h1>
 
-An extensible desktop app for large language models like ChatGPT and New Bing.
+An extensible desktop app for large language models like ChatGPT and Bing Chat.
 It works on macOS, Linux and Windows, and uses native UI on each platform.
 
 * [Introduce the Chie app (with screenshots)](https://chie.app/posts/introduce-the-chie-app/)

package.json

@@ -9,15 +9,15 @@
   "build": {
     "appId": "org.chie.chie",
     "productName": "Chie",
-    "copyright": "Copyright © 2023 Cheng Zhao",
+    "copyright": "Copyright © 2023 Cheng. All rights reserved.",
     "unpackDir": "assets/icons",
     "ignore": [
       "assets/build"
     ],
     "entitlements": "assets/build/entitlements.plist",
     "icons": {
-      "mac": "assets/build/icon_dev.icns",
-      "win": "assets/build/icon_dev.ico"
+      "mac": "assets/build/icon-dev.icns",
+      "win": "assets/build/icon-dev.ico"
     }
   },
   "scripts": {

src/gui-main.ts

@@ -2,6 +2,7 @@
 
 import gui from 'gui';
 
+import AboutWindow from './view/about-window';
 import ChatService from './model/chat-service';
 import ChatView from './view/chat-view';
 import DashboardWindow from './view/dashboard-window';
@@ -93,6 +94,7 @@ function guiMain() {
   config.initFromFileSync();
 
   // Register named windows.
+  windowManager.registerNamedWindow('about', AboutWindow);
   windowManager.registerNamedWindow('dashboard', DashboardWindow);
   windowManager.registerNamedWindow('settings', SettingsWindow);
   windowManager.registerNamedWindow('newAssistant', NewAssistantWindow);

src/view/about-window.ts

@@ -0,0 +1,44 @@
+import fs from 'node:fs';
+import gui from 'gui';
+import path from 'node:path';
+
+import BaseWindow from '../view/base-window';
+import basicStyle from '../view/basic-style';
+
+export default class AboutWindow extends BaseWindow {
+  constructor() {
+    super();
+
+    const packageJson = require('../../package.json');
+    let iconPath = path.join(__dirname, '../../assets/icons/icon');
+    if (packageJson.version.endsWith('-dev'))
+      iconPath += '-dev';
+    const icon = gui.Image.createFromPath(fs.realpathSync(iconPath + '@2x.png'));
+
+    const imageView = gui.GifPlayer.create();
+    imageView.setImage(icon);
+    this.contentView.addChildView(imageView);
+    const title = gui.Label.create(packageJson.build.productName);
+    title.setFont(gui.Font.default().derive(1, 'bold', 'normal'));
+    this.contentView.addChildView(title);
+    const smallFont = gui.Font.default().derive(-3, 'normal', 'normal');
+    const version = gui.Label.create(`Version ${packageJson.version}`);
+    version.setFont(smallFont);
+    this.contentView.addChildView(version);
+    const copyright = gui.Label.create(packageJson.build.copyright);
+    copyright.setFont(smallFont);
+    this.contentView.addChildView(copyright);
+
+    this.contentView.setStyle({
+      alignItems: 'center',
+      padding: basicStyle.padding,
+      gap: basicStyle.padding / 2,
+    });
+    this.resizeToFitContentView();
+    this.window.setResizable(false);
+  }
+
+  saveState() {
+    return null;  // do not remember state
+  }
+}

src/view/app-menu-bar.ts

@@ -4,12 +4,20 @@ import BaseMenuBar from './base-menu-bar';
 
 export default class AppMenuBar extends BaseMenuBar {
   constructor() {
+    const name = require('../../package.json').build.productName;
+
     const template = [
       // The main menu.
       {
-        label: require('../../package.json').build.productName,
+        label: name,
         submenu: [
-          { role: 'about' },
+          {
+            label: `About ${name}`,
+            onClick: () => {
+              const windowManager = require('../controller/window-manager').default;
+              windowManager.showNamedWindow('about');
+            },
+          },
           { type: 'separator' },
           { role: 'hide' },
           { role: 'hide-others' },