add Chat .Header component (#1015)

* add chat header component

* update chat preview

* fix chat types

* fix lint and ts

* fix lint and ts

* fix lint and ts

* fix lint and ts

Author: abhinavrastogi-harness

apps/design-system/src/main.tsx

@@ -1,11 +1,13 @@
 import { StrictMode } from 'react'
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-render(
+const container = document.getElementById('root')
+const root = createRoot(container!)
+
+root.render(
   <StrictMode>
     <App />
-  </StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 )

apps/gitness/src/main.tsx

@@ -1,5 +1,8 @@
-import { render } from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-render(<App />, document.getElementById('root'))
+const container = document.getElementById('root')
+const root = createRoot(container!)
+
+root.render(<App />)

packages/ui/src/components/chat/chat-preview-wrapper.tsx

@@ -21,6 +21,7 @@ export const ChatPreviewWrapper: FC = () => {
   return (
     <div className="h-[calc(100vh-100px)] border-r border-borders-4">
       <Chat.Root>
+        <Chat.Header onClose={() => {}} />
         <Chat.Body>
           <Chat.Message>
             Hey Olivia! I&#39;ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix

packages/ui/src/components/chat/chat.tsx

@@ -4,30 +4,31 @@ import { Button, Icon, Input } from '@/components'
 import ChatAvatarIcon from '@/icons/chat-avatar.svg'
 import { cn } from '@utils/cn'
 
-const Root: FC = ({ children }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
+const Root: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
+  return <div className="flex size-full max-w-[460px] flex-col bg-background-1">{children}</div>
+}
+
+const Header: FC<{ onClose: () => void }> = ({ onClose }) => {
   return (
-    <div className="flex size-full max-w-[460px] flex-col bg-background-1">
-      <div className="sticky top-0 flex items-center justify-between bg-background-1 px-6 py-4">
-        <p className="text-16 font-medium text-foreground-1">AI Assistant</p>
-        <Button size="icon" variant="custom" className="-mr-2 text-icons-4 hover:text-icons-2">
-          <Icon name="close" size={16} />
-          <span className="sr-only">Close</span>
-        </Button>
-      </div>
-      {children}
+    <div className="sticky top-0 flex items-center justify-between bg-background-1 px-6 py-4">
+      <p className="text-16 font-medium text-foreground-1">AI Assistant</p>
+      <Button size="icon" variant="custom" className="-mr-2 text-icons-4 hover:text-icons-2" onClick={onClose}>
+        <Icon name="close" size={16} />
+        <span className="sr-only">Close</span>
+      </Button>
     </div>
   )
 }
 
-const Body: FC = ({ children }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
+const Body: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return (
     <div className="scrollbar-hidden flex flex-1 flex-col gap-y-7 overflow-y-auto overflow-x-hidden px-6 py-2">
       {children}
     </div>
   )
 }
 
-const Footer: FC = ({ children }: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {
+const Footer: FC<PropsWithChildren<HTMLAttributes<HTMLElement>>> = ({ children }) => {
   return <div className="sticky bottom-0 bg-background-1 px-6 py-3">{children}</div>
 }
 
@@ -64,7 +65,7 @@ const Message: FC<MessageProps> = ({ self, avatar, actions, children }) => {
   )
 }
 
-const CodeBlock: FC<{ className?: string }> = ({ children, className }) => {
+const CodeBlock: FC<PropsWithChildren<{ className?: string }>> = ({ children, className }) => {
   return (
     <code
       className={cn(
@@ -194,6 +195,7 @@ const InputField: FC<InputFieldProps> = ({
 export const Chat = {
   Root,
   Body,
+  Header,
   Footer,
   Message,
   Typing,

packages/ui/src/components/tabnav.tsx

@@ -1,6 +1,7 @@
+import { PropsWithChildren } from 'react'
 import { NavLink, NavLinkProps } from 'react-router-dom'
 
-const TabNavRoot: React.FC = ({ children }) => {
+const TabNavRoot: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <nav className="inline-flex h-[44px] w-full items-center justify-start gap-6 border-b border-border-background px-6 text-muted-foreground">
       {children}

packages/ui/src/views/repo/pull-request/components/in-view-diff-renderer.tsx

@@ -31,7 +31,7 @@ const InViewDiffRendererInternal: FC<InViewDiffRendererProps> = ({
     initialInView: false
   })
   const setContainerRef = useCallback(
-    node => {
+    (node: HTMLDivElement) => {
       containerRef.current = node
       ref(node)
     },

packages/yaml-editor-playground/src/index.tsx

@@ -1,11 +1,12 @@
-import React from 'react'
-import { render } from 'react-dom'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-render(
-  <React.StrictMode>
+const root = createRoot(document.getElementById('root')!)
+
+root.render(
+  <StrictMode>
     <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+  </StrictMode>
 )