diff --git a/package-lock.json b/package-lock.json index fbabce3..7cecefe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "rxjs": "^7.8.1" }, "devDependencies": { - "@dcl/eslint-config": "1.1.7", + "@dcl/eslint-config": "^1.1.10", "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@esbuild-plugins/node-modules-polyfill": "^0.2.2", "@swc/core": "^1.3.69", @@ -1327,14 +1327,14 @@ } }, "node_modules/@dcl/eslint-config": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/@dcl/eslint-config/-/eslint-config-1.1.7.tgz", - "integrity": "sha512-MwAL4hFxwXZ5VeJTPFDnzjX6Qe/PKOaxJrkOQN8a0jkwDjYw9rTMcj+FIAoLu+pBzUg6B+XyFm0OqpAvIxHjeQ==", + "version": "1.1.10", + "resolved": "https://registry.npmjs.org/@dcl/eslint-config/-/eslint-config-1.1.10.tgz", + "integrity": "sha512-6cIgvYKExnhn6DD6C/p3eQo+jlqFH5cMIbI8leaxAL6mym6jlLzKEqvksHW0S120Zgh5QqQ2B3MZGUgj8CBStQ==", "dev": true, "dependencies": { - "@typescript-eslint/eslint-plugin": "^5.60.1", - "@typescript-eslint/parser": "^5.60.1", - "eslint": "^8.43.0", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", + "eslint": "^8.44.0", "eslint-config-prettier": "^8.8.0", "eslint-import-resolver-babel-module": "^5.3.2", "eslint-import-resolver-typescript": "^3.5.5", @@ -5096,15 +5096,15 @@ "dev": true }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.61.0.tgz", - "integrity": "sha512-A5l/eUAug103qtkwccSCxn8ZRwT+7RXWkFECdA4Cvl1dOlDUgTpAOfSEElZn2uSUxhdDpnCdetrf0jvU4qrL+g==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", + "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "dev": true, "dependencies": { "@eslint-community/regexpp": "^4.4.0", - "@typescript-eslint/scope-manager": "5.61.0", - "@typescript-eslint/type-utils": "5.61.0", - "@typescript-eslint/utils": "5.61.0", + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/type-utils": "5.62.0", + "@typescript-eslint/utils": "5.62.0", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.0", @@ -5130,14 +5130,14 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.61.0.tgz", - "integrity": "sha512-yGr4Sgyh8uO6fSi9hw3jAFXNBHbCtKKFMdX2IkT3ZqpKmtAq3lHS4ixB/COFuAIJpwl9/AqF7j72ZDWYKmIfvg==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", + "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "dev": true, "dependencies": { - "@typescript-eslint/scope-manager": "5.61.0", - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/typescript-estree": "5.61.0", + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/typescript-estree": "5.62.0", "debug": "^4.3.4" }, "engines": { @@ -5157,13 +5157,13 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.61.0.tgz", - "integrity": "sha512-W8VoMjoSg7f7nqAROEmTt6LoBpn81AegP7uKhhW5KzYlehs8VV0ZW0fIDVbcZRcaP3aPSW+JZFua+ysQN+m/Nw==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz", + "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/visitor-keys": "5.61.0" + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -5174,13 +5174,13 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.61.0.tgz", - "integrity": "sha512-kk8u//r+oVK2Aj3ph/26XdH0pbAkC2RiSjUYhKD+PExemG4XSjpGFeyZ/QM8lBOa7O8aGOU+/yEbMJgQv/DnCg==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz", + "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "5.61.0", - "@typescript-eslint/utils": "5.61.0", + "@typescript-eslint/typescript-estree": "5.62.0", + "@typescript-eslint/utils": "5.62.0", "debug": "^4.3.4", "tsutils": "^3.21.0" }, @@ -5201,9 +5201,9 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.61.0.tgz", - "integrity": "sha512-ldyueo58KjngXpzloHUog/h9REmHl59G1b3a5Sng1GfBo14BkS3ZbMEb3693gnP1k//97lh7bKsp6/V/0v1veQ==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz", + "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==", "dev": true, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -5214,13 +5214,13 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.61.0.tgz", - "integrity": "sha512-Fud90PxONnnLZ36oR5ClJBLTLfU4pIWBmnvGwTbEa2cXIqj70AEDEmOmpkFComjBZ/037ueKrOdHuYmSFVD7Rw==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz", + "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/visitor-keys": "5.61.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -5241,17 +5241,17 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.61.0.tgz", - "integrity": "sha512-mV6O+6VgQmVE6+xzlA91xifndPW9ElFW8vbSF0xCT/czPXVhwDewKila1jOyRwa9AE19zKnrr7Cg5S3pJVrTWQ==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz", + "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==", "dev": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@types/json-schema": "^7.0.9", "@types/semver": "^7.3.12", - "@typescript-eslint/scope-manager": "5.61.0", - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/typescript-estree": "5.61.0", + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/typescript-estree": "5.62.0", "eslint-scope": "^5.1.1", "semver": "^7.3.7" }, @@ -5267,12 +5267,12 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.61.0.tgz", - "integrity": "sha512-50XQ5VdbWrX06mQXhy93WywSFZZGsv3EOjq+lqp6WC2t+j3mb6A9xYVdrRxafvK88vg9k9u+CT4l6D8PEatjKg==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz", + "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==", "dev": true, "dependencies": { - "@typescript-eslint/types": "5.61.0", + "@typescript-eslint/types": "5.62.0", "eslint-visitor-keys": "^3.3.0" }, "engines": { @@ -20784,14 +20784,14 @@ } }, "@dcl/eslint-config": { - "version": "1.1.7", - "resolved": "https://registry.npmjs.org/@dcl/eslint-config/-/eslint-config-1.1.7.tgz", - "integrity": "sha512-MwAL4hFxwXZ5VeJTPFDnzjX6Qe/PKOaxJrkOQN8a0jkwDjYw9rTMcj+FIAoLu+pBzUg6B+XyFm0OqpAvIxHjeQ==", + "version": "1.1.10", + "resolved": "https://registry.npmjs.org/@dcl/eslint-config/-/eslint-config-1.1.10.tgz", + "integrity": "sha512-6cIgvYKExnhn6DD6C/p3eQo+jlqFH5cMIbI8leaxAL6mym6jlLzKEqvksHW0S120Zgh5QqQ2B3MZGUgj8CBStQ==", "dev": true, "requires": { - "@typescript-eslint/eslint-plugin": "^5.60.1", - "@typescript-eslint/parser": "^5.60.1", - "eslint": "^8.43.0", + "@typescript-eslint/eslint-plugin": "^5.62.0", + "@typescript-eslint/parser": "^5.62.0", + "eslint": "^8.44.0", "eslint-config-prettier": "^8.8.0", "eslint-import-resolver-babel-module": "^5.3.2", "eslint-import-resolver-typescript": "^3.5.5", @@ -23593,15 +23593,15 @@ "dev": true }, "@typescript-eslint/eslint-plugin": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.61.0.tgz", - "integrity": "sha512-A5l/eUAug103qtkwccSCxn8ZRwT+7RXWkFECdA4Cvl1dOlDUgTpAOfSEElZn2uSUxhdDpnCdetrf0jvU4qrL+g==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz", + "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==", "dev": true, "requires": { "@eslint-community/regexpp": "^4.4.0", - "@typescript-eslint/scope-manager": "5.61.0", - "@typescript-eslint/type-utils": "5.61.0", - "@typescript-eslint/utils": "5.61.0", + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/type-utils": "5.62.0", + "@typescript-eslint/utils": "5.62.0", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.0", @@ -23611,53 +23611,53 @@ } }, "@typescript-eslint/parser": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.61.0.tgz", - "integrity": "sha512-yGr4Sgyh8uO6fSi9hw3jAFXNBHbCtKKFMdX2IkT3ZqpKmtAq3lHS4ixB/COFuAIJpwl9/AqF7j72ZDWYKmIfvg==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz", + "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "5.61.0", - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/typescript-estree": "5.61.0", + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/typescript-estree": "5.62.0", "debug": "^4.3.4" } }, "@typescript-eslint/scope-manager": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.61.0.tgz", - "integrity": "sha512-W8VoMjoSg7f7nqAROEmTt6LoBpn81AegP7uKhhW5KzYlehs8VV0ZW0fIDVbcZRcaP3aPSW+JZFua+ysQN+m/Nw==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.62.0.tgz", + "integrity": "sha512-VXuvVvZeQCQb5Zgf4HAxc04q5j+WrNAtNh9OwCsCgpKqESMTu3tF/jhZ3xG6T4NZwWl65Bg8KuS2uEvhSfLl0w==", "dev": true, "requires": { - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/visitor-keys": "5.61.0" + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0" } }, "@typescript-eslint/type-utils": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.61.0.tgz", - "integrity": "sha512-kk8u//r+oVK2Aj3ph/26XdH0pbAkC2RiSjUYhKD+PExemG4XSjpGFeyZ/QM8lBOa7O8aGOU+/yEbMJgQv/DnCg==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz", + "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==", "dev": true, "requires": { - "@typescript-eslint/typescript-estree": "5.61.0", - "@typescript-eslint/utils": "5.61.0", + "@typescript-eslint/typescript-estree": "5.62.0", + "@typescript-eslint/utils": "5.62.0", "debug": "^4.3.4", "tsutils": "^3.21.0" } }, "@typescript-eslint/types": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.61.0.tgz", - "integrity": "sha512-ldyueo58KjngXpzloHUog/h9REmHl59G1b3a5Sng1GfBo14BkS3ZbMEb3693gnP1k//97lh7bKsp6/V/0v1veQ==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.62.0.tgz", + "integrity": "sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.61.0.tgz", - "integrity": "sha512-Fud90PxONnnLZ36oR5ClJBLTLfU4pIWBmnvGwTbEa2cXIqj70AEDEmOmpkFComjBZ/037ueKrOdHuYmSFVD7Rw==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.62.0.tgz", + "integrity": "sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==", "dev": true, "requires": { - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/visitor-keys": "5.61.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/visitor-keys": "5.62.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -23666,28 +23666,28 @@ } }, "@typescript-eslint/utils": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.61.0.tgz", - "integrity": "sha512-mV6O+6VgQmVE6+xzlA91xifndPW9ElFW8vbSF0xCT/czPXVhwDewKila1jOyRwa9AE19zKnrr7Cg5S3pJVrTWQ==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz", + "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==", "dev": true, "requires": { "@eslint-community/eslint-utils": "^4.2.0", "@types/json-schema": "^7.0.9", "@types/semver": "^7.3.12", - "@typescript-eslint/scope-manager": "5.61.0", - "@typescript-eslint/types": "5.61.0", - "@typescript-eslint/typescript-estree": "5.61.0", + "@typescript-eslint/scope-manager": "5.62.0", + "@typescript-eslint/types": "5.62.0", + "@typescript-eslint/typescript-estree": "5.62.0", "eslint-scope": "^5.1.1", "semver": "^7.3.7" } }, "@typescript-eslint/visitor-keys": { - "version": "5.61.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.61.0.tgz", - "integrity": "sha512-50XQ5VdbWrX06mQXhy93WywSFZZGsv3EOjq+lqp6WC2t+j3mb6A9xYVdrRxafvK88vg9k9u+CT4l6D8PEatjKg==", + "version": "5.62.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.62.0.tgz", + "integrity": "sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==", "dev": true, "requires": { - "@typescript-eslint/types": "5.61.0", + "@typescript-eslint/types": "5.62.0", "eslint-visitor-keys": "^3.3.0" } }, diff --git a/package.json b/package.json index 985bcbb..eee79a7 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,7 @@ "rxjs": "^7.8.1" }, "devDependencies": { - "@dcl/eslint-config": "1.1.7", + "@dcl/eslint-config": "^1.1.10", "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@esbuild-plugins/node-modules-polyfill": "^0.2.2", "@swc/core": "^1.3.69", diff --git a/src/assets/icons/SendIcon.tsx b/src/assets/icons/SendIcon.tsx new file mode 100644 index 0000000..5e3c9d4 --- /dev/null +++ b/src/assets/icons/SendIcon.tsx @@ -0,0 +1,23 @@ +import * as React from 'react' +import type { SVGProps } from 'react' + +const SendIcon = (props: SVGProps) => ( + + + + +) + +export default SendIcon diff --git a/src/components/VideoConference/ControlBar/ControlBar.module.css b/src/components/VideoConference/ControlBar/ControlBar.module.css index c942846..998a72a 100644 --- a/src/components/VideoConference/ControlBar/ControlBar.module.css +++ b/src/components/VideoConference/ControlBar/ControlBar.module.css @@ -1,5 +1,7 @@ .ControlBarContainer { position: relative; + height: var(--lk-control-bar-height); + border-top: none; } .ControlBarRightButtonGroup { @@ -10,3 +12,7 @@ align-items: center; justify-content: center; } + +.chatToggleButton { + background-color: transparent; +} diff --git a/src/components/VideoConference/ControlBar/ControlBar.tsx b/src/components/VideoConference/ControlBar/ControlBar.tsx index 1f73e2f..77aedf6 100644 --- a/src/components/VideoConference/ControlBar/ControlBar.tsx +++ b/src/components/VideoConference/ControlBar/ControlBar.tsx @@ -176,7 +176,7 @@ export function ControlBar({ variation, controls, ...props }: ControlBarProps) {
{visibleControls.chat && ( - + {showIcon && } {showText && 'Chat'} diff --git a/src/components/VideoConference/ParticipantTile/ParticipantTile.tsx b/src/components/VideoConference/ParticipantTile/ParticipantTile.tsx index d5d91e5..bd02073 100644 --- a/src/components/VideoConference/ParticipantTile/ParticipantTile.tsx +++ b/src/components/VideoConference/ParticipantTile/ParticipantTile.tsx @@ -1,5 +1,6 @@ import * as React from 'react' import { isParticipantSourcePinned } from '@livekit/components-core' +import type { TrackReferenceOrPlaceholder } from '@livekit/components-core' import { AudioTrack, ConnectionQualityIndicator, @@ -15,10 +16,9 @@ import { useParticipantTile } from '@livekit/components-react' import { Track } from 'livekit-client' +import type { Participant } from 'livekit-client' import Profile from 'decentraland-dapps/dist/containers/Profile' import type { Props } from './ParticipantTile.types' -import type { TrackReferenceOrPlaceholder } from '@livekit/components-core' -import type { Participant } from 'livekit-client' /** @public */ export function ParticipantContextIfNeeded( diff --git a/src/components/VideoConference/RightPanel/Chat/Chat.module.css b/src/components/VideoConference/RightPanel/Chat/Chat.module.css index 82d757a..4760d50 100644 --- a/src/components/VideoConference/RightPanel/Chat/Chat.module.css +++ b/src/components/VideoConference/RightPanel/Chat/Chat.module.css @@ -1,6 +1,57 @@ .container { + display: none; height: 100%; width: 100%; flex-direction: column; align-items: stretch; } + +.open { + display: flex; +} + +.headerContainer { + display: flex; + justify-content: space-between; + width: 100%; + margin-bottom: 16px; +} + +.close:global(.ui.button) { + padding: 0; + min-width: 24px; + width: 24px; + background: url('../../../../assets/icons/Close.svg'); + color: var(--toast-text); +} + +.close:global(.ui.button):hover { + transform: none; + box-shadow: none; +} + +.title:global(.ui.header) { + font-size: 24px; + margin-bottom: 0px; + font-size: 24px; + font-weight: 600; + line-height: 24px; + color: var(--toast-text); +} + +.chatMessages { + justify-content: flex-start; +} + +.form { + display: flex; +} + +.input { + width: 100%; + margin-bottom: 24px; +} + +.button { + height: 42px; +} diff --git a/src/components/VideoConference/RightPanel/Chat/Chat.tsx b/src/components/VideoConference/RightPanel/Chat/Chat.tsx index bb15f3d..b5f1c5e 100644 --- a/src/components/VideoConference/RightPanel/Chat/Chat.tsx +++ b/src/components/VideoConference/RightPanel/Chat/Chat.tsx @@ -1,32 +1,17 @@ -import * as React from 'react' -import type { ChatMessage, ReceivedChatMessage } from '@livekit/components-core' -import { MessageFormatter, useLocalParticipant, useMaybeLayoutContext, useRoomContext } from '@livekit/components-react' +import React, { useCallback, useEffect, useRef } from 'react' +import type { ChatMessage } from '@livekit/components-core' +import { useLocalParticipant } from '@livekit/components-react' +import classNames from 'classnames' +import { t } from 'decentraland-dapps/dist/modules/translation/utils' +import { Button, Header, Input } from 'decentraland-ui' +import SendIcon from '../../../../assets/icons/SendIcon' +import { useChat } from '../../../../hooks/useChat' +import { useLayoutContext } from '../../../../hooks/useLayoutContext' +import { cloneSingleChild } from '../../../../utils/chat' import ChatEntry from './ChatEntry' -import { cloneSingleChild, setupChat, useObservableState } from './utils' +import { Props } from './Chat.types' import styles from './Chat.module.css' -export type { ChatMessage, ReceivedChatMessage } - -export interface ChatProps extends React.HTMLAttributes { - messageFormatter?: MessageFormatter -} - -/** @public */ -export function useChat() { - const room = useRoomContext() - const [setup, setSetup] = React.useState>() - const isSending = useObservableState(setup?.isSendingObservable, false) - const chatMessages = useObservableState(setup?.messageObservable, []) - - React.useEffect(() => { - const setupChatReturn = setupChat(room) - setSetup(setupChatReturn) - return setupChatReturn.destroy - }, [room]) - - return { send: setup?.send, chatMessages, isSending } -} - /** * The Chat component adds a basis chat functionality to the LiveKit room. The messages are distributed to all participants * in the room. Only users who are in the room at the time of dispatch will receive the message. @@ -39,14 +24,13 @@ export function useChat() { * ``` * @public */ -export default function Chat({ messageFormatter, ...props }: ChatProps) { - const inputRef = React.useRef(null) - const ulRef = React.useRef(null) - +export default function Chat({ messageFormatter, isOpen, ...props }: Props) { const { send, chatMessages, isSending } = useChat() + const inputRef = useRef(null) + const ulRef = useRef(null) - const layoutContext = useMaybeLayoutContext() - const lastReadMsgAt = React.useRef(0) + const layoutContext = useLayoutContext() + const lastReadMsgAt = useRef(0) async function handleSubmit(event: React.FormEvent) { event.preventDefault() @@ -59,13 +43,13 @@ export default function Chat({ messageFormatter, ...props }: ChatProps) { } } - React.useEffect(() => { + useEffect(() => { if (ulRef) { ulRef.current?.scrollTo({ top: ulRef.current.scrollHeight }) } }, [ulRef, chatMessages]) - React.useEffect(() => { + useEffect(() => { if (!layoutContext || chatMessages.length === 0) { return } @@ -87,11 +71,24 @@ export default function Chat({ messageFormatter, ...props }: ChatProps) { } }, [chatMessages, layoutContext?.widget]) + const handleClosePanel = useCallback(() => { + const { dispatch } = layoutContext.widget + if (dispatch) { + dispatch({ msg: 'hide_chat' }) + } + }, [layoutContext]) + const localParticipant = useLocalParticipant().localParticipant return ( -
-