cometchat-visual-builder-no-code 1.0.1-test

package/README.md

@@ -0,0 +1,249 @@
+<p align="center">
+  <img alt="CometChat" src="https://assets.cometchat.io/website/images/logos/banner.png">
+</p>
+
+<p>
+  <img alt="version" src="https://img.shields.io/badge/version-v1.0.5-blue" />
+  <img alt="status" src="https://img.shields.io/badge/status-stable-brightgreen" />
+  <img alt="react" src="https://img.shields.io/badge/react-supported-61DAFB?logo=react" />
+  <img alt="vite" src="https://img.shields.io/badge/vite-supported-646CFF?logo=vite" />
+  <img alt="typescript" src="https://img.shields.io/badge/typescript-supported-blue" />
+</p>
+
+# Integration steps for Visual Builder
+
+Follow these steps to integrate it into your existing React project:
+
+For Next.js integration, please refer to our <a href="https://www.cometchat.com/docs/ui-kit/react/builder-integration-nextjs" target="_blank">step-by-step guide</a>.
+
+## 1. Install dependencies in your app
+
+Run the following command to install the required dependencies:
+
+```bash
+npm install @cometchat/chat-uikit-react@6.0.7 @cometchat/calls-sdk-javascript
+```
+
+## 2. Copy CometChat Folder
+
+Copy the `cometchat-app-react/src/CometChat` folder into your project’s `src` directory.
+
+## 3. Initialize CometChat UI Kit
+
+The initialization process varies depending on your setup. Select your framework:
+
+<details>
+  <summary>CRA</summary>
+
+Open the file `src/index.tsx` and update it to include the required imports and initialization logic.
+
+```typescript
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import {
+  UIKitSettingsBuilder,
+  CometChatUIKit,
+} from "@cometchat/chat-uikit-react";
+import { setupLocalization } from "./CometChat/utils/utils";
+import { CometChatProvider } from "./CometChat/context/CometChatContext";
+
+export const COMETCHAT_CONSTANTS = {
+  APP_ID: "", // Replace with your App ID
+  REGION: "", // Replace with your App Region
+  AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
+};
+
+const uiKitSettings = new UIKitSettingsBuilder()
+  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+  .setRegion(COMETCHAT_CONSTANTS.REGION)
+  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+  .subscribePresenceForAllUsers()
+  .build();
+
+CometChatUIKit.init(uiKitSettings)?.then(() => {
+  setupLocalization();
+  ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+    <CometChatProvider>
+      <App />
+    </CometChatProvider>
+  );
+});
+```
+
+</details>
+
+<details>
+  <summary>Vite</summary>
+
+Open the file `src/main.tsx` and update it to include the required imports and initialization logic.
+
+```typescript
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import {
+  UIKitSettingsBuilder,
+  CometChatUIKit,
+} from "@cometchat/chat-uikit-react";
+import { setupLocalization } from "./CometChat/utils/utils.ts";
+import { CometChatProvider } from "./CometChat/context/CometChatContext.tsx";
+
+export const COMETCHAT_CONSTANTS = {
+  APP_ID: "", // Replace with your App ID
+  REGION: "", // Replace with your App Region
+  AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
+};
+
+const uiKitSettings = new UIKitSettingsBuilder()
+  .setAppId(COMETCHAT_CONSTANTS.APP_ID)
+  .setRegion(COMETCHAT_CONSTANTS.REGION)
+  .setAuthKey(COMETCHAT_CONSTANTS.AUTH_KEY)
+  .subscribePresenceForAllUsers()
+  .build();
+
+CometChatUIKit.init(uiKitSettings)?.then(() => {
+  setupLocalization();
+  createRoot(document.getElementById("root")!).render(
+    <CometChatProvider>
+      <App />
+    </CometChatProvider>
+  );
+});
+```
+
+</details>
+
+## 4. User Login
+
+Refer to the [User Login Guide](https://www.cometchat.com/docs/ui-kit/react/react-js-integration#step-4-user-login) to implement user authentication in your app.
+
+## 5. Render CometChatApp Component
+
+Add the `CometChatApp` component to your app:
+
+```typescript
+import CometChatApp from "./CometChat/CometChatApp";
+
+const App = () => {
+  return (
+    /* The CometChatApp component requires a parent element with an explicit height and width  
+   to render properly. Ensure the container has defined dimensions, and adjust them as needed  
+   based on your layout requirements. */
+    <div style={{ width: "100vw", height: "100dvh" }}>
+      <CometChatApp />
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Note:
+
+Use the `CometChatApp` component to launch a chat interface with a selected user or group.
+
+```typescript
+import { useEffect, useState } from "react";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
+import CometChatApp from "./CometChat/CometChatApp";
+
+const App = () => {
+  const [selectedUser, setSelectedUser] = useState<CometChat.User | undefined>(
+    undefined
+  );
+  const [selectedGroup, setSelectedGroup] = useState<
+    CometChat.Group | undefined
+  >(undefined);
+
+  useEffect(() => {
+    const UID = "UID"; // Replace with your User ID
+    CometChat.getUser(UID).then(setSelectedUser).catch(console.error);
+
+    const GUID = "GUID"; // Replace with your Group ID
+    CometChat.getGroup(GUID).then(setSelectedGroup).catch(console.error);
+  }, []);
+
+  return (
+    /* CometChatApp requires a parent with explicit height & width to render correctly.
+      Adjust the height and width as needed.
+     */
+    <div style={{ width: "100vw", height: "100vh" }}>
+      <CometChatApp user={selectedUser} group={selectedGroup} />
+    </div>
+  );
+};
+
+export default App;
+```
+
+This implementation applies when you choose the **Without Sidebar** option for Sidebar.
+
+- If `chatType` is `user` (default), only User chats will be displayed (either the selected user or the default user).
+- If `chatType` is `group`, only Group chats will be displayed (either the selected group or the default group).
+
+## 6. Run the App
+
+Finally, start your app using the appropriate command based on your setup:
+
+- Vite
+
+```bash
+npm run dev
+```
+
+- Create React App (CRA):
+
+```bash
+npm start
+```
+
+## Note:
+
+Enable the following features in the Dashboard in your App under Chat > Features to ensure full functionality.
+
+> Mentions, Reactions, Message translation, Polls, Collaborative whiteboard, Collaborative document, Emojis, Stickers, Conversation starter, Conversation summary, Smart reply.
+
+---
+
+If you face any issues while integrating the builder in your app project, please check if you have the following configurations added to your `tsConfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "resolveJsonModule": true
+  }
+}
+```
+
+If your development server is running, restart it to ensure the new TypeScript configuration is picked up.
+
+## Run the Visual Builder App Independently (optional)
+
+> &nbsp;
+>
+> 1. Open the `cometchat-app-react` folder.
+> 2. Add credentials for your app in `src/index.tsx` (`src/main.tsx` incase for Vite):
+>
+> ```typescript
+> export const COMETCHAT_CONSTANTS = {
+>   APP_ID: "", // Replace with your App ID
+>   REGION: "", // Replace with your App Region
+>   AUTH_KEY: "", // Replace with your Auth Key or leave blank if you are authenticating using Auth Token
+> };
+> ```
+>
+> 3. Install dependencies:
+>
+> ```bash
+> npm i
+> ```
+>
+> 4. Run the app:
+>
+> ```bash
+> npm start
+> ```
+
+For detailed steps, refer to our <a href="https://www.cometchat.com/docs/ui-kit/react/builder-integration" target="_blank">Visual Builder documentation</a>

package/dist/156.main.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunkVisualBuilder=this.webpackChunkVisualBuilder||[]).push([[156],{2156:(s,u,a)=>{s.exports=a.p+"assets/svg/outgoingCallSuccess.bbbc38474aa26b2bc241.svg"}}]);

package/dist/194.main.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunkVisualBuilder=this.webpackChunkVisualBuilder||[]).push([[194],{2194:(s,e,c)=>{s.exports=c.p+"assets/svg/incomingCallSuccess.0bf30f35cef97a13ccbe.svg"}}]);

package/dist/37.main.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunkVisualBuilder=this.webpackChunkVisualBuilder||[]).push([[37],{5037:(s,a,e)=>{s.exports=e.p+"assets/svg/missedCallIcon.6048dda48a6a5b22dedc.svg"}}]);

package/dist/380.main.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunkVisualBuilder=this.webpackChunkVisualBuilder||[]).push([[380],{4380:(s,e,u)=>{s.exports=u.p+"assets/svg/callRejectedIcon.fc84614b78bd19ffa1b0.svg"}}]);

package/dist/750.main.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunkVisualBuilder=this.webpackChunkVisualBuilder||[]).push([[750],{5750:(s,i,u)=>{s.exports=u.p+"assets/svg/incomingCallIcon.f72a226b678f60cf8858.svg"}}]);

package/dist/App.d.ts

@@ -0,0 +1,4 @@
+import "./App.css";
+import "@cometchat/chat-uikit-react/css-variables.css";
+declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/dist/CometChat/CometChatApp.d.ts

@@ -0,0 +1,16 @@
+import './styles/CometChatApp.css';
+import '@cometchat/chat-uikit-react/css-variables.css';
+interface CometChatAppProps {
+    /** Default user for the chat application (optional). */
+    user?: CometChat.User;
+    /** Default group for the chat application (optional). */
+    group?: CometChat.Group;
+}
+/**
+ * Main application component for the CometChat Builder.
+ *
+ * @param {CometChatAppProps} props - The component props.
+ * @returns {JSX.Element} The rendered CometChatApp component.
+ */
+declare function CometChatApp({ user, group }: CometChatAppProps): import("react/jsx-runtime").JSX.Element;
+export default CometChatApp;

package/dist/CometChat/CometChatSettings.d.ts

@@ -0,0 +1,88 @@
+export interface CometChatSettingsInterface {
+    chatFeatures: {
+        coreMessagingExperience: {
+            typingIndicator: boolean;
+            threadConversationAndReplies: boolean;
+            photosSharing: boolean;
+            videoSharing: boolean;
+            audioSharing: boolean;
+            fileSharing: boolean;
+            editMessage: boolean;
+            deleteMessage: boolean;
+            messageDeliveryAndReadReceipts: boolean;
+            userAndFriendsPresence: boolean;
+        };
+        deeperUserEngagement: {
+            mentions: boolean;
+            reactions: boolean;
+            messageTranslation: boolean;
+            polls: boolean;
+            collaborativeWhiteboard: boolean;
+            collaborativeDocument: boolean;
+            voiceNotes: boolean;
+            emojis: boolean;
+            stickers: boolean;
+            userInfo: boolean;
+            groupInfo: boolean;
+        };
+        aiUserCopilot: {
+            conversationStarter: boolean;
+            conversationSummary: boolean;
+            smartReply: boolean;
+        };
+        groupManagement: {
+            createGroup: boolean;
+            addMembersToGroups: boolean;
+            joinLeaveGroup: boolean;
+            deleteGroup: boolean;
+            viewGroupMembers: boolean;
+        };
+        moderatorControls: {
+            kickUsers: boolean;
+            banUsers: boolean;
+            promoteDemoteMembers: boolean;
+        };
+        privateMessagingWithinGroups: {
+            sendPrivateMessageToGroupMembers: boolean;
+        };
+    };
+    callFeatures: {
+        voiceAndVideoCalling: {
+            oneOnOneVoiceCalling: boolean;
+            oneOnOneVideoCalling: boolean;
+            groupVideoConference: boolean;
+            groupVoiceConference: boolean;
+        };
+    };
+    layout: {
+        withSideBar: boolean;
+        tabs: string[];
+        chatType: string;
+    };
+    style: {
+        theme: string;
+        color: {
+            brandColor: string;
+            primaryTextLight: string;
+            primaryTextDark: string;
+            secondaryTextLight: string;
+            secondaryTextDark: string;
+        };
+        typography: {
+            font: string;
+            size: string;
+        };
+    };
+    noCode?: {
+        docked: boolean;
+        styles: {
+            buttonBackGround: string;
+            buttonShape: string;
+            openIcon: string;
+            closeIcon: string;
+            customJs: string;
+            customCss: string;
+        };
+    };
+}
+export declare const CometChatSettings: CometChatSettingsInterface;

package/dist/CometChat/components/CometChatAddMembers/CometChatAddMembers.d.ts

@@ -0,0 +1,210 @@
+import { CSSProperties, JSX } from 'react';
+import '../../styles/CometChatAddMembers/CometChatAddMembers.css';
+import { CometChatOption, SelectionMode } from '@cometchat/chat-uikit-react';
+interface IAddMembersProps {
+    /**
+     * Image URL for the back button
+     *
+     * @remarks
+     * This prop will also be used if `backButton` prop is not provided
+     *
+     * @defaultValue `./assets/backbutton.svg`
+     */
+    backButtonIconURL?: string;
+    /**
+     * Show back button
+     *
+     * @defaultValue `true`
+     */
+    showBackButton?: boolean;
+    /**
+     * Function to call when the back button is clicked
+     */
+    onBack?: () => void;
+    /**
+     * Title of the component
+     *
+     * @defaultValue `getLocalizedString("ADD_MEMBERS")`
+     */
+    title?: string;
+    /**
+     * Hide the search bar
+     *
+     * @defaulValue `false`
+     */
+    hideSearch?: boolean;
+    /**
+     * Image URL for the search icon to use in the search bar
+     *
+     * @defaultValue `./assets/search.svg`
+     */
+    searchIconURL?: string;
+    /**
+     * Text to be displayed when the search input has no value
+     *
+     * @defaultValue `getLocalizedString("SEARCH")`
+     */
+    searchPlaceholderText?: string;
+    /**
+     * Show alphabetical header
+     *
+     * @defaultValue `false`
+     */
+    showSectionHeader?: boolean;
+    /**
+     * Property on the user object
+     *
+     * @remarks
+     * This property will be used to extract the section header character from the user object
+     *
+     * @defaultValue `getName`
+     */
+    sectionHeaderField?: keyof CometChat.User;
+    /**
+     * Image URL for the default loading view
+     *
+     * @defaultValue `./assets/spinner.svg`
+     */
+    loadingIconURL?: string;
+    /**
+     * Custom view for the loading state of the component
+     */
+    loadingStateView?: JSX.Element;
+    /**
+     * Text to display in the default empty view
+     *
+     * @defaultValue `getLocalizedString("NO_USERS_FOUND")`
+     */
+    emptyStateText?: string;
+    /**
+     * Custom view for the empty state of the component
+     */
+    emptyStateView?: JSX.Element;
+    /**
+     * Text to display in the default error view
+     *
+     * @defaultValue `getLocalizedString("SOMETHING_WRONG")`
+     */
+    errorStateText?: string;
+    /**
+     * Custom view for the error state of the component
+     */
+    errorStateView?: JSX.Element;
+    /**
+     * Hide error view
+     *
+     * @remarks
+     * If set to true, hides the default and the custom error view
+     *
+     * @defaultValue `false`
+     */
+    hideError?: boolean;
+    /**
+     * Hide user presence
+     *
+     * @remarks
+     * If set to true, the status indicator of the default list item view is not displayed
+     *
+     * @defaultValue `false`
+     */
+    disableUsersPresence?: boolean;
+    /**
+     * Hide the separator at the bottom of the default list item view
+     *
+     * @defaultValue `false`
+     */
+    hideSeparator?: boolean;
+    /**
+     * Function to call whenever the component encounters an error
+     */
+    onError?: ((error: CometChat.CometChatException) => void) | null;
+    /**
+     * Custom view to render on the top-right of the component
+     */
+    menus?: JSX.Element;
+    /**
+     * List of actions available on mouse over on the default list item component
+     */
+    options?: (user: CometChat.User) => CometChatOption[];
+    /**
+     * Selection mode to use for the default tail view
+     *
+     * @remarks
+     * This prop is used if `listItemView` prop is not provided.
+     *
+     * @defaultValue `SelectionMode.multiple`
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Function to call when a user from the fetched list is selected
+     *
+     * @remarks
+     * This prop is used if `selectionMode` prop is not `SelectionMode.none`
+     */
+    onSelect?: (user: CometChat.User, selected: boolean) => void;
+    /**
+     * Request builder to fetch users
+     *
+     * @remarks
+     * If the search input is not empty and the `searchRequestBuilder` prop is not provided,
+     * the search keyword of this request builder is set to the text in the search input
+     *
+     * @defaultValue Default request builder having the limit set to 30
+     */
+    usersRequestBuilder?: CometChat.UsersRequestBuilder;
+    /**
+     * Request builder with search parameters to fetch users
+     *
+     * @remarks
+     * If the search input is not empty,
+     * the search keyword of this request builder is set to the text in the search input
+     */
+    searchRequestBuilder?: CometChat.UsersRequestBuilder;
+    /**
+     * Custom list item view to be rendered for each user in the fetched list
+     */
+    listItemView?: (user: CometChat.User) => JSX.Element;
+    /**
+     * Custom subtitle view to be rendered for each user in the fetched list
+     *
+     * @remarks
+     * This prop is used if `listItemView` prop is not provided
+     */
+    subtitleView?: (user: CometChat.User) => JSX.Element;
+    /**
+     * Group to add members to
+     */
+    group: CometChat.Group;
+    /**
+     * Function to call when add button of the component is clicked
+     *
+     * @remarks
+     * This function won't be call if no users are selected
+     */
+    onAddMembersButtonClick?: (guid: string, membersToAdd: CometChat.GroupMember[]) => void;
+    /**
+     * Text to display for the default add button
+     *
+     * @defaultValue `getLocalizedString("ADD_MEMBERS")`
+     */
+    buttonText?: string;
+    /**
+     * Image URL for the close button
+     *
+     * @defaultValue `./assets/close2x.svg`
+     */
+    closeButtonIconURL?: string;
+    /**
+     * Function to call when the close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Styles to apply to the status indicator component of the default list item view
+     */
+    statusIndicatorStyle?: CSSProperties;
+}
+/**
+ * Renders a scrollable list of users to add to a group of a CometChat App
+ */
+export declare function CometChatAddMembers(props: IAddMembersProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CometChat/components/CometChatAddMembers/useCometChatAddMembers.d.ts

@@ -0,0 +1,11 @@
+import { SelectionMode } from '@cometchat/chat-uikit-react';
+import React from 'react';
+type Args = {
+    loggedInUserRef: React.MutableRefObject<CometChat.User | null>;
+    errorHandler: (error: unknown) => void;
+    selectionMode: SelectionMode;
+    selectionModeRef: React.MutableRefObject<SelectionMode>;
+    membersToAddRef: React.MutableRefObject<CometChat.GroupMember[]>;
+};
+export declare function useCometChatAddMembers(args: Args): void;
+export {};

package/dist/CometChat/components/CometChatAlertPopup/CometChatAlertPopup.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/CometChatAlertPopup/CometChatAlertPopup.css';
+export declare const CometChatAlertPopup: (props: {
+    onConfirmClick?: (() => void) | undefined;
+    title?: string | undefined;
+    description?: string | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CometChat/components/CometChatBannedMembers/CometChatBannedMembers.d.ts

@@ -0,0 +1,6 @@
+import '../../styles/CometChatBannedMembers/CometChatBannedMembers.css';
+interface bannedMembersProp {
+    group: CometChat.Group;
+}
+export declare const CometChatBannedMembers: (props: bannedMembersProp) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CometChat/components/CometChatCallLog/CometChatCallLogDetails.d.ts

@@ -0,0 +1,5 @@
+import '../../styles/CometChatCallLog/CometChatCallLogDetails.css';
+export declare const CometChatCallDetails: (props: {
+    selectedItem: any;
+    onBack?: (() => void) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CometChat/components/CometChatCallLog/CometChatCallLogHistory.d.ts

@@ -0,0 +1,4 @@
+import '../../styles/CometChatCallLog/CometChatCallLogHistory.css';
+export declare const CometChatCallDetailsHistory: (props: {
+    call: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CometChat/components/CometChatCallLog/CometChatCallLogInfo.d.ts

@@ -0,0 +1,4 @@
+import '../../styles/CometChatCallLog/CometChatCallLogInfo.css';
+export declare const CometChatCallDetailsInfo: (props: {
+    call: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CometChat/components/CometChatCallLog/CometChatCallLogParticipants.d.ts

@@ -0,0 +1,4 @@
+import '../../styles/CometChatCallLog/CometChatCallLogParticipants.css';
+export declare const CometChatCallDetailsParticipants: (props: {
+    call: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CometChat/components/CometChatCallLog/CometChatCallLogRecordings.d.ts

@@ -0,0 +1,4 @@
+import '../../styles/CometChatCallLog/CometChatCallLogRecordings.css';
+export declare const CometChatCallDetailsRecording: (props: {
+    call: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/CometChat/components/CometChatCreateGroup/CometChatCreateGroup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import '../../styles/CometChatCreateGroup/CometChatCreateGroup.css';
+import { Group } from '@cometchat/chat-sdk-javascript';
+interface CreateGroupProps {
+    setShowCreateGroup: React.Dispatch<React.SetStateAction<boolean>>;
+    onGroupCreated?: (group: Group) => void;
+}
+declare const CometChatCreateGroup: ({ setShowCreateGroup, onGroupCreated }: CreateGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default CometChatCreateGroup;

package/dist/CometChat/components/CometChatDetails/CometChatThreadedMessages.d.ts

@@ -0,0 +1,11 @@
+import '../../styles/CometChatDetails/CometChatThreadedMessages.css';
+import { CallLog } from '@cometchat/calls-sdk-javascript';
+interface ThreadProps {
+    message: CometChat.BaseMessage;
+    requestBuilderState?: CometChat.MessagesRequestBuilder;
+    selectedItem: CometChat.User | CometChat.Group | CometChat.Conversation | CometChat.Call | CallLog | undefined;
+    onClose?: () => void;
+    showComposer?: boolean;
+}
+export declare const CometChatThreadedMessages: (props: ThreadProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/CometChat/components/CometChatDetails/CometChatUserDetails.d.ts

@@ -0,0 +1,17 @@
+import '../../styles/CometChatDetails/CometChatUserDetails.css';
+interface UserDetailProps {
+    user: CometChat.User;
+    onHide?: () => void;
+    actionItems?: {
+        id?: string;
+        name: string;
+        icon: string;
+    }[];
+    showStatus?: boolean;
+    onUserActionClick?: (item: {
+        name: string;
+        icon: string;
+    }) => void;
+}
+export declare const CometChatUserDetails: (props: UserDetailProps) => import("react/jsx-runtime").JSX.Element;
+export {};