Baseline styling

Author: arnautov-anton

examples/vite/package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "human-id": "^4.1.3",
     "react": "link:../../node_modules/react",
     "react-dom": "link:../../node_modules/react-dom",
     "stream-chat-react": "link:../../"
@@ -26,7 +27,7 @@
     "eslint-plugin-react-refresh": "^0.4.6",
     "sass": "^1.75.0",
     "typescript": "^5.4.5",
-    "vite": "^7.2.2",
+    "vite": "^7.3.0",
     "vite-plugin-babel": "^1.3.2"
   }
 }

examples/vite/src/App.tsx

@@ -24,22 +24,15 @@ import {
 import { createTextComposerEmojiMiddleware, EmojiPicker } from 'stream-chat-react/emojis';
 import { init, SearchIndex } from 'emoji-mart';
 import data from '@emoji-mart/data';
+import { humanId } from 'human-id';
 
 init({ data });
 
-const params = new Proxy(new URLSearchParams(window.location.search), {
-  get: (searchParams, property) => searchParams.get(property as string),
-}) as unknown as Record<string, string | null>;
+const apiKey = import.meta.env.VITE_STREAM_API_KEY;
 
-const parseUserIdFromToken = (token: string) => {
-  const [, payload] = token.split('.');
-
-  if (!payload) throw new Error('Token is missing');
-
-  return JSON.parse(atob(payload))?.user_id;
-};
-
-const apiKey = params.key ?? (import.meta.env.VITE_STREAM_API_KEY as string);
+if (!apiKey) {
+  throw new Error('VITE_STREAM_API_KEY is not defined');
+}
 
 const options: ChannelOptions = { limit: 5, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
@@ -50,22 +43,24 @@ const isMessageAIGenerated = (message: LocalMessage) => !!message?.ai_generated;
 const useUser = () => {
   const userId = useMemo(() => {
     return (
-      new URLSearchParams(window.location.search).get('userId') ||
-      localStorage.getItem('userId') ||
-      `user-${crypto.randomUUID().slice(0, 8)}`
+      new URLSearchParams(window.location.search).get('user_id') ||
+      localStorage.getItem('user_id') ||
+      humanId({ separator: '_', capitalize: false })
     );
   }, []);
 
   useEffect(() => {
-    const storedUserId = localStorage.getItem('userId');
+    const storedUserId = localStorage.getItem('user_id');
 
     if (userId && storedUserId === userId) return;
 
-    localStorage.setItem('userId', userId);
+    localStorage.setItem('user_id', userId);
   }, [userId]);
 
   const tokenProvider = useCallback(() => {
-    return fetch(`https://pronto.getstream.io/api/auth/create-token?user_id=${userId}`)
+    return fetch(
+      `https://pronto.getstream.io/api/auth/create-token?environment=shared-chat-redesign&user_id=${userId}`,
+    )
       .then((response) => response.json())
       .then((data) => data.token as string);
   }, [userId]);

examples/vite/src/index.scss

@@ -19,21 +19,45 @@ body {
 }
 
 @layer stream-overrides {
-  .str-chat__channel-list {
+  .str-chat {
+    --max-content-width: 800px;
+  }
+
+  .str-chat__channel-list, .str-chat__thread-list-container {
     flex-basis: 350px;
-    flex-shrink: 1;
+    flex-shrink: 0;
   }
 
   .str-chat__channel {
-    flex-grow: 1;
+    width: 100%;
+  }
+
+  .str-chat__main-panel, .str-chat__thread-container {
+    align-items: center;
+  }
+  .str-chat__main-panel-inner {
+    width: 100%;
   }
 
   .str-chat__message-list-scroll {
-    max-width: 800px;
+    max-width: var(--max-content-width);
+    width: 100%;
+  }
+  
+  .str-chat__channel-header, .str-chat__thread-header {
+    max-width: var(--max-content-width);
     width: 100%;
   }
 
-  .str-chat__list {
+  .str-chat__message-input {
+    max-width: var(--max-content-width);
+    // scrollbar-gutter: stable;
+    // scrollbar-width: thin;
+    // overflow-y: hidden;
+    // flex-shrink: 0;
+  }
+
+  .str-chat__list, .str-chat__virtual-list {
     display: flex;
     justify-content: center;
     scrollbar-gutter: stable;

examples/vite/src/vite-env.d.ts

@@ -1 +1,7 @@
-/// <reference types="vite/client" />
+interface ImportMetaEnv {
+  readonly VITE_STREAM_API_KEY?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

examples/vite/vite.config.ts

@@ -1,4 +1,4 @@
-import { defineConfig, loadEnv, type PluginOption } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import babel from 'vite-plugin-babel';
 import react from '@vitejs/plugin-react';