Merge branch 'master' into update-style

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reachat",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Chat UI for Building LLMs",
   "scripts": {
     "build-storybook": "storybook build",
@@ -42,7 +42,6 @@
     "framer-motion": "^10.16.16",
     "mdast-util-find-and-replace": "^3.0.1",
     "reablocks": "^8.4.0",
-    "react-cool-dimensions": "^3.0.1",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "reakeys": "^2.0.3",

src/Chat.tsx

@@ -13,8 +13,8 @@ import { Session } from './types';
 import { ChatTheme, chatTheme } from './theme';
 import { ChatContext } from './ChatContext';
 import { PluggableList } from 'react-markdown/lib';
-import useDimensions from 'react-cool-dimensions';
 import { AnimatePresence } from 'framer-motion';
+import { useDimensions } from './utils/useDimensions';
 
 export interface ChatProps extends PropsWithChildren {
   /**

src/SessionsList/SessionGroups.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactNode, useContext, useMemo } from 'react';
-import { GroupedSessions, groupSessionsByDate } from '@/utils';
+import { GroupedSessions, groupSessionsByDate } from '@/utils/grouping';
 import { ChatContext } from '@/ChatContext';
 
 export interface SessionGroupsProps {

src/utils.spec.ts → src/utils/grouping.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { groupSessionsByDate } from './utils';
-import { Session } from './types';
+import { groupSessionsByDate } from './grouping';
+import { Session } from '@/types';
 import { subDays } from 'date-fns';
 
 describe('groupSessionsByDate', () => {

src/utils.ts → src/utils/grouping.ts

@@ -1,5 +1,5 @@
 import { format, isToday, isYesterday, isThisWeek, isThisMonth, isThisYear, parseISO } from 'date-fns';
-import { Session } from './types';
+import { Session } from '@/types';
 
 export interface GroupedSessions {
   heading: string;

src/utils/useDimensions.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export const useDimensions = () => {
+  const [ref, setRef] = useState<HTMLElement | null>(null);
+  const [width, setWidth] = useState<number | undefined>(undefined);
+
+  const observe = useCallback((element: HTMLElement | null) => {
+    if (element) setRef(element);
+  }, []);
+
+  useEffect(() => {
+    if (!ref) return;
+
+    const resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+
+    resizeObserver.observe(ref);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [ref]);
+
+  return { width, observe };
+};