diff --git a/package-lock.json b/package-lock.json
index b18608e..c7c2a33 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4190,18 +4190,6 @@
}
}
},
- "node_modules/@likeminds.community/likeminds-chat-reactjs/node_modules/@types/react": {
- "version": "18.3.23",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
- "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
- "license": "MIT",
- "optional": true,
- "peer": true,
- "dependencies": {
- "@types/prop-types": "*",
- "csstype": "^3.0.2"
- }
- },
"node_modules/@likeminds.community/likeminds-chat-reactjs/node_modules/react-is": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -7400,13 +7388,6 @@
"dev": true,
"license": "ISC"
},
- "node_modules/jquery": {
- "version": "3.7.1",
- "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
- "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
- "license": "MIT",
- "peer": true
- },
"node_modules/js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
@@ -9291,21 +9272,6 @@
"dev": true,
"license": "ISC"
},
- "node_modules/yaml": {
- "version": "2.8.1",
- "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
- "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
- "dev": true,
- "license": "ISC",
- "optional": true,
- "peer": true,
- "bin": {
- "yaml": "bin.mjs"
- },
- "engines": {
- "node": ">= 14.6"
- }
- },
"node_modules/yargs": {
"version": "17.7.2",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/src/App.css b/src/App.css
index b9d355d..0f1c954 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,110 @@
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
+/* Main container for the chat application */
+.lm-chat-container {
+ width: 100vw !important;
+ height: 100vh !important;
+ display: flex !important;
+ justify-content: center !important;
+ align-items: center !important;
+ background-color: #f0f2f5 !important; /* Light grey background for the overall app */
}
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
+/* Custom styling for various header components to ensure consistency */
+
+/* Main chatroom header */
+.lm-channel-header {
+ background-color: #4a90e2 !important; /* Example blue background */
+ color: #ffffff !important;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Adjust text color for elements within the main chatroom header */
+.lm-channel-header .lm-channel-title {
+ color: #ffffff !important;
}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
+
+.lm-channel-header .lm-channel-desc {
+ color: #e0e0e0 !important;
}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
+
+.lm-channel-header .lm-channel-icon {
+ color: #ffffff !important;
+}
+
+/* Search conversation header (appears when search is active in a chatroom) */
+.lm-conversation-search {
+ background-color: #4a90e2 !important; /* Match main header background */
+ color: #ffffff !important;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Adjust text color for elements within the search conversation header */
+.lm-conversation-search .lm-conversation-search-input-field {
+ color: #ffffff !important;
+ background-color: rgba(255, 255, 255, 0.2) !important;
+ border: 1px solid rgba(255, 255, 255, 0.3) !important;
+}
+
+.lm-conversation-search .lm-conversation-search-input-field::placeholder {
+ color: #e0e0e0 !important;
+}
+
+.lm-conversation-search .lm-conversation-search-go-back-icon {
+ color: #ffffff !important;
+}
+
+/* Channel list header (left panel header) */
+.lm-channel-list-header {
+ background-color: #3a7bd5 !important; /* Slightly darker blue for channel list header */
+ color: #ffffff !important;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Adjust text color for elements within the channel list header */
+.lm-channel-list-header .title {
+ color: #ffffff !important;
+}
+
+.lm-channel-list-header .icon {
+ color: #ffffff !important;
+}
+
+/* Chatroom search header (appears when searching in the channel list) */
+.lm-chatroom-search {
+ background-color: #3a7bd5 !important; /* Match channel list header background */
+ color: #ffffff !important;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* Adjust text color for elements within the chatroom search header */
+.lm-chatroom-search .lm-chatroom-search-input-field {
+ color: #ffffff !important;
+ background-color: rgba(255, 255, 255, 0.2) !important;
+ border: 1px solid rgba(255, 255, 255, 0.3) !important;
+}
+
+.lm-chatroom-search .lm-chatroom-search-input-field::placeholder {
+ color: #e0e0e0 !important;
}
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
+.lm-chatroom-search .lm-chatroom-search-go-back-icon {
+ color: #ffffff !important;
}
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
+/* General chat box styling */
+.lm-chat-box {
+ background-color: #ffffff !important;
+ border-radius: 8px !important;
+ overflow: hidden !important;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
-.card {
- padding: 2em;
+/* Ensure the main channel block takes full height and width */
+.lm-channel-block {
+ width: 100% !important;
+ height: 100% !important;
}
-.read-the-docs {
- color: #888;
+/* Adjust the right panel to take available width */
+.lm-right-panel {
+ flex: 1 !important;
}
diff --git a/src/App.tsx b/src/App.tsx
index 3d7ded3..e7e3e86 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,35 +1,41 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { useState } from "react";
+import {
+ LMClientOverlayProvider,
+ LMChannel,
+ initiateLMClient,
+ LMChatTheme,
+} from "@likeminds.community/likeminds-chat-reactjs";
+import "./App.css"; // Ensure this import is present for custom styles
-function App() {
- const [count, setCount] = useState(0)
+// Initialize the LikeMinds Chat Client outside the component to avoid re-initialization
+const lmChatClient = initiateLMClient();
+
+function ChatApp() {
+ // Replace with your actual API Key, UUID, and Username
+ // For production, consider fetching these securely from your backend
+ const [userDetails] = useState<{
+ apiKey?: string;
+ uuid?: string;
+ username?: string;
+ }>(
+ {
+ apiKey: "aca40392-f386-4c58-b9dd-7f59a50de207", // <<< IMPORTANT: Replace with your actual API Key
+ uuid: "16d8bc72-6b1a-4773-9832-3237e1ca5597", // <<< IMPORTANT: Replace with your actual User UUID
+ username: "TestUser", // <<< IMPORTANT: Replace with your actual Username
+ }
+ );
return (
- <>
-
- Vite + React
-
-
-
- Edit src/App.tsx and save to test HMR
-
-
- Click on the Vite and React logos to learn more
-
-
- )
+
+
+
+
+
+ );
}
-export default App
+export default ChatApp;
diff --git a/src/index.css b/src/index.css
index 08a3ac9..0259172 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,68 +1,19 @@
-:root {
- font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
- line-height: 1.5;
- font-weight: 400;
-
- color-scheme: light dark;
- color: rgba(255, 255, 255, 0.87);
- background-color: #242424;
-
- font-synthesis: none;
- text-rendering: optimizeLegibility;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-a {
- font-weight: 500;
- color: #646cff;
- text-decoration: inherit;
-}
-a:hover {
- color: #535bf2;
-}
-
+/* Basic global styles */
body {
- margin: 0;
- display: flex;
- place-items: center;
- min-width: 320px;
- min-height: 100vh;
-}
-
-h1 {
- font-size: 3.2em;
- line-height: 1.1;
+ margin: 0 !important;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif !important;
+ -webkit-font-smoothing: antialiased !important;
+ -moz-osx-font-smoothing: grayscale !important;
}
-button {
- border-radius: 8px;
- border: 1px solid transparent;
- padding: 0.6em 1.2em;
- font-size: 1em;
- font-weight: 500;
- font-family: inherit;
- background-color: #1a1a1a;
- cursor: pointer;
- transition: border-color 0.25s;
-}
-button:hover {
- border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
- outline: 4px auto -webkit-focus-ring-color;
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace !important;
}
-@media (prefers-color-scheme: light) {
- :root {
- color: #213547;
- background-color: #ffffff;
- }
- a:hover {
- color: #747bff;
- }
- button {
- background-color: #f9f9f9;
- }
+/* Ensure box-sizing is consistent */
+*, *::before, *::after {
+ box-sizing: border-box !important;
}
diff --git a/src/main.tsx b/src/main.tsx
index 69071d2..37d6b4a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,13 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import ChatApp from './App.tsx'; // Renamed App to ChatApp
import './index.css';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')!).render(
-
-
-
+
+
+ {/* Make the ChatApp the default route */}
+ } />
+
+
,
);