From 037343a7963e6631704d80d52003060b20775cf4 Mon Sep 17 00:00:00 2001
From: Mauricio Siu <47042324+Siumauricio@users.noreply.github.com>
Date: Wed, 28 May 2025 02:22:56 -0600
Subject: [PATCH 1/4] feat: integrate Chatwoot widget into dashboard layout and
replace project layout with dashboard layout in various pages
---
.../components/layouts/dashboard-layout.tsx | 4 ++
.../components/layouts/project-layout.tsx | 9 ---
.../components/shared/ChatwootWidget.tsx | 71 +++++++++++++++++++
apps/dokploy/pages/_app.tsx | 13 ++--
.../pages/dashboard/project/[projectId].tsx | 4 +-
.../services/application/[applicationId].tsx | 4 +-
.../services/compose/[composeId].tsx | 4 +-
.../services/mariadb/[mariadbId].tsx | 4 +-
.../[projectId]/services/mongo/[mongoId].tsx | 4 +-
.../[projectId]/services/mysql/[mysqlId].tsx | 4 +-
.../services/postgres/[postgresId].tsx | 4 +-
.../[projectId]/services/redis/[redisId].tsx | 4 +-
apps/dokploy/types/chatwoot.d.ts | 39 ++++++++++
13 files changed, 137 insertions(+), 31 deletions(-)
delete mode 100644 apps/dokploy/components/layouts/project-layout.tsx
create mode 100644 apps/dokploy/components/shared/ChatwootWidget.tsx
create mode 100644 apps/dokploy/types/chatwoot.d.ts
diff --git a/apps/dokploy/components/layouts/dashboard-layout.tsx b/apps/dokploy/components/layouts/dashboard-layout.tsx
index 0bc39baf9..3b4b482bd 100644
--- a/apps/dokploy/components/layouts/dashboard-layout.tsx
+++ b/apps/dokploy/components/layouts/dashboard-layout.tsx
@@ -1,6 +1,7 @@
import { api } from "@/utils/api";
import { ImpersonationBar } from "../dashboard/impersonation/impersonation-bar";
import Page from "./side";
+import { ChatwootWidget } from "../shared/ChatwootWidget";
interface Props {
children: React.ReactNode;
@@ -9,10 +10,13 @@ interface Props {
export const DashboardLayout = ({ children }: Props) => {
const { data: haveRootAccess } = api.user.haveRootAccess.useQuery();
+ const { data: isCloud } = api.settings.isCloud.useQuery();
return (
<>
{children}
+ {isCloud && }
+
{haveRootAccess === true && }
);
diff --git a/apps/dokploy/components/layouts/project-layout.tsx b/apps/dokploy/components/layouts/project-layout.tsx
deleted file mode 100644
index f5fdf3504..000000000
--- a/apps/dokploy/components/layouts/project-layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import Page from "./side";
-
-interface Props {
- children: React.ReactNode;
-}
-
-export const ProjectLayout = ({ children }: Props) => {
- return {children};
-};
diff --git a/apps/dokploy/components/shared/ChatwootWidget.tsx b/apps/dokploy/components/shared/ChatwootWidget.tsx
new file mode 100644
index 000000000..acd263b04
--- /dev/null
+++ b/apps/dokploy/components/shared/ChatwootWidget.tsx
@@ -0,0 +1,71 @@
+import Script from "next/script";
+import { useEffect } from "react";
+
+interface ChatwootWidgetProps {
+ websiteToken: string;
+ baseUrl?: string;
+ settings?: {
+ position?: "left" | "right";
+ type?: "standard" | "expanded_bubble";
+ launcherTitle?: string;
+ darkMode?: boolean;
+ hideMessageBubble?: boolean;
+ placement?: "right" | "left";
+ showPopoutButton?: boolean;
+ widgetStyle?: "standard" | "bubble";
+ };
+ user?: {
+ identifier: string;
+ name?: string;
+ email?: string;
+ phoneNumber?: string;
+ avatarUrl?: string;
+ customAttributes?: Record;
+ identifierHash?: string;
+ };
+}
+
+export const ChatwootWidget = ({
+ websiteToken,
+ baseUrl = "https://app.chatwoot.com",
+ settings = {
+ position: "right",
+ type: "standard",
+ launcherTitle: "Chat with us",
+ },
+ user,
+}: ChatwootWidgetProps) => {
+ useEffect(() => {
+ // Configurar los settings de Chatwoot
+ window.chatwootSettings = {
+ position: "right",
+ darkMode: false,
+ };
+
+ (window as any).chatwootSDKReady = () => {
+ window.chatwootSDK?.run({ websiteToken, baseUrl });
+
+ const trySetUser = () => {
+ if (window.$chatwoot && user) {
+ window.$chatwoot.setUser(user.identifier, {
+ email: user.email,
+ name: user.name,
+ avatar_url: user.avatarUrl,
+ phone_number: user.phoneNumber,
+ ...user.customAttributes,
+ });
+ }
+ };
+
+ trySetUser();
+ };
+ }, [websiteToken, baseUrl, user, settings]);
+
+ return (
+