Centralize definition of the content security policy and add in-app chat

- in-app chat is meant for support requests and currently is only in the settings page, where users are most likely to go if confused IMO
khoj-ai · Dec 9, 2024 · df66fb2 · df66fb2
1 parent 0b87c13
commit df66fb2
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 63 deletions.
diff --git a/src/interface/web/app/agents/layout.tsx b/src/interface/web/app/agents/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../globals.css";
+import { ContentSecurityPolicy } from "../common/layoutHelper";
 
 export const metadata: Metadata = {
     title: "Khoj AI - Agents",
@@ -32,18 +33,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
-            <meta
-                httpEquiv="Content-Security-Policy"
-                content="default-src 'self' https://assets.khoj.dev;
-                       media-src * blob:;
-                       script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
-                       connect-src 'self' https://ipapi.co/json ws://localhost:42110;
-                       style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
-                       img-src 'self' data: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
-                       font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
-                       child-src 'none';
-                       object-src 'none';"
-            ></meta>
+            <ContentSecurityPolicy />
             <body>{children}</body>
         </html>
     );

diff --git a/src/interface/web/app/automations/layout.tsx b/src/interface/web/app/automations/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Toaster } from "@/components/ui/toaster";
 
 import "../globals.css";
+import { ContentSecurityPolicy } from "../common/layoutHelper";
 
 export const metadata: Metadata = {
     title: "Khoj AI - Automations",
@@ -32,9 +33,12 @@ export default function RootLayout({
     children: React.ReactNode;
 }>) {
     return (
-        <div>
-            {children}
-            <Toaster />
-        </div>
+        <html>
+            <ContentSecurityPolicy />
+            <body>
+                {children}
+                <Toaster />
+            </body>
+        </html>
     );
 }
diff --git a/src/interface/web/app/chat/layout.tsx b/src/interface/web/app/chat/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../globals.css";
+import { ContentSecurityPolicy } from "../common/layoutHelper";
 
 export const metadata: Metadata = {
     title: "Khoj AI - Chat",
@@ -33,18 +34,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
-            <meta
-                httpEquiv="Content-Security-Policy"
-                content="default-src 'self' https://assets.khoj.dev;
-                       media-src * blob:;
-                       script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
-                       connect-src 'self' blob: https://ipapi.co/json ws://localhost:42110;
-                       style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
-                       img-src 'self' data: blob: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
-                       font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
-                       child-src 'none';
-                       object-src 'none';"
-            ></meta>
+            <ContentSecurityPolicy />
             <body>
                 {children}
                 <script

diff --git a/src/interface/web/app/common/layoutHelper.tsx b/src/interface/web/app/common/layoutHelper.tsx
@@ -0,0 +1,16 @@
+export function ContentSecurityPolicy() {
+    return (
+        <meta
+            httpEquiv="Content-Security-Policy"
+            content="default-src 'self' https://assets.khoj.dev;
+               media-src * blob:;
+               script-src 'self' https://assets.khoj.dev https://app.chatwoot.com 'unsafe-inline' 'unsafe-eval';
+               connect-src 'self' blob: https://ipapi.co/json ws://localhost:42110;
+               style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
+               img-src 'self' data: blob: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
+               font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
+               child-src 'self' https://app.chatwoot.com;
+               object-src 'none';"
+        ></meta>
+    );
+}
diff --git a/src/interface/web/app/components/chatWoot/ChatwootWidget.tsx b/src/interface/web/app/components/chatWoot/ChatwootWidget.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import Script from "next/script";
+
+export function ChatwootWidget() {
+    return (
+        <Script
+            id="chatwoot-widget"
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+                __html: `
+          window.chatwootSettings = {
+            position: "right",
+            type: "standard",
+            launcherTitle: "Chat with us"
+          };
+          (function(d,t) {
+            var BASE_URL="https://app.chatwoot.com";
+            var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+            g.src=BASE_URL+"/packs/js/sdk.js";
+            g.defer = true;
+            g.async = true;
+            s.parentNode.insertBefore(g,s);
+            g.onload=function(){
+              window.chatwootSDK.run({
+                websiteToken: '5uV59Ay2pvMJenJary2hvvVM',
+                baseUrl: BASE_URL
+              })
+            }
+          })(document,"script");
+        `,
+            }}
+        />
+    );
+}
diff --git a/src/interface/web/app/layout.tsx b/src/interface/web/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "./globals.css";
+import { ContentSecurityPolicy } from "./common/layoutHelper";
 
 export const metadata: Metadata = {
     title: "Khoj AI - Home",
@@ -38,18 +39,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
-            <meta
-                httpEquiv="Content-Security-Policy"
-                content="default-src 'self' https://assets.khoj.dev;
-                       media-src * blob:;
-                       script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
-                       connect-src 'self' blob: https://ipapi.co/json ws://localhost:42110;
-                       style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
-                       img-src 'self' data: blob: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
-                       font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
-                       child-src 'none';
-                       object-src 'none';"
-            ></meta>
+            <ContentSecurityPolicy />
             <body>{children}</body>
         </html>
     );

