Adjust some styles

FunkyOz · Dec 31, 2024 · ec14c05 · ec14c05
1 parent 98c9048
commit ec14c05
Show file tree

Hide file tree

Showing 9 changed files with 203 additions and 13 deletions.
diff --git a/apps/site/src/App.tsx b/apps/site/src/App.tsx
@@ -68,7 +68,7 @@ function App() {
     const [message, setMessage] = useState("");
 
     return (
-        <div className="h-screen w-screen flex flex-col bg-white overflow-hidden">
+        <div className="w-screen flex flex-col bg-white overflow-hidden">
             <Chat>
                 <Sidebar items={conversations}>
                     {(item: Conversation, key: number) => (

diff --git a/apps/site/src/dummy/data.ts b/apps/site/src/dummy/data.ts
@@ -846,6 +846,158 @@ function UserProfile({ userId }: { userId: number }) {
             },
         ],
     },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
+    {
+        conversationId: 10,
+        title: "React Security",
+        messages: [
+            {
+                messageId: 73,
+                content: "How can I secure my React application?",
+                role: "user",
+                createdAt: new Date("2024-01-24T19:00:00Z"),
+            },
+            {
+                messageId: 74,
+                content:
+                    "Security best practices:\n1. XSS prevention\n2. CSRF protection\n3. Content Security Policy\n4. Secure authentication\n5. Input validation",
+                role: "assistant",
+                createdAt: new Date("2024-01-24T19:01:00Z"),
+            },
+        ],
+    },
 ];
 
 export const activeConversationIndex = 10;
diff --git a/lib/components/chat/styles/chat.styles.ts b/lib/components/chat/styles/chat.styles.ts
@@ -24,7 +24,7 @@ export const ChatContainer = styled.div`
 `;
 
 export const ChatLayer = styled.div`
-    position: absolute;
+    position: fixed;
     top: 0;
     bottom: 0;
     right: 0;

diff --git a/lib/components/message/messages.tsx b/lib/components/message/messages.tsx
@@ -3,6 +3,7 @@ import { MessagesWrapper, MessagesHeader } from "./styles/messages.styles";
 import { MessagesProps } from "../../types";
 import useClassNames from "../../hooks/useClassNames";
 import { useChatProvider } from "../../provider";
+import { useMediaQuery } from "../../hooks/useMediaQuery";
 
 export function Messages<T>({
     items = [],
@@ -16,6 +17,7 @@ export function Messages<T>({
     const {
         state: { isSidebarOpen },
     } = useChatProvider();
+    const isMobile = useMediaQuery("(max-width: 768px)");
 
     const renderItems = () => {
         if (typeof children === "function") {
@@ -34,12 +36,13 @@ export function Messages<T>({
     return (
         <MessagesWrapper
             className={classes.base}
-            $isWithHeader={!headerContent}
+            $withHeader={Boolean(headerContent)}
         >
             {headerContent && (
                 <MessagesHeader
                     className={classes.header}
                     $isSidebarOpen={isSidebarOpen}
+                    $isMobile={isMobile}
                 >
                     {headerContent}
                 </MessagesHeader>

diff --git a/lib/components/message/styles/message-input.styles.ts b/lib/components/message/styles/message-input.styles.ts
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const MessageInputWrapper = styled.div`
-    position: sticky;
+    position: fixed;
     bottom: 0;
     left: 0;
     right: 0;

diff --git a/lib/components/message/styles/messages.styles.ts b/lib/components/message/styles/messages.styles.ts
@@ -86,22 +86,36 @@ export const LoadingCircle = styled.div`
     }
 `;
 
-export const MessagesWrapper = styled.div<{ $isWithHeader?: boolean }>`
+export const MessagesWrapper = styled.div<{ $withHeader?: boolean }>`
     display: flex;
     flex-direction: column;
     flex: 1;
     gap: 1rem;
     position: relative;
     width: 100%;
-    padding-top: ${({ $isWithHeader }) => ($isWithHeader ? "1rem" : "0")};
+    padding-top: ${({ $withHeader }) => ($withHeader ? "4rem" : "0")};
+    padding-bottom: 4rem;
 `;
 
-export const MessagesHeader = styled.div<{ $isSidebarOpen?: boolean }>`
+export const MessagesHeader = styled.div<{
+    $isSidebarOpen?: boolean;
+    $isMobile?: boolean;
+}>`
     display: flex;
     align-items: center;
-    padding: 1rem ${({ $isSidebarOpen }) => (!$isSidebarOpen ? "4rem" : "1rem")};
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: ${({ $isSidebarOpen, $isMobile }) => {
+        if (!$isSidebarOpen) {
+            return "4rem";
+        }
+        if (!$isMobile) {
+            return "18rem";
+        }
+        return "1rem";
+    }};
     min-height: 3.75rem;
-    position: sticky;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;

diff --git a/lib/components/sidebar/styles/sidebar.styles.ts b/lib/components/sidebar/styles/sidebar.styles.ts
@@ -1,9 +1,11 @@
 import styled from "styled-components";
 
 export const SidebarWrapper = styled.div`
-    position: relative;
+    position: fixed;
+    left: 0;
     height: 100%;
     background: transparent;
+    z-index: 30;
 `;
 
 export const SidebarContainer = styled.div<{
@@ -18,6 +20,7 @@ export const SidebarContainer = styled.div<{
     display: flex;
     flex-direction: column;
     height: 100%;
+    padding-top: 4rem;
     ${({ $isMobile }) =>
         $isMobile &&
         `
@@ -35,7 +38,6 @@ export const SidebarContent = styled.div<{ $size?: number }>`
     width: ${({ $size }) => `${$size}rem`};
     height: 100%;
     overflow-y: auto;
-    padding-top: 4rem;
 `;
 
 export const SidebarHeader = styled.div<{

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@funkyoz/react-chat",
-    "version": "1.0.8",
+    "version": "1.0.9",
     "type": "module",
     "main": "dist/main.js",
     "types": "dist/main.d.ts",

diff --git a/tests/components/message/messages.test.tsx b/tests/components/message/messages.test.tsx
@@ -1,8 +1,23 @@
 import React from "react";
 import { render, screen } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, afterEach } from "vitest";
 import { Messages } from "../../../lib/components/message/messages";
 
+// Mock matchMedia
+Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(), // Deprecated
+        removeListener: vi.fn(), // Deprecated
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});
+
 vi.mock("../../../lib/components/message/styles/messages.styles", () => ({
     MessagesWrapper: ({
         children,
@@ -34,6 +49,10 @@ vi.mock("../../../lib/provider", () => ({
 }));
 
 describe("Messages", () => {
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+
     it("should render children directly when children is not a function", () => {
         render(
             <Messages>