Initial token

Author: arnautov-anton

.github/workflows/ci.yml

@@ -35,3 +35,39 @@ jobs:
 
       - name: 🧪 Validate CommonJS bundle with Node ${{ env.NODE_VERSION }}
         run: yarn validate-cjs
+
+  deploy-vite-example:
+    runs-on: ubuntu-latest
+    needs:
+      - tsc
+      - test
+    name: Deploy Vite Example to Vercel
+    env:
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: prj_2Rq8kuNd0BmqKd2NwvkDjX9Htnx5
+      VITE_STREAM_API_KEY: ${{ vars.VITE_EXAMPLE_STREAM_API_KEY }}
+      NODE_ENV: production
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: ./.github/actions/setup-node
+
+      - name: Build SDK
+        run: yarn build
+
+      - name: Vercel Pull/Build/Deploy (Preview)
+        working-directory: examples/vite
+
+        if: ${{ github.ref_name != 'master' }}
+        run: >
+          npx vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }} &&
+          npx vercel build &&
+          npx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+
+      - name: Vercel Pull/Build/Deploy (Production)
+        working-directory: examples/vite
+        if: ${{ github.ref_name == 'master' }}
+        run: >
+          npx vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} &&
+          npx vercel build --prod &&
+          npx vercel deploy --prod --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.releaserc.json