diff --git a/src/interface/web/app/search/layout.tsx b/src/interface/web/app/search/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 
 import "../globals.css";
+import { ContentSecurityPolicy } from "../common/layoutHelper";
 
 export const metadata: Metadata = {
     title: "Khoj AI - Search",
@@ -31,5 +32,10 @@ export default function RootLayout({
 }: Readonly<{
     children: React.ReactNode;
 }>) {
-    return <div>{children}</div>;
+    return (
+        <html>
+            <ContentSecurityPolicy />
+            <body>{children}</body>
+        </html>
+    );
 }
diff --git a/src/interface/web/app/settings/layout.tsx b/src/interface/web/app/settings/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../globals.css";
 import { Toaster } from "@/components/ui/toaster";
+import { ContentSecurityPolicy } from "../common/layoutHelper";
+import { ChatwootWidget } from "../components/chatWoot/ChatwootWidget";
 
 export const metadata: Metadata = {
     title: "Khoj AI - Settings",
@@ -33,20 +35,11 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
-            <meta
-                httpEquiv="Content-Security-Policy"
-                content="default-src 'self' https://assets.khoj.dev;
-                        script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
-                        connect-src 'self' https://ipapi.co/json ws://localhost:42110;
-                        style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
-                        img-src 'self' data: https://*.khoj.dev https://*.googleusercontent.com;
-                        font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
-                        child-src 'none';
-                        object-src 'none';"
-            ></meta>
+            <ContentSecurityPolicy />
             <body>
                 {children}
                 <Toaster />
+                <ChatwootWidget />
             </body>
         </html>
     );

diff --git a/src/interface/web/app/share/chat/layout.tsx b/src/interface/web/app/share/chat/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { noto_sans, noto_sans_arabic } from "@/app/fonts";
 import "../../globals.css";
+import { ContentSecurityPolicy } from "@/app/common/layoutHelper";
 
 export const metadata: Metadata = {
     title: "Khoj AI - Chat",
@@ -14,17 +15,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" className={`${noto_sans.variable} ${noto_sans_arabic.variable}`}>
-            <meta
-                httpEquiv="Content-Security-Policy"
-                content="default-src 'self' https://assets.khoj.dev;
-                       script-src 'self' https://assets.khoj.dev 'unsafe-inline' 'unsafe-eval';
-                       connect-src 'self' blob: https://ipapi.co/json ws://localhost:42110;
-                       style-src 'self' https://assets.khoj.dev 'unsafe-inline' https://fonts.googleapis.com;
-                       img-src 'self' data: blob: https://*.khoj.dev https://*.googleusercontent.com https://*.google.com/ https://*.gstatic.com;
-                       font-src 'self' https://assets.khoj.dev https://fonts.gstatic.com;
-                       child-src 'none';
-                       object-src 'none';"
-            ></meta>
+            <ContentSecurityPolicy />
             <body>
                 {children}
                 <script