Added a button to close the chat window

resolves issue livekit#665
govind-io · Dec 23, 2023 · f64ae53 · f64ae53
1 parent d3bb268
commit f64ae53
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 1 deletion.
diff --git a/packages/react/src/assets/icons/ChatCloseIcon.tsx b/packages/react/src/assets/icons/ChatCloseIcon.tsx
@@ -0,0 +1,28 @@
+/**
+ * WARNING: This file was auto-generated by svgr. Do not edit.
+ */
+import * as React from 'react';
+import type { SVGProps } from 'react';
+/**
+ * @internal
+ */
+const SvgChatCloseIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    x="0px"
+    y="0px"
+    width={16}
+    height={18}
+    viewBox="0 0 24 24"
+    fill=""
+    {...props}
+  >
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M 4.9902344 3.9902344 A 1.0001 1.0001 0 0 0 4.2929688 5.7070312 L 10.585938 12 L 4.2929688 18.292969 A 1.0001 1.0001 0 1 0 5.7070312 19.707031 L 12 13.414062 L 18.292969 19.707031 A 1.0001 1.0001 0 1 0 19.707031 18.292969 L 13.414062 12 L 19.707031 5.7070312 A 1.0001 1.0001 0 0 0 18.980469 3.9902344 A 1.0001 1.0001 0 0 0 18.292969 4.2929688 L 12 10.585938 L 5.7070312 4.2929688 A 1.0001 1.0001 0 0 0 4.9902344 3.9902344 z"
+    ></path>
+  </svg>
+);
+export default SvgChatCloseIcon;
diff --git a/packages/react/src/assets/icons/index.ts b/packages/react/src/assets/icons/index.ts
@@ -16,3 +16,4 @@ export { default as ScreenShareIcon } from './ScreenShareIcon';
 export { default as ScreenShareStopIcon } from './ScreenShareStopIcon';
 export { default as SpinnerIcon } from './SpinnerIcon';
 export { default as UnfocusToggleIcon } from './UnfocusToggleIcon';
+export { default as ChatCloseIcon } from './ChatCloseIcon';
diff --git a/packages/react/src/prefabs/Chat.tsx b/packages/react/src/prefabs/Chat.tsx
@@ -5,6 +5,8 @@ import { cloneSingleChild } from '../utils';
 import type { MessageFormatter } from '../components/ChatEntry';
 import { ChatEntry } from '../components/ChatEntry';
 import { useChat } from '../hooks/useChat';
+import { ChatToggle } from '../components';
+import { ChatCloseIcon } from '../assets/icons';
 
 /** @public */
 export interface ChatProps extends React.HTMLAttributes<HTMLDivElement>, ChatOptions {
@@ -85,6 +87,13 @@ export function Chat({
 
   return (
     <div {...props} className="lk-chat">
+      <div className="lk-chat-header">
+        <span>Messages</span>
+        <ChatToggle>
+          <ChatCloseIcon />
+        </ChatToggle>
+      </div>
+
       <ul className="lk-list lk-chat-messages" ref={ulRef}>
         {props.children
           ? chatMessages.map((msg, idx) =>

diff --git a/packages/styles/scss/prefabs/chat.scss b/packages/styles/scss/prefabs/chat.scss
@@ -1,12 +1,25 @@
 .chat {
   display: grid;
-  grid-template-rows: 1fr var(--control-bar-height);
+  grid-template-rows:var(--chat-header-height) 1fr var(--control-bar-height);
   width: clamp(200px, 55ch, 60ch);
   background-color: var(--bg2);
   border-left: 1px solid var(--border-color);
   align-items: end;
 }
 
+.chat-header {
+  height: var(--chat-header-height);
+  padding:0.75rem;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  span:first-of-type {
+      // Styles for the chat header text "Messages"
+      width: 100%;
+      text-align: center;
+    }
+}
+
 .chat-messages {
   display: flex;
   width: 100%;

diff --git a/packages/styles/scss/themes/default.scss b/packages/styles/scss/themes/default.scss
@@ -61,4 +61,5 @@ $accent: #1f8cf9;
 
   --grid-gap: 0.5rem;
   --control-bar-height: 69px;
+  --chat-header-height: 69px;
 }