@@ -1,32 +1,9 @@
 {
   "branches": [
-    {
-      "name": "rc",
-      "channel": "rc",
-      "prerelease": "rc"
-    },
     {
       "name": "master",
-      "channel": "latest"
-    },
-    {
-      "name": "release-v12",
-      "channel": "latest"
-    },
-    {
-      "name": "release-v11",
-      "channel": "v11",
-      "range": "11.x"
-    },
-    {
-      "name": "release-v10",
-      "channel": "v10",
-      "range": "10.x"
-    },
-    {
-      "name": "release-v9",
-      "channel": "v9",
-      "range": "9.x"
+      "channel": "canary",
+      "prerelease": "canary"
     }
   ],
   "plugins": [

examples/vite/src/App.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import {
   ChannelFilters,
   ChannelOptions,
@@ -39,28 +39,58 @@ const parseUserIdFromToken = (token: string) => {
   return JSON.parse(atob(payload))?.user_id;
 };
 
-const apiKey = params.key ?? (import.meta.env.VITE_STREAM_KEY as string);
-const userToken = params.ut ?? (import.meta.env.VITE_USER_TOKEN as string);
-const userId = parseUserIdFromToken(userToken);
+const apiKey = params.key ?? (import.meta.env.VITE_STREAM_API_KEY as string);
 
-const filters: ChannelFilters = {
-  members: { $in: [userId] },
-  type: 'messaging',
-  archived: false,
-};
 const options: ChannelOptions = { limit: 5, presence: true, state: true };
 const sort: ChannelSort = { pinned_at: 1, last_message_at: -1, updated_at: -1 };
 
 // @ts-ignore
 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)}`
+    );
+  }, []);
+
+  useEffect(() => {
+    const storedUserId = localStorage.getItem('userId');
+
+    if (userId && storedUserId === userId) return;
+
+    localStorage.setItem('userId', userId);
+  }, [userId]);
+
+  const tokenProvider = useCallback(() => {
+    return fetch(`https://pronto.getstream.io/api/auth/create-token?user_id=${userId}`)
+      .then((response) => response.json())
+      .then((data) => data.token as string);
+  }, [userId]);
+
+  return { userId: userId, tokenProvider };
+};
+
 const App = () => {
+  const { userId, tokenProvider } = useUser();
+
   const chatClient = useCreateChatClient({
     apiKey,
-    tokenOrProvider: userToken,
+    tokenOrProvider: tokenProvider,
     userData: { id: userId },
   });
 
+  const filters: ChannelFilters = useMemo(
+    () => ({
+      members: { $in: [userId] },
+      type: 'messaging',
+      archived: false,
+    }),
+    [userId],
+  );
+
   useEffect(() => {
     if (!chatClient) return;
 
@@ -77,26 +107,6 @@ const App = () => {
 
   if (!chatClient) return <>Loading...</>;
 
-  chatClient.axiosInstance.interceptors.response.use(
-    (response) => {
-      // Simulate a 500 for specific routes
-      if (response.config.url?.includes('/delivered')) {
-        // throw a fake error like a real server would
-        const error = {
-          response: {
-            status: 500,
-            statusText: 'Internal Server Error',
-            data: { error: 'Simulated server error' },
-            config: response.config,
-          },
-        };
-        return Promise.reject(error);
-      }
-
-      return response;
-    },
-    (error) => Promise.reject(error),
-  );
   return (
     <Chat client={chatClient} isMessageAIGenerated={isMessageAIGenerated}>
       <ChatView>

examples/vite/src/index.scss

@@ -1,130 +1,42 @@
-body {
-  margin: 0;
+@layer stream, stream-overrides;
+
+@import url('stream-chat-react/dist/css/v2/index.css') layer(stream);
+
+:root {
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-html,
-body,
-#root {
-  margin: unset;
-  padding: unset;
-  height: 100%;
+body {
+  margin: 0;
 }
 
-@layer stream, emoji-replacement;
-
-@import url('stream-chat-react/css/v2/index.css') layer(stream);
-// use in combination with useImageFlagEmojisOnWindows prop on Chat component
-// @import url('stream-chat-react/css/v2/emoji-replacement.css') layer(emoji-replacement);
-
 #root {
   display: flex;
-  height: 100%;
-
-  & > div.str-chat {
-    height: 100%;
-    width: 100%;
-    display: flex;
-  }
+  height: 100vh;
+}
 
+@layer stream-overrides {
   .str-chat__channel-list {
-    position: fixed;
-    z-index: 1;
-    height: 100%;
-    width: 0;
-    flex-shrink: 0;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
-    max-width: 1000px;
-
-    &--open {
-      width: 30%;
-      position: fixed;
-    }
-    transition: width 0.3s ease-out;
+    flex-basis: 350px;
+    flex-shrink: 1;
   }
 
   .str-chat__channel {
-    flex: 1;
-    min-width: 0;
+    flex-grow: 1;
   }
 
-  .str-chat__main-panel {
-    min-width: 0;
-    flex: 1;
-
-    &--thread-open {
-      display: none;
-    }
-  }
-
-  .str-chat__thread {
-    flex: 1;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
+  .str-chat__message-list-scroll {
+    max-width: 800px;
+    width: 100%;
   }
 
-  .str-chat__channel-header .str-chat__header-hamburger {
-    width: 30px;
-    height: 38px;
-    padding: var(--xxs-p);
-    margin-right: var(--xs-m);
+  .str-chat__list {
     display: flex;
-    align-items: center;
     justify-content: center;
-    cursor: pointer;
-    border: none;
-    background: transparent;
-
-    &:hover {
-      svg path {
-        fill: var(--primary-color);
-      }
-    }
-  }
-
-  @media screen and (min-width: 768px) {
-    .str-chat__channel-list {
-      width: 30%;
-      position: initial;
-      z-index: 0;
-    }
-
-    .str-chat__chat-view__channels {
-      .str-chat__thread {
-        position: initial;
-        z-index: 0;
-      }
-    }
-
-    .str-chat__channel-header .str-chat__header-hamburger {
-      display: none;
-    }
-  }
-
-  @media screen and (min-width: 1024px) {
-    .str-chat__main-panel {
-      min-width: 0;
-
-      &--thread-open {
-        max-width: 55%;
-        display: flex;
-      }
-    }
-
-    .str-chat__chat-view__channels {
-      .str-chat__thread {
-        max-width: 45%;
-      }
-    }
-
-    .str-chat__channel-header .str-chat__header-hamburger {
-      display: none;
-    }
-  }
-
-  .str-chat__thread-list-container {
-    max-width: 350px;
+    scrollbar-gutter: stable;
+    scrollbar-width: thin;
   }
 }