run linter

CONTRIBUTING.md

@@ -1,21 +1,26 @@
 ## Testing Process
 
 ### Unit Testing
+
 We use Jest as our framework for unit tests. The jest tests files follow the pattern `**.test.ts(x)`. Execute the unit tests with the following command:
+
 ```
 npm run test
 ```
 
 ### Test Site
-To facilitate manual verification, a React test site has been setup in `/test-site`. There is an App component with `ChatPanel` and `ChatPopUp` components configured. 
+
+To facilitate manual verification, a React test site has been setup in `/test-site`. There is an App component with `ChatPanel` and `ChatPopUp` components configured.
 
 To set up the test site, make sure you have a `.env` file configured following the `.sample.env` file. Then, run the following commands:
+
 ```
 npm i
 npm run start
 ```
 
 ### Storybook
+
 chat-ui-react also support a component preview site, power by storybook framework. Each preview, or story, is defined under the `**.stories.tsx` files in the `/tests` folder.
 
 To view storybook site locally, run `npm run storybook`
@@ -25,14 +30,17 @@ Make sure to add stories when there's a new component or a feature update that i
 ## Build Process
 
 Before initiating the build, run the linting process to identify and address any errors or warnings. Use the following command:
+
 ```
 npm run lint
 ```
 
 To build the library, execute:
+
 ```
 npm run build
 ```
+
 This will create the bundle in the `/dist` directory. This command will also generate documentation files and the `THIRD-PARTY-NOTICES` file.
 
-For guidelines on pull request and version publish process, visit Chat SDK wiki page.
+For guidelines on pull request and version publish process, visit Chat SDK wiki page.

src/components/ChatPanel.tsx

@@ -45,7 +45,8 @@ const builtInCssClasses: ChatPanelCssClasses = withStylelessCssClasses(
   {
     container: "h-full w-full flex flex-col relative shadow-2xl bg-white",
     messagesScrollContainer: "flex flex-col mt-auto overflow-hidden",
-    messagesContainer: "flex flex-col gap-y-1 px-4 overflow-auto [&>*:first-child]:mt-3",
+    messagesContainer:
+      "flex flex-col gap-y-1 px-4 overflow-auto [&>*:first-child]:mt-3",
     inputContainer: "w-full p-4",
     messageBubbleCssClasses: {
       topContainer: "mt-1",

test-site/src/App.tsx

@@ -64,7 +64,10 @@ function ControlledPopup(props: ChatPopUpProps) {
 
   return (
     <div>
-      <button className="bg-emerald-300 rounded-sm p-2" onClick={() => setOpen(true)}>
+      <button
+        className="bg-emerald-300 rounded-sm p-2"
+        onClick={() => setOpen(true)}
+      >
         Open Chat
       </button>
       <ChatPopUp {...props} isOpen={open} onClose={() => setOpen(false)} />