add app registration button

app/src/assets/home.less

@@ -413,9 +413,28 @@
 }
 
 .version {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   user-select: none;
-  text-align: center;
   font-size: 14px;
   color: hsl(var(--text-secondary));
   transform: translateY(4px);
+  width: max-content;
+  margin: 0 auto;
+
+  svg {
+    margin-right: 2px;
+    padding: 2px;
+    width: 24px;
+    height: 24px;
+    color: hsl(var(--text-secondary));
+    cursor: pointer;
+    transition: 0.25s;
+    transform: translateY(1px);
+
+    &:hover {
+      color: hsl(var(--text));
+    }
+  }
 }

app/src/components/home/ChatWrapper.tsx

@@ -10,7 +10,7 @@ import {
   setWeb,
 } from "../../store/chat.ts";
 import { manager } from "../../conversation/manager.ts";
-import { formatMessage } from "../../utils.ts";
+import {formatMessage, triggerInstallApp} from "../../utils.ts";
 import ChatInterface from "./ChatInterface.tsx";
 import { Button } from "../ui/button.tsx";
 import router from "../../router.tsx";
@@ -39,6 +39,7 @@ import {
   DialogTitle,
 } from "../ui/dialog.tsx";
 import {version} from "../../conf.ts";
+import {AppIcon} from "../../icons/icons.tsx";
 
 function ChatSpace() {
   const [open, setOpen] = useState(false);
@@ -230,6 +231,13 @@ function ChatWrapper() {
             <ModelSelector />
           </div>
           <div className={`version`}>
+            <svg className={`app`} onClick={triggerInstallApp} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
+              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+              <path d="M9 3h-4a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2z" strokeWidth="0" fill="currentColor" />
+              <path d="M9 13h-4a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2z" strokeWidth="0" fill="currentColor" />
+              <path d="M19 13h-4a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h4a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2z" strokeWidth="0" fill="currentColor" />
+              <path d="M17 3a1 1 0 0 1 .993 .883l.007 .117v2h2a1 1 0 0 1 .117 1.993l-.117 .007h-2v2a1 1 0 0 1 -1.993 .117l-.007 -.117v-2h-2a1 1 0 0 1 -.117 -1.993l.117 -.007h2v-2a1 1 0 0 1 1 -1z" strokeWidth="0" fill="currentColor" />
+            </svg>
             chatnio v{version}
           </div>
         </div>

app/src/conf.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 import { Model } from "./conversation/types.ts";
 
-export const version = "3.5.14";
+export const version = "3.5.15";
 export const dev: boolean = window.location.hostname === "localhost";
 export const deploy: boolean = true;
 export let rest_api: string = "http://localhost:8094";

app/src/types/service.d.ts

@@ -13,3 +13,12 @@ declare module "virtual:pwa-register/react" {
     onRegistered: (registration: ServiceWorkerRegistration) => void;
   };
 }
+
+interface BeforeInstallPromptEvent extends Event {
+  readonly platforms: string[];
+  readonly userChoice: Promise<{
+    outcome: "accepted" | "dismissed";
+    platform: string;
+  }>;
+  prompt(): Promise<void>;
+}

app/src/utils.ts

@@ -1,12 +1,33 @@
 import React, { useEffect } from "react";
 import { FileObject } from "./components/FileProvider.tsx";
 
+export let event: BeforeInstallPromptEvent | undefined;
 export let mobile = isMobile();
 
 window.addEventListener("resize", () => {
   mobile = isMobile();
 });
 
+
+window.addEventListener('beforeinstallprompt', (e: Event) => {
+  e.preventDefault();
+  event = (e as BeforeInstallPromptEvent);
+});
+
+export function triggerInstallApp() {
+  if (!event) return;
+  try {
+    event.prompt();
+    event.userChoice.then((choice: any) => {
+      console.debug(`[service] installed app (status: ${choice.outcome})`);
+    });
+  } catch (err) {
+    console.debug("[service] install app error", err);
+  }
+
+  event = undefined;
+}
+
 export function isMobile(): boolean {
   return (
     (document.documentElement.clientWidth || window.innerWidth) <= 668 ||