dcSpark · agallardol · Oct 19, 2023 · Oct 19, 2023 · Oct 19, 2023
diff --git a/apps/shinkai-visor/public/manifest.json b/apps/shinkai-visor/public/manifest.json
@@ -15,15 +15,15 @@
       "16": "icon16.png",
       "48": "icon48.png"
     },
-    "default_popup": ""
+    "default_popup": "src/components/installed-popup/installed-popup.html"
   },
   "background": {
     "service_worker": "src/service-worker/service-worker.ts"
   },
   "web_accessible_resources": [
     {
       "matches": ["https://*/*", "http://*/*", "<all_urls>"],
-      "resources": ["src/components/popup/popup.tsx"]
+      "resources": []
     }
   ],
   "commands": {
@@ -45,11 +45,7 @@
   "content_scripts": [
     {
       "matches": ["https://*/*", "http://*/*", "<all_urls>"],
-      "js": ["src/components/popup/popup.tsx"]
-    },
-    {
-      "matches": ["https://*/*", "http://*/*", "<all_urls>"],
-      "js": ["src/components/action-button/action-button.tsx"]
+      "js": ["src/components/popup/popup.tsx", "src/components/action-button/action-button.tsx"]
     }
   ],
   "externally_connectable": {

diff --git a/apps/shinkai-visor/src/assets/animations/installed-popup.json b/apps/shinkai-visor/src/assets/animations/installed-popup.json
diff --git a/apps/shinkai-visor/src/components/create-job/create-job.tsx b/apps/shinkai-visor/src/components/create-job/create-job.tsx
@@ -137,6 +137,7 @@ export const CreateJob = () => {
                         {agents?.map((agent) => (
                           <SelectItem key={agent.id} value={agent.id}>
                             {
+                              // eslint-disable-next-line @typescript-eslint/no-explicit-any
                               (agent.full_identity_name as any)
                                 ?.subidentity_name
                             }

diff --git a/apps/shinkai-visor/src/components/inbox/inbox.tsx b/apps/shinkai-visor/src/components/inbox/inbox.tsx
@@ -17,9 +17,9 @@ import { FormattedMessage, useIntl } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
 import { cn } from '../../helpers/cn-utils';
-import { Message } from '../../message/message';
 import { useAuth } from '../../store/auth/auth';
 import { InboxInput } from '../inbox-input/inbox-input';
+import { Message } from '../message/message';
 import { ScrollArea } from '../ui/scroll-area';
 import { Skeleton } from '../ui/skeleton';
 

diff --git a/apps/shinkai-visor/src/components/installed-popup/installed-popup.html b/apps/shinkai-visor/src/components/installed-popup/installed-popup.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ShinkaiVisor</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <link rel="stylesheet" href="/src/styles.css" />
+  </head>
+  <body>
+    <div id="root" class="w-[300px] h-[450px]"></div>
+    <script type="module" src="/apps//shinkai-visor/src/components/installed-popup/installed-popup.tsx"></script>
+  </body>
+</html>
diff --git a/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx b/apps/shinkai-visor/src/components/installed-popup/installed-popup.tsx
@@ -0,0 +1,54 @@
+import '../../theme/styles.css';
+
+import { Player } from '@lottiefiles/react-lottie-player';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { FormattedMessage, IntlProvider } from 'react-intl';
+
+import logo from '../../../src/assets/icons/visor.svg';
+import InstalledPopupAnimation from '../../assets/animations/installed-popup.json';
+import { srcUrlResolver } from '../../helpers/src-url-resolver';
+import { langMessages, locale } from '../../lang/intl';
+
+const InstalledPopup = () => {
+  return (
+    <div className="h-full flex flex-col justify-start">
+      <div className="grid place-content-center">
+        <img
+          alt="shinkai logo"
+          className="animate-spin-slow h-10 w-20"
+          data-cy="shinkai-logo"
+          src={srcUrlResolver(logo)}
+        />
+      </div>
+      <div className="flex-1 flex flex-col space-y-3 justify-center items-center">
+        <div className="p-3">
+          <Player
+            autoplay
+            className="w-full"
+            loop
+            src={InstalledPopupAnimation}
+          ></Player>
+        </div>
+
+        <p className="text-md text-center text-white" data-cy="welcome-message">
+          <FormattedMessage id="installed-sucessfully" />
+        </p>
+      </div>
+    </div>
+  );
+};
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('container not found');
+}
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <IntlProvider locale={locale} messages={langMessages}>
+      <div className="w-full h-full font-inter overflow-hidden p-3 bg-secondary-600 bg-app-gradient shadow-xl">
+        <InstalledPopup></InstalledPopup>
+      </div>
+    </IntlProvider>
+  </React.StrictMode>
+);
diff --git a/apps/shinkai-visor/src/message/message.tsx → ...-visor/src/components/message/message.tsx b/apps/shinkai-visor/src/message/message.tsx → ...-visor/src/components/message/message.tsx
@@ -1,8 +1,8 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import { Paperclip } from 'lucide-react';
 
-import { Avatar, AvatarFallback, AvatarImage } from '../components/ui/avatar';
-import { cn } from '../helpers/cn-utils';
+import { cn } from '../../helpers/cn-utils';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
 
 type MessageProps = {
   isLocal: boolean;

diff --git a/apps/shinkai-visor/src/components/popup/popup.css b/apps/shinkai-visor/src/components/popup/popup.css
diff --git a/apps/shinkai-visor/src/components/popup/popup.tsx b/apps/shinkai-visor/src/components/popup/popup.tsx
@@ -25,7 +25,6 @@ import { Inboxes } from '../inboxes/inboxes';
 import { SplashScreen } from '../splash-screen/splash-screen';
 import Welcome from '../welcome/welcome';
 import { WithNav } from '../with-nav/with-nav';
-import popupStyle from './popup.css?inline';
 
 export const Popup = ({
   container,
@@ -133,7 +132,6 @@ const root = createRoot(container);
 root.render(
   <React.StrictMode>
     <style>{globalStyle}</style>
-    <style>{popupStyle}</style>
     <QueryClientProvider client={queryClient}>
       <IntlProvider locale={locale} messages={langMessages}>
         <div className="fixed font-inter w-[357px] h-[600px] top-32 right-16 overflow-hidden z-[1500000000]">

diff --git a/apps/shinkai-visor/src/lang/en.json b/apps/shinkai-visor/src/lang/en.json
@@ -51,5 +51,6 @@
   "empty-agents-title": "Ask Shinkai AI",
   "empty-agents-message": "Connect your first agent to start asking Shinkai AI. Try connecting OpenAI",
   "today": "Today",
-  "yesterday": "Yesterday"
+  "yesterday": "Yesterday",
+  "installed-sucessfully": "Shinkai Visor was installed sucessfully, navigate to a website and use the action button to start asking Shinkai AI"
 }
diff --git a/apps/shinkai-visor/src/lang/es.json b/apps/shinkai-visor/src/lang/es.json
@@ -51,5 +51,6 @@
   "empty-agents-title": "Pregunta a Shinkai AI",
   "empty-agents-message": "Conecta tu primer agente para comenzar a preguntar a Shinkai AI",
   "today": "Hoy",
-  "yesterday": "Ayer"
+  "yesterday": "Ayer",
+  "installed-sucessfully": "Shinkai Visor se instaló correctamente, navega a un sitio web y usa el botón de acción para comenzar a preguntar a Shinkai AI"
 }
diff --git a/apps/shinkai-visor/src/service-worker/action.ts b/apps/shinkai-visor/src/service-worker/action.ts
@@ -1,9 +1,36 @@
 import { ContentScriptMessageType } from "./communication/content-script-message-type";
 import { sendContentScriptMessage } from "./communication/content-script-messages";
 
-chrome.action.onClicked.addListener((tab) => {
+const isChromeInternalUrl = (urlString: string): boolean => {
+  const url = new URL(urlString);
+  return url.protocol === 'chrome:';
+}
+
+const setDefaultPopup = (tabId: number, url: string): Promise<void> => {
+  if (!url || isChromeInternalUrl(url)) {
+    console.log('setting the default popup');
+    return chrome.action.setPopup({ popup: 'src/components/installed-popup/installed-popup.html', tabId });
+  } else {
+    console.log('setting undefined default popup');
+    return chrome.action.setPopup({ popup: '', tabId });
+  }
+}
+
+chrome.action.onClicked.addListener(async (tab) => {
+  console.log('actions.onClicked', tab?.id);
   if (!tab?.id) {
     return;
   }
-  sendContentScriptMessage({ type: ContentScriptMessageType.TogglePopupVisibility }, tab?.id);
+  sendContentScriptMessage({ type: ContentScriptMessageType.TogglePopupVisibility }, tab.id);
+});
+
+chrome.tabs.onUpdated.addListener((tabId, _, tab) => {
+  console.log('tabs.onUpdated', tabId);
+  setDefaultPopup(tabId, tab.url || '');
+});
+
+chrome.tabs.onActivated.addListener(async (activeInfo) => {
+  const tab = await chrome.tabs.get(activeInfo.tabId);
+  console.log('tabs.onActivated', tab.id, tab.url);
+  setDefaultPopup(activeInfo.tabId, tab.url || '');
 });