Add a button to close the chat window (#740)

Co-authored-by: lukasIO <[email protected]>
Co-authored-by: Govind Shamra <[email protected]>

.changeset/gentle-rats-greet.md

@@ -0,0 +1,5 @@
+---
+'@livekit/components-react': patch
+---
+
+Added close button in chat screen

README.md

@@ -135,3 +135,5 @@ The highest priority is currently to get the core and react packages to a stable
 </tbody>
 </table>
 <!--END_REPO_NAV-->
+
+

packages/react/etc/components-react.api.md

@@ -107,6 +107,11 @@ export const CarouselView: typeof CarouselLayout;
 // @public
 export function Chat({ messageFormatter, messageDecoder, messageEncoder, channelTopic, ...props }: ChatProps): React_2.JSX.Element;
 
+// Warning: (ae-internal-missing-underscore) The name "ChatCloseIcon" should be prefixed with an underscore because the declaration is marked as @internal
+//
+// @internal (undocumented)
+export const ChatCloseIcon: (props: SVGProps<SVGSVGElement>) => React_2.JSX.Element;
+
 // @public
 export function ChatEntry({ entry, hideName, hideTimestamp, messageFormatter, ...props }: ChatEntryProps): React_2.JSX.Element;
 

packages/react/src/assets/icons/ChatCloseIcon.tsx

@@ -0,0 +1,17 @@
+/**
+ * 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" width={16} height={16} viewBox="0 0 24 24" {...props}>
+    <path
+      fill="#FFF"
+      d="M4.99 3.99a1 1 0 0 0-.697 1.717L10.586 12l-6.293 6.293a1 1 0 1 0 1.414 1.414L12 13.414l6.293 6.293a1 1 0 1 0 1.414-1.414L13.414 12l6.293-6.293a1 1 0 0 0-.727-1.717 1 1 0 0 0-.687.303L12 10.586 5.707 4.293a1 1 0 0 0-.717-.303z"
+    />
+  </svg>
+);
+export default SvgChatCloseIcon;

packages/react/src/assets/icons/index.ts

@@ -1,5 +1,6 @@
 export { default as CameraDisabledIcon } from './CameraDisabledIcon';
 export { default as CameraIcon } from './CameraIcon';
+export { default as ChatCloseIcon } from './ChatCloseIcon';
 export { default as ChatIcon } from './ChatIcon';
 export { default as Chevron } from './Chevron';
 export { default as FocusToggleIcon } from './FocusToggleIcon';

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">
+        Messages
+        <ChatToggle className="lk-close-button">
+          <ChatCloseIcon />
+        </ChatToggle>
+      </div>
+
       <ul className="lk-list lk-chat-messages" ref={ulRef}>
         {props.children
           ? chatMessages.map((msg, idx) =>

packages/styles/scss/prefabs/chat.scss

@@ -1,12 +1,30 @@
 .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;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .close-button {
+    position: absolute;
+    right: 0;
+    transform: translateX(-50%);
+    background-color: transparent;
+    &:hover {
+      background-color:var(--lk-control-active-hover-bg);
+    }
+  }
+}
+
 .chat-messages {
   display: flex;
   width: 100%;
@@ -28,9 +46,11 @@
     white-space: nowrap;
     padding: 0 0.3rem;
     display: flex;
+
     .participant-name {
       margin-top: 1rem;
     }
+
     .timestamp {
       margin-left: auto;
       align-self: flex-end;
@@ -49,6 +69,7 @@
       background-color: var(--bg5);
     }
   }
+
   &[data-message-origin='remote'] {
     .message-body {
       background-color: var(--accent4);
@@ -85,4 +106,4 @@
     max-width: 100%;
     bottom: var(--control-bar-height);
   }
-}
+}

packages/styles/scss/themes/default.scss

@@ -61,4 +61,5 @@ $accent: #1f8cf9;
 
   --grid-gap: 0.5rem;
   --control-bar-height: 69px;
+  --chat-header-height: 69px;
 }