├── .eslintrc.json
├── app
    ├── favicon.ico
    ├── register
    │   └── page.tsx
    ├── api
    │   ├── token
    │   │   └── route.ts
    │   ├── users
    │   │   └── route.ts
    │   └── register-user
    │   │   └── route.ts
    ├── layout.tsx
    ├── globals.css
    └── page.tsx
├── postcss.config.js
├── model
    └── UserObject.ts
├── components
    ├── ChannelList
    │   ├── CategoryItem
    │   │   ├── CategoryItem.css
    │   │   └── CategoryItem.tsx
    │   ├── CustomChannelPreview.tsx
    │   ├── TopBar
    │   │   ├── ChannelListMenuRow.tsx
    │   │   ├── menuItems.tsx
    │   │   └── ChannelListTopBar.tsx
    │   ├── CustomChannelList.tsx
    │   ├── CreateChannelForm
    │   │   ├── UserRow.tsx
    │   │   └── CreateChannelForm.tsx
    │   ├── CallList
    │   │   └── CallList.tsx
    │   ├── BottomBar
    │   │   └── ChannelListBottomBar.tsx
    │   └── Icons.tsx
    ├── MessageList
    │   ├── CustomChannelHeader
    │   │   └── CustomChannelHeader.tsx
    │   ├── CustomReactions
    │   │   └── CustomReactionsSelector.tsx
    │   ├── MessageComposer
    │   │   ├── plusItems.tsx
    │   │   └── MessageComposer.tsx
    │   ├── CustomDateSeparator
    │   │   └── CustomDateSeparator.tsx
    │   └── CustomMessage
    │   │   ├── MessageOptions.tsx
    │   │   └── CustomMessage.tsx
    ├── MyCall
    │   ├── CallLayout.tsx
    │   └── MyCall.tsx
    ├── ServerList
    │   ├── UserCard.tsx
    │   ├── ServerList.tsx
    │   └── CreateServerForm.tsx
    └── MyChat.tsx
├── .gitignore
├── public
    ├── vercel.svg
    ├── discord.svg
    └── next.svg
├── tsconfig.json
├── tailwind.config.ts
├── assets
    ├── discord-black.svg
    └── discord-white.svg
├── next.config.js
├── package.json
├── hooks
    ├── useClient.ts
    └── useVideoClient.ts
├── middleware.ts
├── README.md
└── contexts
    └── DiscordContext.tsx


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/GetStream/discord-clone-nextjs/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/model/UserObject.ts:
--------------------------------------------------------------------------------
1 | export type UserObject = {
2 |   id: string;
3 |   name: string;
4 |   image?: string;
5 |   online?: boolean;
6 |   lastOnline?: string;
7 | };
8 | 


--------------------------------------------------------------------------------
/app/register/page.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | export default function Home() {
 4 |   useEffect(() => {}, []);
 5 | 
 6 |   return (
 7 |     <div>
 8 |       <h1>Register</h1>
 9 |     </div>
10 |   );
11 | }
12 | 


--------------------------------------------------------------------------------
/components/ChannelList/CategoryItem/CategoryItem.css:
--------------------------------------------------------------------------------
 1 | .create-button {
 2 |   position: relative;
 3 | }
 4 | 
 5 | .create-button:hover::before {
 6 |   @apply absolute p-2 bg-white shadow-md rounded-md text-sm font-medium text-gray-500 z-10 overflow-visible;
 7 |   content: 'Create Channel';
 8 |   top: -44px;
 9 |   left: -100px;
10 |   width: 120px;
11 | }
12 | 


--------------------------------------------------------------------------------
/components/MessageList/CustomChannelHeader/CustomChannelHeader.tsx:
--------------------------------------------------------------------------------
 1 | import { useChannelStateContext } from 'stream-chat-react';
 2 | 
 3 | export default function CustomChannelHeader(): JSX.Element {
 4 |   const { channel } = useChannelStateContext();
 5 |   const { name } = channel?.data || {};
 6 |   return (
 7 |     <div className='flex items-center space-x-3 p-3 border-b-2 border-b-gray-200'>
 8 |       <span className='text-3xl text-gray-500'>#</span>
 9 |       <span className='font-bold lowercase'>{name}</span>
10 |     </div>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/components/MessageList/CustomReactions/CustomReactionsSelector.tsx:
--------------------------------------------------------------------------------
 1 | export const customReactionOptions = [
 2 |   {
 3 |     type: 'runner',
 4 |     Component: () => <>🏃🏼</>,
 5 |     name: 'Runner',
 6 |   },
 7 |   {
 8 |     type: 'sun',
 9 |     Component: () => <>🌞</>,
10 |     name: 'Sun',
11 |   },
12 |   {
13 |     type: 'star',
14 |     Component: () => <>🤩</>,
15 |     name: 'Star',
16 |   },
17 |   {
18 |     type: 'confetti',
19 |     Component: () => <>🎉</>,
20 |     name: 'Confetti',
21 |   },
22 |   {
23 |     type: 'howdy',
24 |     Component: () => <>🤠</>,
25 |     name: 'Howdy',
26 |   },
27 | ];
28 | 


--------------------------------------------------------------------------------
/components/MessageList/MessageComposer/plusItems.tsx:
--------------------------------------------------------------------------------
 1 | import { Apps, FolderPlus, Thread } from '@/components/ChannelList/Icons';
 2 | import { ListRowElement } from '@/components/ChannelList/TopBar/menuItems';
 3 | 
 4 | export const plusItems: ListRowElement[] = [
 5 |   {
 6 |     name: 'Upload a File',
 7 |     icon: <FolderPlus />,
 8 |     bottomBorder: false,
 9 |     reverseOrder: true,
10 |   },
11 |   {
12 |     name: 'Create Thread',
13 |     icon: <Thread />,
14 |     bottomBorder: false,
15 |     reverseOrder: true,
16 |   },
17 |   { name: 'Use Apps', icon: <Apps />, bottomBorder: false, reverseOrder: true },
18 | ];
19 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/app/api/token/route.ts:
--------------------------------------------------------------------------------
 1 | import { StreamChat } from 'stream-chat';
 2 | 
 3 | export async function POST(request: Request) {
 4 |   const serverClient = StreamChat.getInstance(
 5 |     '7cu55d72xtjs',
 6 |     process.env.STREAM_CHAT_SECRET
 7 |   );
 8 |   const body = await request.json();
 9 |   console.log('[/api/token] Body:', body);
10 | 
11 |   const userId = body?.userId;
12 | 
13 |   if (!userId) {
14 |     return Response.error();
15 |   }
16 | 
17 |   const token = serverClient.createToken(userId);
18 | 
19 |   const response = {
20 |     userId: userId,
21 |     token: token,
22 |   };
23 | 
24 |   return Response.json(response);
25 | }
26 | 


--------------------------------------------------------------------------------
/components/MessageList/CustomDateSeparator/CustomDateSeparator.tsx:
--------------------------------------------------------------------------------
 1 | import { DateSeparatorProps } from 'stream-chat-react';
 2 | 
 3 | export default function CustomDateSeparator(
 4 |   props: DateSeparatorProps
 5 | ): JSX.Element {
 6 |   const { date } = props;
 7 | 
 8 |   function formatDate(date: Date): string {
 9 |     return `${date.toLocaleDateString('en-US', { dateStyle: 'long' })}`;
10 |   }
11 | 
12 |   return (
13 |     <div className='border-b-2 relative flex items-center justify-center my-6'>
14 |       <span className='absolute left-auto right-auto text-xs font-semibold text-gray-500 bg-white px-2'>
15 |         {formatDate(date)}
16 |       </span>
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from 'tailwindcss';
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 7 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         discord: '#7289da',
13 |         'dark-discord': '#4752c4',
14 |         'dark-gray': '#dfe1e4',
15 |         'medium-gray': '#f0f1f3',
16 |         'light-gray': '#e8eaec',
17 |         'hover-gray': '#cdcfd3',
18 |         'composer-gray': 'hsl(210 calc( 1 * 11.1%) 92.9% / 1);',
19 |         'gray-normal': '#313338',
20 |       },
21 |     },
22 |   },
23 |   plugins: [],
24 | };
25 | export default config;
26 | 


--------------------------------------------------------------------------------
/app/api/users/route.ts:
--------------------------------------------------------------------------------
 1 | import { UserObject } from '@/model/UserObject';
 2 | import { StreamChat } from 'stream-chat';
 3 | 
 4 | export async function GET() {
 5 |   const serverClient = StreamChat.getInstance(
 6 |     '7cu55d72xtjs',
 7 |     process.env.STREAM_CHAT_SECRET
 8 |   );
 9 |   const response = await serverClient.queryUsers({});
10 |   const data: UserObject[] = response.users
11 |     .filter((user) => user.role !== 'admin')
12 |     .map((user) => {
13 |       return {
14 |         id: user.id,
15 |         name: user.name ?? user.id,
16 |         image: user.image as string,
17 |         online: user.online,
18 |         lastOnline: user.last_active,
19 |       };
20 |     });
21 | 
22 |   return Response.json({ data });
23 | }
24 | 


--------------------------------------------------------------------------------
/assets/discord-black.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>


--------------------------------------------------------------------------------
/public/discord.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#5865f2" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>


--------------------------------------------------------------------------------
/assets/discord-white.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><path fill="#fff" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></svg>


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from 'next';
 2 | import { Inter } from 'next/font/google';
 3 | import './globals.css';
 4 | import { DiscordContextProvider } from '@/contexts/DiscordContext';
 5 | import { ClerkProvider } from '@clerk/nextjs';
 6 | 
 7 | const inter = Inter({ subsets: ['latin'] });
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: 'Discord Clone',
11 |   description: 'Powered by Stream Chat',
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: {
17 |   children: React.ReactNode;
18 | }) {
19 |   return (
20 |     <ClerkProvider>
21 |       <html lang='en'>
22 |         <DiscordContextProvider>
23 |           <body className={inter.className}>{children}</body>
24 |         </DiscordContextProvider>
25 |       </html>
26 |     </ClerkProvider>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   images: {
 4 |     remotePatterns: [
 5 |       {
 6 |         protocol: 'https',
 7 |         hostname: 'source.unsplash.com',
 8 |       },
 9 |       {
10 |         protocol: 'https',
11 |         hostname: 'images.unsplash.com',
12 |       },
13 |       {
14 |         protocol: 'https',
15 |         hostname: 'getstream.io',
16 |       },
17 |       {
18 |         protocol: 'https',
19 |         hostname: 'thispersondoesnotexist.com',
20 |       },
21 |       {
22 |         protocol: 'https',
23 |         hostname: 'cdn.discordapp.com',
24 |       },
25 |       {
26 |         protocol: 'https',
27 |         hostname: 'static.wikia.nocookie.net',
28 |       },
29 |       {
30 |         protocol: 'https',
31 |         hostname: 'starwars.fandom.com',
32 |       },
33 |     ],
34 |   },
35 | };
36 | 
37 | module.exports = nextConfig;
38 | 


--------------------------------------------------------------------------------
/components/ChannelList/CustomChannelPreview.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ChannelPreviewUIComponentProps,
 3 |   useChatContext,
 4 | } from 'stream-chat-react';
 5 | 
 6 | const CustomChannelPreview = (props: ChannelPreviewUIComponentProps) => {
 7 |   const { channel } = props;
 8 |   const { setActiveChannel } = useChatContext();
 9 |   return (
10 |     <div
11 |       className={`flex items-center mx-2 ${
12 |         props.channel.countUnread() > 0 ? 'channel-container' : ''
13 |       }`}
14 |     >
15 |       <button
16 |         className='w-full flex items-center px-2 hover:bg-gray-200 rounded-md'
17 |         onClick={() => setActiveChannel(channel)}
18 |       >
19 |         <span className='italic text-xl mr-2 text-gray-500'>#</span>
20 |         <span className='text-sm'>
21 |           {channel.data?.name || 'Channel Preview'}
22 |         </span>
23 |       </button>
24 |     </div>
25 |   );
26 | };
27 | 
28 | export default CustomChannelPreview;
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "discord-clone",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@clerk/backend": "^0.38.3",
13 |     "@clerk/nextjs": "^4.29.9",
14 |     "@stream-io/video-react-sdk": "^0.5.5",
15 |     "@types/uuid": "^9.0.8",
16 |     "next": "14.0.3",
17 |     "react": "^18.2.0",
18 |     "react-dom": "^18.2.0",
19 |     "stream-chat": "^8.19.1",
20 |     "stream-chat-react": "^11.11.0",
21 |     "uuid": "^9.0.1"
22 |   },
23 |   "devDependencies": {
24 |     "@types/node": "^20.11.24",
25 |     "@types/react": "^18.2.63",
26 |     "@types/react-dom": "^18.2.19",
27 |     "autoprefixer": "^10.4.18",
28 |     "eslint": "^8.57.0",
29 |     "eslint-config-next": "14.0.3",
30 |     "postcss": "^8.4.35",
31 |     "tailwindcss": "^3.4.1",
32 |     "typescript": "^5.3.3"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/components/ChannelList/TopBar/ChannelListMenuRow.tsx:
--------------------------------------------------------------------------------
 1 | import { ListRowElement } from './menuItems';
 2 | 
 3 | export default function ChannelListMenuRow({
 4 |   name,
 5 |   icon,
 6 |   bottomBorder = true,
 7 |   purple = false,
 8 |   red = false,
 9 |   reverseOrder = false,
10 | }: ListRowElement): JSX.Element {
11 |   return (
12 |     <>
13 |       <p
14 |         className={`flex ${
15 |           reverseOrder ? 'flex-row-reverse' : ''
16 |         } justify-between items-center p-2 cursor-pointer text-gray-500 ${
17 |           purple ? 'text-dark-discord' : ''
18 |         } ${red ? 'text-red-500' : ''} rounded-md hover:bg-dark-discord ${
19 |           red ? 'hover:bg-red-500' : ''
20 |         } hover:text-white transition-colors ease-in-out duration-200`}
21 |       >
22 |         <span className='text-sm font-medium'>{name}</span>
23 |         {icon}
24 |       </p>
25 |       {bottomBorder && <div className='my-1 mx-2 h-px bg-gray-300' />}
26 |     </>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/components/MyCall/CallLayout.tsx:
--------------------------------------------------------------------------------
 1 | import { useDiscordContext } from '@/contexts/DiscordContext';
 2 | import { CallingState } from '@stream-io/video-client';
 3 | import {
 4 |   useCallStateHooks,
 5 |   StreamTheme,
 6 |   SpeakerLayout,
 7 |   CallControls,
 8 | } from '@stream-io/video-react-sdk';
 9 | import '@stream-io/video-react-sdk/dist/css/styles.css';
10 | 
11 | export default function CallLayout(): JSX.Element {
12 |   const { setCall } = useDiscordContext();
13 |   const { useCallCallingState, useParticipantCount } = useCallStateHooks();
14 |   const participantCount = useParticipantCount();
15 |   const callingState = useCallCallingState();
16 | 
17 |   if (callingState !== CallingState.JOINED) {
18 |     return <div>Loading...</div>;
19 |   }
20 | 
21 |   return (
22 |     <StreamTheme>
23 |       <h2>Participants: {participantCount}</h2>
24 |       <SpeakerLayout participantsBarPosition='bottom' />
25 |       <CallControls
26 |         onLeave={() => {
27 |           setCall(undefined);
28 |         }}
29 |       />
30 |     </StreamTheme>
31 |   );
32 | }
33 | 


--------------------------------------------------------------------------------
/components/MessageList/CustomMessage/MessageOptions.tsx:
--------------------------------------------------------------------------------
 1 | import { ArrowUturnLeft, Emoji, Thread } from '@/components/ChannelList/Icons';
 2 | import { Dispatch, SetStateAction } from 'react';
 3 | 
 4 | export default function MessageOptions({
 5 |   showEmojiReactions,
 6 | }: {
 7 |   showEmojiReactions: Dispatch<SetStateAction<boolean>>;
 8 | }): JSX.Element {
 9 |   return (
10 |     <div className='absolute flex items-center -top-4 right-2 rounded-md bg-gray-50 border-2 border-gray-200'>
11 |       <button
12 |         className='p-1 transition-colors duration-200 ease-in-out hover:bg-gray-200'
13 |         onClick={() => showEmojiReactions((currentValue) => !currentValue)}
14 |       >
15 |         <Emoji className='w-6 h-6' />
16 |       </button>
17 |       <button className='p-1 transition-colors duration-200 ease-in-out hover:bg-gray-200'>
18 |         <ArrowUturnLeft className='w-6 h-6' />
19 |       </button>
20 |       <button className='p-1 transition-colors duration-200 ease-in-out hover:bg-gray-200'>
21 |         <Thread className='w-6 h-6' />
22 |       </button>
23 |     </div>
24 |   );
25 | }
26 | 


--------------------------------------------------------------------------------
/app/api/register-user/route.ts:
--------------------------------------------------------------------------------
 1 | import { clerkClient } from '@clerk/nextjs';
 2 | import { StreamChat } from 'stream-chat';
 3 | 
 4 | export async function POST(request: Request) {
 5 |   const serverClient = StreamChat.getInstance(
 6 |     '7cu55d72xtjs',
 7 |     process.env.STREAM_CHAT_SECRET
 8 |   );
 9 |   const body = await request.json();
10 |   console.log('[/api/register-user] Body:', body);
11 | 
12 |   const userId = body?.userId;
13 |   const mail = body?.email;
14 | 
15 |   if (!userId || !mail) {
16 |     return Response.error();
17 |   }
18 | 
19 |   const user = await serverClient.upsertUser({
20 |     id: userId,
21 |     role: 'user',
22 |     name: mail,
23 |     imageUrl: `https://getstream.io/random_png/?id=${userId}&name=${mail}`,
24 |   });
25 | 
26 |   const params = {
27 |     publicMetadata: {
28 |       streamRegistered: true,
29 |     },
30 |   };
31 |   const updatedUser = await clerkClient.users.updateUser(userId, params);
32 | 
33 |   console.log('[/api/register-user] User:', updatedUser);
34 |   const response = {
35 |     userId: userId,
36 |     userName: mail,
37 |   };
38 | 
39 |   return Response.json(response);
40 | }
41 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/components/ChannelList/CustomChannelList.tsx:
--------------------------------------------------------------------------------
 1 | import { ChannelListMessengerProps } from 'stream-chat-react';
 2 | 
 3 | import { useDiscordContext } from '@/contexts/DiscordContext';
 4 | import CreateChannelForm from './CreateChannelForm/CreateChannelForm';
 5 | import UserBar from './BottomBar/ChannelListBottomBar';
 6 | import ChannelListTopBar from './TopBar/ChannelListTopBar';
 7 | import CategoryItem from './CategoryItem/CategoryItem';
 8 | import CallList from './CallList/CallList';
 9 | 
10 | const CustomChannelList: React.FC<ChannelListMessengerProps> = () => {
11 |   const { server, channelsByCategories } = useDiscordContext();
12 | 
13 |   return (
14 |     <div className='w-72 bg-medium-gray h-full flex flex-col items-start'>
15 |       <ChannelListTopBar serverName={server?.name || 'Direct Messages'} />
16 | 
17 |       <div className='w-full'>
18 |         {Array.from(channelsByCategories.keys()).map((category, index) => (
19 |           <CategoryItem
20 |             key={`${category}-${index}`}
21 |             category={category}
22 |             serverName={server?.name || 'Direct Messages'}
23 |             channels={channelsByCategories.get(category) || []}
24 |           />
25 |         ))}
26 |       </div>
27 |       <CallList />
28 |       <CreateChannelForm />
29 |       <UserBar />
30 |     </div>
31 |   );
32 | };
33 | 
34 | export default CustomChannelList;
35 | 


--------------------------------------------------------------------------------
/components/ChannelList/TopBar/menuItems.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Bell,
 3 |   Boost,
 4 |   FaceSmile,
 5 |   FolderPlus,
 6 |   Gear,
 7 |   LeaveServer,
 8 |   Pen,
 9 |   PersonAdd,
10 |   PlusCircle,
11 |   Shield,
12 |   SpeakerMuted,
13 | } from '../Icons';
14 | 
15 | export type ListRowElement = {
16 |   name: string;
17 |   icon: JSX.Element;
18 |   bottomBorder?: boolean;
19 |   purple?: boolean;
20 |   red?: boolean;
21 |   reverseOrder?: boolean;
22 | };
23 | 
24 | export const menuItems: ListRowElement[] = [
25 |   { name: 'Server Boost', icon: <Boost />, bottomBorder: true },
26 |   {
27 |     name: 'Invite People',
28 |     icon: <PersonAdd />,
29 |     bottomBorder: false,
30 |     purple: true,
31 |   },
32 |   { name: 'Server Settings', icon: <Gear />, bottomBorder: false },
33 |   { name: 'Create Channel', icon: <PlusCircle />, bottomBorder: false },
34 |   { name: 'Create Category', icon: <FolderPlus />, bottomBorder: false },
35 |   { name: 'App Directory', icon: <FaceSmile />, bottomBorder: true },
36 |   { name: 'Notification Settings', icon: <Bell />, bottomBorder: false },
37 |   { name: 'Privacy Settings', icon: <Shield />, bottomBorder: true },
38 |   { name: 'Edit Server Profile', icon: <Pen />, bottomBorder: false },
39 |   { name: 'Hide Muted Channels', icon: <SpeakerMuted />, bottomBorder: true },
40 |   {
41 |     name: 'Leave Server',
42 |     icon: <LeaveServer />,
43 |     bottomBorder: false,
44 |     red: true,
45 |   },
46 | ];
47 | 


--------------------------------------------------------------------------------
/hooks/useClient.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | import { StreamChat, TokenOrProvider, User } from 'stream-chat';
 3 | 
 4 | export type UseClientOptions = {
 5 |   apiKey: string;
 6 |   user: User;
 7 |   tokenOrProvider: TokenOrProvider;
 8 | };
 9 | 
10 | export const useClient = ({
11 |   apiKey,
12 |   user,
13 |   tokenOrProvider,
14 | }: UseClientOptions): StreamChat | undefined => {
15 |   const [chatClient, setChatClient] = useState<StreamChat>();
16 | 
17 |   useEffect(() => {
18 |     const client = new StreamChat(apiKey);
19 |     // prevents application from setting stale client (user changed, for example)
20 |     let didUserConnectInterrupt = false;
21 | 
22 |     const connectionPromise = client
23 |       .connectUser(user, tokenOrProvider)
24 |       .then(() => {
25 |         if (!didUserConnectInterrupt) {
26 |           setChatClient(client);
27 |         }
28 |       });
29 | 
30 |     return () => {
31 |       didUserConnectInterrupt = true;
32 |       setChatClient(undefined);
33 |       // wait for connection to finish before initiating closing sequence
34 |       connectionPromise
35 |         .then(() => client.disconnectUser())
36 |         .then(() => {
37 |           console.log('connection closed');
38 |         });
39 |     };
40 |     // eslint-disable-next-line react-hooks/exhaustive-deps -- should re-run only if user.id changes
41 |   }, [apiKey, user.id, tokenOrProvider]);
42 | 
43 |   return chatClient;
44 | };
45 | 


--------------------------------------------------------------------------------
/components/ChannelList/CreateChannelForm/UserRow.tsx:
--------------------------------------------------------------------------------
 1 | import { UserObject } from '@/model/UserObject';
 2 | import Image from 'next/image';
 3 | import { PersonIcon } from '../Icons';
 4 | 
 5 | export default function UserRow({
 6 |   user,
 7 |   userChanged,
 8 | }: {
 9 |   user: UserObject;
10 |   userChanged: (user: UserObject, checked: boolean) => void;
11 | }): JSX.Element {
12 |   return (
13 |     <div className='flex items-center justify-start w-full space-x-4 my-2'>
14 |       <input
15 |         id={user.id}
16 |         type='checkbox'
17 |         name={user.id}
18 |         className='w-4 h-4 mb-0'
19 |         onChange={(event) => {
20 |           userChanged(user, event.target.checked);
21 |         }}
22 |       ></input>
23 |       <label className='w-full flex items-center space-x-6' htmlFor='users'>
24 |         {user.image && (
25 |           <Image
26 |             src={user.image}
27 |             width={40}
28 |             height={40}
29 |             alt={user.name}
30 |             className='w-8 h-8 rounded-full'
31 |           />
32 |         )}
33 |         {!user.image && <PersonIcon />}
34 |         <p>
35 |           <span className='block text-gray-600'>{user.name}</span>
36 |           {user.lastOnline && (
37 |             <span className='text-sm text-gray-400'>
38 |               Last online: {user.lastOnline.split('T')[0]}
39 |             </span>
40 |           )}
41 |         </p>
42 |       </label>
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/hooks/useVideoClient.ts:
--------------------------------------------------------------------------------
 1 | import { StreamVideoClient } from '@stream-io/video-client';
 2 | import { useEffect, useState } from 'react';
 3 | import { UseClientOptions } from './useClient';
 4 | 
 5 | export const useVideoClient = ({
 6 |   apiKey,
 7 |   user,
 8 |   tokenOrProvider,
 9 | }: UseClientOptions): StreamVideoClient | undefined => {
10 |   const [videoClient, setVideoClient] = useState<StreamVideoClient>();
11 | 
12 |   useEffect(() => {
13 |     const streamVideoClient = new StreamVideoClient({ apiKey });
14 |     // prevents application from setting stale client (user changed, for example)
15 |     let didUserConnectInterrupt = false;
16 | 
17 |     const videoConnectionPromise = streamVideoClient
18 |       .connectUser(user, tokenOrProvider)
19 |       .then(() => {
20 |         if (!didUserConnectInterrupt) {
21 |           setVideoClient(streamVideoClient);
22 |         }
23 |       });
24 | 
25 |     return () => {
26 |       didUserConnectInterrupt = true;
27 |       setVideoClient(undefined);
28 |       // wait for connection to finish before initiating closing sequence
29 |       videoConnectionPromise
30 |         .then(() => streamVideoClient.disconnectUser())
31 |         .then(() => {
32 |           console.log('video connection closed');
33 |         });
34 |     };
35 |     // eslint-disable-next-line react-hooks/exhaustive-deps -- should re-run only if user.id changes
36 |   }, [apiKey, user.id, tokenOrProvider]);
37 | 
38 |   return videoClient;
39 | };
40 | 


--------------------------------------------------------------------------------
/components/MyCall/MyCall.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Call,
 3 |   StreamCall,
 4 |   useStreamVideoClient,
 5 | } from '@stream-io/video-react-sdk';
 6 | import { useCallback, useEffect, useState } from 'react';
 7 | import CallLayout from './CallLayout';
 8 | 
 9 | export default function MyCall({ callId }: { callId: string }): JSX.Element {
10 |   const [call, setCall] = useState<Call | undefined>(undefined);
11 |   const client = useStreamVideoClient();
12 | 
13 |   const [joining, setJoining] = useState(false);
14 | 
15 |   const createCall = useCallback(async () => {
16 |     const callToCreate = client?.call('default', callId);
17 |     await callToCreate?.camera.disable();
18 |     await callToCreate?.join({ create: true });
19 |     setCall(callToCreate);
20 |     setJoining(false);
21 |   }, [client, callId]);
22 | 
23 |   useEffect(() => {
24 |     if (!client) {
25 |       console.error('No client in MyCall component');
26 |       return;
27 |     }
28 | 
29 |     if (!call) {
30 |       if (joining) {
31 |         createCall();
32 |       } else {
33 |         setJoining(true);
34 |       }
35 |     }
36 |   }, [call, client, createCall, joining]);
37 | 
38 |   if (!call) {
39 |     return (
40 |       <div className='w-full h-full text-xl font-semibold flex items-center justify-center animate-pulse'>
41 |         Joining call ...
42 |       </div>
43 |     );
44 |   }
45 | 
46 |   return (
47 |     <StreamCall call={call}>
48 |       <CallLayout />
49 |     </StreamCall>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/components/ServerList/UserCard.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import { UserObject } from '@/model/UserObject';
 3 | 
 4 | const UserCard = ({ user }: { user: UserObject }) => {
 5 |   return (
 6 |     <label className='w-full flex items-center space-x-6' htmlFor='users'>
 7 |       {user.image && (
 8 |         <Image
 9 |           src={user.image}
10 |           width={40}
11 |           height={40}
12 |           alt={user.name}
13 |           className='w-8 h-8 rounded-full'
14 |         />
15 |       )}
16 |       {!user.image && (
17 |         <svg
18 |           xmlns='http://www.w3.org/2000/svg'
19 |           fill='none'
20 |           viewBox='0 0 24 24'
21 |           strokeWidth={1.5}
22 |           stroke='currentColor'
23 |           className='w-8 h-8'
24 |         >
25 |           <path
26 |             strokeLinecap='round'
27 |             strokeLinejoin='round'
28 |             d='M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z'
29 |           />
30 |         </svg>
31 |       )}
32 |       <p>
33 |         <span className='block text-gray-600'>{user.name}</span>
34 |         {user.lastOnline && (
35 |           <span className='text-sm text-gray-400'>
36 |             Last online: {user.lastOnline.split('T')[0]}
37 |           </span>
38 |         )}
39 |       </p>
40 |     </label>
41 |   );
42 | };
43 | 
44 | export default UserCard;
45 | 


--------------------------------------------------------------------------------
/components/ChannelList/TopBar/ChannelListTopBar.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import { ChevronDown, CloseIcon } from '../Icons';
 3 | import ChannelListMenuRow from './ChannelListMenuRow';
 4 | import { menuItems } from './menuItems';
 5 | 
 6 | export default function ChannelListTopBar({
 7 |   serverName,
 8 | }: {
 9 |   serverName: string;
10 | }): JSX.Element {
11 |   const [menuOpen, setMenuOpen] = useState(false);
12 | 
13 |   return (
14 |     <div className='w-full relative'>
15 |       <button
16 |         className={`flex w-full items-center justify-between p-4 border-b-2 ${
17 |           menuOpen ? 'bg-gray-300' : ''
18 |         } border-gray-300 hover:bg-gray-300`}
19 |         onClick={() => setMenuOpen((currentValue) => !currentValue)}
20 |       >
21 |         <h2 className='text-lg font-bold text-gray-700'>{serverName}</h2>
22 |         {menuOpen && <CloseIcon />}
23 |         {!menuOpen && <ChevronDown />}
24 |       </button>
25 | 
26 |       {menuOpen && (
27 |         <div className='absolute w-full p-2 z-10'>
28 |           <div className='w-full bg-white p-2 shadow-lg rounded-md'>
29 |             {menuItems.map((option) => (
30 |               <button
31 |                 key={option.name}
32 |                 className='w-full'
33 |                 onClick={() => setMenuOpen(false)}
34 |               >
35 |                 <ChannelListMenuRow {...option} />
36 |               </button>
37 |             ))}
38 |           </div>
39 |         </div>
40 |       )}
41 |     </div>
42 |   );
43 | }
44 | 


--------------------------------------------------------------------------------
/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { authMiddleware, clerkClient, redirectToSignIn } from '@clerk/nextjs';
 2 | import { redirect } from 'next/navigation';
 3 | import { NextResponse } from 'next/server';
 4 | 
 5 | // See https://clerk.com/docs/references/nextjs/auth-middleware
 6 | // for more information about configuring your Middleware
 7 | 
 8 | export default authMiddleware({
 9 |   // Allow signed out users to access the specified routes:
10 |   // publicRoutes: ['/anyone-can-visit-this-route'],
11 |   // Prevent the specified routes from accessing
12 |   // authentication information:
13 |   // ignoredRoutes: ['/no-auth-in-this-route'],
14 | 
15 |   async afterAuth(auth, request) {
16 |     // if users are not authenticated
17 |     if (!auth.userId && !auth.isPublicRoute) {
18 |       return redirectToSignIn({ returnBackUrl: request.url });
19 |     }
20 | 
21 |     // If user has signed up, register on Stream backend
22 |     if (auth.userId && !auth.user?.privateMetadata?.streamRegistered) {
23 |       // return redirect('/register');
24 |     } else {
25 |       console.log(
26 |         '[Middleware] User already registered on Stream backend: ',
27 |         auth.userId
28 |       );
29 |     }
30 | 
31 |     return NextResponse.next();
32 |   },
33 | });
34 | 
35 | export const config = {
36 |   matcher: [
37 |     // Exclude files with a "." followed by an extension, which are typically static files.
38 |     // Exclude files in the _next directory, which are Next.js internals.
39 | 
40 |     '/((?!.+\\.[\\w]+$|_next).*)',
41 |     // Re-include any files in the api or trpc folders that might have an extension
42 |     '/(api|trpc)(.*)',
43 |   ],
44 | };
45 | 


--------------------------------------------------------------------------------
/components/ChannelList/CategoryItem/CategoryItem.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | import { Channel } from 'stream-chat';
 3 | import CustomChannelPreview from '../CustomChannelPreview';
 4 | import { useState } from 'react';
 5 | import { ChevronDown, PlusIcon } from '../Icons';
 6 | 
 7 | import './CategoryItem.css';
 8 | import { DefaultStreamChatGenerics } from 'stream-chat-react';
 9 | 
10 | type CategoryItemProps = {
11 |   category: string;
12 |   channels: Channel<DefaultStreamChatGenerics>[];
13 |   serverName: string;
14 | };
15 | 
16 | export default function CategoryItem({
17 |   category,
18 |   serverName,
19 |   channels,
20 | }: CategoryItemProps): JSX.Element {
21 |   const [isOpen, setIsOpen] = useState(true);
22 |   return (
23 |     <div className='mb-5'>
24 |       <div className='flex items-center text-gray-500 p-2'>
25 |         <button
26 |           className='flex w-full items-center justify-start'
27 |           onClick={() => setIsOpen((currentValue) => !currentValue)}
28 |         >
29 |           <div
30 |             className={`${
31 |               isOpen ? '' : '-rotate-90'
32 |             } transition-all ease-in-out duration-200`}
33 |           >
34 |             <ChevronDown />
35 |           </div>
36 |           <span className='inline-block uppercase text-sm font-bold px-2'>
37 |             {category}
38 |           </span>
39 |         </button>
40 |         <Link
41 |           className='inline-block create-button'
42 |           href={`/?createChannel=true&serverName=${serverName}&category=${category}`}
43 |         >
44 |           <PlusIcon />
45 |         </Link>
46 |       </div>
47 |       {isOpen && (
48 |         <div>
49 |           {channels.map((channel) => {
50 |             return (
51 |               <CustomChannelPreview
52 |                 key={channel.id}
53 |                 channel={channel}
54 |                 className='w-full'
55 |               />
56 |             );
57 |           })}
58 |         </div>
59 |       )}
60 |     </div>
61 |   );
62 | }
63 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Discord-Clone-Part1-2400x1350px](https://github.com/GetStream/discord-clone-nextjs/assets/12433593/3c15c77d-7c7c-45fc-b7ba-a26ae20a2842)
 2 | 
 3 | # Discord Clone using NextJS, TailwindCSS, and Stream
 4 | 
 5 | This repository accompanies the series of blog posts published on the Stream Blog about creating a Discord clone using [NextJS](https://nextjs.org), [TailwindCSS](https://tailwindcss.com), and the Stream [Chat](https://getstream.io/chat/docs/) and [Video](https://getstream.io/video/docs/) SDKs.
 6 | 
 7 | The series will have five posts at the end (we'll have the links updated once they are published):
 8 | 
 9 | - [Part 1: Setup Project](https://getstream.io/blog/discord-clone-project-setup/)
10 | - [Part 2: General Layout and Server List](https://getstream.io/blog/discord-clone-server-list/)
11 | - Part 3: Channel List UI (coming soon)
12 | - Part 4: Message List UI
13 | - Part 5: Adding video and audio calling
14 | 
15 | ---
16 | 
17 | ## Running the project
18 | 
19 | ### Prerequisites
20 | 
21 | First, a machine running [Node.js](https://nodejs.org/en) and the option to clone the repository. The rest of the setup is explained in [Part 1](https://getstream.io/blog/discord-clone-project-setup/).
22 | 
23 | Second, an account with Stream. We have a [free tier](https://getstream.io/pricing/#chat), and we can create an account for free using [this link](https://http://getstream.io/try-for-free/).
24 | 
25 | ### Running locally
26 | 
27 | The first thing to do is install dependencies:
28 | 
29 | ```bash
30 | npm install
31 | # or
32 | yarn
33 | ```
34 | 
35 | Then we can run the project on our machine in development mode:
36 | 
37 | ```bash
38 | npm run dev
39 | # or
40 | yarn dev
41 | ```
42 | 
43 | ## Use the Stream SDKs yourself
44 | 
45 | You can get started with the Stream SDKs today [for free](https://http://getstream.io/try-for-free/).
46 | 
47 | Find our React documentation here:
48 | 
49 | - [Chat SDK](https://getstream.io/chat/sdk/react/)
50 | - [Video and Audio SDK](https://getstream.io/video/docs/react/)
51 | 


--------------------------------------------------------------------------------
/components/MessageList/CustomMessage/CustomMessage.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ReactionSelector,
 3 |   ReactionsList,
 4 |   useMessageContext,
 5 | } from 'stream-chat-react';
 6 | import Image from 'next/image';
 7 | import { useState } from 'react';
 8 | import MessageOptions from './MessageOptions';
 9 | 
10 | export default function CustomMessage(): JSX.Element {
11 |   const { message } = useMessageContext();
12 |   const [showOptions, setShowOptions] = useState(false);
13 |   const [showReactions, setShowReactions] = useState(false);
14 |   return (
15 |     <div
16 |       onMouseEnter={() => setShowOptions(true)}
17 |       onMouseLeave={() => setShowOptions(false)}
18 |       className='flex relative space-x-2 p-2 rounded-md transition-colors ease-in-out duration-200 hover:bg-gray-100'
19 |     >
20 |       <Image
21 |         className='rounded-full aspect-square object-cover w-10 h-10'
22 |         width={40}
23 |         height={40}
24 |         src={message.user?.image || 'https://getstream.io/random_png/'}
25 |         alt='User avatar'
26 |       />
27 |       <div>
28 |         {showOptions && (
29 |           <MessageOptions showEmojiReactions={setShowReactions} />
30 |         )}
31 |         {showReactions && (
32 |           <div className='absolute'>
33 |             <ReactionSelector />
34 |           </div>
35 |         )}
36 |         <div className='space-x-2'>
37 |           <span className='font-semibold text-sm text-black'>
38 |             {message.user?.name}
39 |           </span>
40 |           {message.updated_at && (
41 |             <span className='text-xs text-gray-600'>
42 |               {formatDate(message.updated_at)}
43 |             </span>
44 |           )}
45 |         </div>
46 |         <p className='text-sm text-gray-700'>{message.text}</p>
47 |         <ReactionsList />
48 |       </div>
49 |     </div>
50 |   );
51 | 
52 |   function formatDate(date: Date | string): string {
53 |     if (typeof date === 'string') {
54 |       return date;
55 |     }
56 |     return `${date.toLocaleString('en-US', {
57 |       dateStyle: 'medium',
58 |       timeStyle: 'short',
59 |     })}`;
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/components/MessageList/MessageComposer/MessageComposer.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   Emoji,
 3 |   GIF,
 4 |   PlusCircle,
 5 |   Present,
 6 | } from '@/components/ChannelList/Icons';
 7 | import { useState } from 'react';
 8 | import { SendButton, useChatContext } from 'stream-chat-react';
 9 | import { plusItems } from './plusItems';
10 | import ChannelListMenuRow from '@/components/ChannelList/TopBar/ChannelListMenuRow';
11 | 
12 | export default function MessageComposer(): JSX.Element {
13 |   const [plusMenuOpen, setPlusMenuOpen] = useState(false);
14 |   const { channel } = useChatContext();
15 |   const [message, setMessage] = useState('');
16 |   return (
17 |     <div className='flex mx-6 my-6 px-4 py-1 bg-composer-gray items-center justify-center space-x-4 rounded-md text-gray-600 relative'>
18 |       <button onClick={() => setPlusMenuOpen((menuOpen) => !menuOpen)}>
19 |         <PlusCircle className='w-8 h-8 hover:text-gray-800' />
20 |       </button>
21 |       {plusMenuOpen && (
22 |         <div className='absolute p-2 z-10 -left-6 bottom-12'>
23 |           <div className='bg-white p-2 shadow-lg rounded-md w-40 flex flex-col'>
24 |             {plusItems.map((option) => (
25 |               <button
26 |                 key={option.name}
27 |                 className=''
28 |                 onClick={() => setPlusMenuOpen(false)}
29 |               >
30 |                 <ChannelListMenuRow {...option} />
31 |               </button>
32 |             ))}
33 |           </div>
34 |         </div>
35 |       )}
36 |       <input
37 |         className='border-transparent bg-transparent outline-none text-sm font-semibold m-0 text-gray-normal'
38 |         type='text'
39 |         value={message}
40 |         onChange={(e) => setMessage(e.target.value)}
41 |         placeholder='Message #general'
42 |       />
43 |       <Present className='w-8 h-8 hover:text-gray-800' />
44 |       <GIF className='w-8 h-8 hover:text-gray-800' />
45 |       <Emoji className='w-8 h-8 hover:text-gray-800' />
46 |       <SendButton
47 |         sendMessage={() => {
48 |           channel?.sendMessage({ text: message });
49 |           setMessage('');
50 |         }}
51 |       />
52 |     </div>
53 |   );
54 | }
55 | 


--------------------------------------------------------------------------------
/components/MyChat.tsx:
--------------------------------------------------------------------------------
 1 | import { useClient } from '@/hooks/useClient';
 2 | import { User } from 'stream-chat';
 3 | import {
 4 |   Chat,
 5 |   Channel,
 6 |   ChannelList,
 7 |   ChannelHeader,
 8 |   MessageList,
 9 |   MessageInput,
10 |   Thread,
11 |   Window,
12 | } from 'stream-chat-react';
13 | 
14 | import CustomChannelList from '@/components/ChannelList/CustomChannelList';
15 | import ServerList from '@/components/ServerList/ServerList';
16 | import MessageComposer from '@/components/MessageList/MessageComposer/MessageComposer';
17 | import CustomDateSeparator from '@/components/MessageList/CustomDateSeparator/CustomDateSeparator';
18 | import CustomMessage from '@/components/MessageList/CustomMessage/CustomMessage';
19 | import { customReactionOptions } from '@/components/MessageList/CustomReactions/CustomReactionsSelector';
20 | import { useVideoClient } from '@/hooks/useVideoClient';
21 | import { StreamVideo } from '@stream-io/video-react-sdk';
22 | import { useDiscordContext } from '@/contexts/DiscordContext';
23 | import MyCall from '@/components/MyCall/MyCall';
24 | import CustomChannelHeader from './MessageList/CustomChannelHeader/CustomChannelHeader';
25 | 
26 | export default function MyChat({
27 |   apiKey,
28 |   user,
29 |   token,
30 | }: {
31 |   apiKey: string;
32 |   user: User;
33 |   token: string;
34 | }) {
35 |   const chatClient = useClient({
36 |     apiKey,
37 |     user,
38 |     tokenOrProvider: token,
39 |   });
40 |   const videoClient = useVideoClient({
41 |     apiKey,
42 |     user,
43 |     tokenOrProvider: token,
44 |   });
45 |   const { callId } = useDiscordContext();
46 | 
47 |   if (!chatClient) {
48 |     return <div>Error, please try again later.</div>;
49 |   }
50 | 
51 |   if (!videoClient) {
52 |     return <div>Video Error, please try again later.</div>;
53 |   }
54 | 
55 |   return (
56 |     <StreamVideo client={videoClient}>
57 |       <Chat client={chatClient} theme='str-chat__theme-light'>
58 |         <section className='flex h-screen w-screen layout'>
59 |           <ServerList />
60 |           <ChannelList List={CustomChannelList} sendChannelsToList={true} />
61 |           {callId && <MyCall callId={callId} />}
62 |           {!callId && (
63 |             <Channel
64 |               Message={CustomMessage}
65 |               Input={MessageComposer}
66 |               DateSeparator={CustomDateSeparator}
67 |               reactionOptions={customReactionOptions}
68 |               HeaderComponent={CustomChannelHeader}
69 |             >
70 |               <Window>
71 |                 <MessageList />
72 |                 <MessageInput />
73 |               </Window>
74 |               <Thread />
75 |             </Channel>
76 |           )}
77 |         </section>
78 |       </Chat>
79 |     </StreamVideo>
80 |   );
81 | }
82 | 


--------------------------------------------------------------------------------
/components/ChannelList/CallList/CallList.tsx:
--------------------------------------------------------------------------------
 1 | import { useDiscordContext } from '@/contexts/DiscordContext';
 2 | import { Call, useStreamVideoClient } from '@stream-io/video-react-sdk';
 3 | import { useCallback, useEffect, useState } from 'react';
 4 | import { ChevronRight, PlusIcon, Speaker } from '../Icons';
 5 | import Link from 'next/link';
 6 | 
 7 | export default function CallList(): JSX.Element {
 8 |   const { server, callId, setCall } = useDiscordContext();
 9 |   const client = useStreamVideoClient();
10 | 
11 |   const [isOpen, setIsOpen] = useState<boolean>(true);
12 |   const [calls, setCalls] = useState<Call[]>([]);
13 | 
14 |   const loadAudioChannels = useCallback(async () => {
15 |     const callsRequest = await client?.queryCalls({
16 |       filter_conditions: {
17 |         'custom.serverName': server?.name || 'Test Server',
18 |       },
19 |       sort: [{ field: 'created_at', direction: 1 }],
20 |       watch: true,
21 |     });
22 |     if (callsRequest?.calls) {
23 |       setCalls(callsRequest?.calls);
24 |     }
25 |   }, [client, server]);
26 | 
27 |   useEffect(() => {
28 |     loadAudioChannels();
29 |   }, [loadAudioChannels]);
30 | 
31 |   return (
32 |     <div className='w-full my-2'>
33 |       <div className='flex text-gray-500 items-center mb-2 pr-2'>
34 |         <button
35 |           className='flex w-full items-center justify-start px-2'
36 |           onClick={() => setIsOpen((currentValue) => !currentValue)}
37 |         >
38 |           <div
39 |             className={`${
40 |               isOpen ? 'rotate-90' : ''
41 |             } transition-all ease-in-out duration-200`}
42 |           >
43 |             <ChevronRight />
44 |           </div>
45 |           <h2 className='inline-block uppercase text-sm font-bold px-2'>
46 |             Voice Channels
47 |           </h2>
48 |         </button>
49 |         <Link
50 |           className=''
51 |           href={`/?createChannel=true&isVoice=true&category=Voice Channels`}
52 |         >
53 |           <PlusIcon />
54 |         </Link>
55 |       </div>
56 |       {isOpen && (
57 |         <div className='px-2'>
58 |           {calls.map((call) => (
59 |             <button
60 |               key={call.id}
61 |               className='w-full flex items-center my-1 px-2 py-1 hover:bg-gray-200 rounded-md'
62 |               onClick={() => {
63 |                 setCall(call.id);
64 |               }}
65 |             >
66 |               <Speaker className='w-5 h-5 text-gray-500 mr-2' />
67 |               <span
68 |                 className={`text-sm ${call.id === callId ? 'font-bold' : ''}`}
69 |               >
70 |                 {call.state.custom.callName || 'Channel Preview'}
71 |               </span>
72 |             </button>
73 |           ))}
74 |         </div>
75 |       )}
76 |     </div>
77 |   );
78 | }
79 | 


--------------------------------------------------------------------------------
/components/ChannelList/BottomBar/ChannelListBottomBar.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | import { useState } from 'react';
 3 | import { Gear, LeaveServer, Mic, Speaker } from '../Icons';
 4 | import { useChatContext } from 'stream-chat-react';
 5 | import { useClerk } from '@clerk/nextjs';
 6 | import ChannelListMenuRow from '../TopBar/ChannelListMenuRow';
 7 | 
 8 | export default function ChannelListBottomBar(): JSX.Element {
 9 |   const { client } = useChatContext();
10 |   const [micActive, setMicActive] = useState(false);
11 |   const [audioActive, setAudioActive] = useState(false);
12 |   const [menuOpen, setMenuOpen] = useState(false);
13 | 
14 |   const { signOut } = useClerk();
15 | 
16 |   return (
17 |     <div className='mt-auto p-2 bg-light-gray w-full flex items-center space-x-3 relative'>
18 |       <button
19 |         className='flex flex-1 items-center space-x-2 p-1 pr-2 rounded-md hover:bg-hover-gray'
20 |         onClick={() => setMenuOpen((currentValue) => !currentValue)}
21 |       >
22 |         {client.user?.image && (
23 |           <div
24 |             className={`relative ${client.user?.online ? 'online-icon' : ''}`}
25 |           >
26 |             <Image
27 |               src={client.user?.image ?? 'https://thispersondoesnotexist.com/'}
28 |               alt='User image'
29 |               width={36}
30 |               height={36}
31 |               className='rounded-full'
32 |             />
33 |           </div>
34 |         )}
35 |         <p className='flex flex-col items-start space-y-1'>
36 |           <span className='block max-w-24 text-gray-700 text-sm font-medium -mb-1.5 tracking-tight text-ellipsis overflow-x-clip'>
37 |             {client.user?.name}
38 |           </span>
39 |           <span className='text-xs text-gray-500 inline-block'>
40 |             {client.user?.online ? 'Online' : 'Offline'}
41 |           </span>
42 |         </p>
43 |       </button>
44 |       <button
45 |         className={`w-7 h-7 p-1 flex items-center justify-center relative rounded-lg hover:bg-gray-300 transition-all duration-100 ease-in-out ${
46 |           !micActive ? 'inactive-icon text-red-400' : 'text-gray-700'
47 |         }`}
48 |         onClick={() => setMicActive((currentValue) => !currentValue)}
49 |       >
50 |         <Mic />
51 |       </button>
52 |       <button
53 |         className={`w-7 h-7 p-1 flex items-center justify-center relative rounded-lg hover:bg-gray-300 transition-all duration-100 ease-in-out ${
54 |           !audioActive ? 'inactive-icon text-red-400' : 'text-gray-700'
55 |         }`}
56 |         onClick={() => setAudioActive((currentValue) => !currentValue)}
57 |       >
58 |         <Speaker />
59 |       </button>
60 |       <button className='w-7 h-7 p-1 flex items-center justify-center relative rounded-md hover:bg-gray-300 transition-all duration-100 ease-in-out text-gray-700'>
61 |         <Gear className='w-full h-full' />
62 |       </button>
63 |       {menuOpen && (
64 |         <button
65 |           className='absolute -top-12 -left-1 w-52 p-2 bg-white rounded-md shadow-md'
66 |           onClick={() => signOut()}
67 |         >
68 |           <ChannelListMenuRow
69 |             name='Sign out'
70 |             icon={<LeaveServer />}
71 |             bottomBorder={false}
72 |             red
73 |           />
74 |         </button>
75 |       )}
76 |     </div>
77 |   );
78 | }
79 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @import '~stream-chat-react/dist/css/v2/index.css';
  6 | 
  7 | :root {
  8 |   --foreground-rgb: 0, 0, 0;
  9 |   --background-start-rgb: 214, 219, 220;
 10 |   --background-end-rgb: 255, 255, 255;
 11 |   --discord-purple: #7289da;
 12 |   --dark-discord: #4752c4;
 13 | 
 14 |   --gray-normal: #313338;
 15 | }
 16 | 
 17 | @media (prefers-color-scheme: dark) {
 18 |   :root {
 19 |     --foreground-rgb: 255, 255, 255;
 20 |     --background-start-rgb: 0, 0, 0;
 21 |     --background-end-rgb: 0, 0, 0;
 22 |   }
 23 | }
 24 | 
 25 | .str-chat {
 26 |   --str-chat__message-list-background-color: white;
 27 |   --str-chat__spacing-10: 0;
 28 | }
 29 | 
 30 | body {
 31 |   color: rgb(var(--foreground-rgb));
 32 |   background: linear-gradient(
 33 |       to bottom,
 34 |       transparent,
 35 |       rgb(var(--background-end-rgb))
 36 |     )
 37 |     rgb(var(--background-start-rgb));
 38 | }
 39 | 
 40 | .layout {
 41 |   display: grid;
 42 |   grid-template-columns: 5rem auto 1fr;
 43 | }
 44 | 
 45 | ::backdrop {
 46 |   background-image: linear-gradient(-45deg, #7289da, rebeccapurple);
 47 |   opacity: 0.5;
 48 | }
 49 | 
 50 | .labelTitle {
 51 |   @apply uppercase text-sm font-bold text-gray-600;
 52 | }
 53 | 
 54 | input,
 55 | select {
 56 |   @apply w-full p-2 rounded;
 57 | }
 58 | 
 59 | input[type='text'] {
 60 |   @apply bg-transparent outline-transparent;
 61 | }
 62 | 
 63 | input[type='text']:focus {
 64 |   outline: none;
 65 | }
 66 | 
 67 | input[type='radio'] {
 68 |   @apply w-8 h-8 mb-0;
 69 |   accent-color: black;
 70 | }
 71 | 
 72 | .rounded-icon {
 73 |   @apply transition-all ease-in-out duration-200 aspect-square object-cover;
 74 |   border-radius: 50%;
 75 | }
 76 | 
 77 | .rounded-icon:hover {
 78 |   border-radius: 1rem;
 79 | }
 80 | 
 81 | .sidebar-icon {
 82 |   @apply flex items-center justify-center w-full relative transition-all ease-in-out duration-200;
 83 | }
 84 | 
 85 | .sidebar-icon::before {
 86 |   @apply transition-all duration-200 ease-in-out;
 87 |   --content-height: 0rem;
 88 |   --content-width: 0rem;
 89 |   --offset: -0.4rem;
 90 |   content: '';
 91 |   display: block;
 92 |   height: var(--content-height);
 93 |   width: var(--content-width);
 94 |   background: black;
 95 |   position: absolute;
 96 |   border-radius: 3px;
 97 |   left: var(--offset);
 98 | }
 99 | 
100 | .sidebar-icon:hover::before {
101 |   --content-height: 1.25rem;
102 |   --content-width: 0.5rem;
103 |   --offset: -0.15rem;
104 | }
105 | 
106 | .selected-icon::before {
107 |   --content-height: 2rem;
108 |   --content-width: 0.5rem;
109 |   --offset: -0.15rem;
110 | }
111 | 
112 | .discord-icon {
113 |   @apply bg-white p-3 w-full h-full;
114 |   content: '';
115 | 
116 |   background: url('../assets/discord-black.svg') no-repeat center center, white;
117 |   background-origin: content-box;
118 | }
119 | 
120 | .discord-icon:hover {
121 |   background: url('../assets/discord-white.svg') no-repeat center center,
122 |     var(--discord-purple);
123 |   background-origin: content-box;
124 |   --offset: 1.5rem;
125 | }
126 | 
127 | .online-icon::after {
128 |   @apply block absolute h-4 w-4 bg-green-600 bottom-0 right-0 rounded-full border-2 border-gray-200;
129 |   content: '';
130 | }
131 | 
132 | .inactive-icon::after {
133 |   @apply block absolute h-full w-0.5 bg-red-400 rotate-45 rounded-xl m-2;
134 |   content: '';
135 | }
136 | 
137 | .channel-container {
138 |   @apply relative;
139 | }
140 | 
141 | .channel-container::before {
142 |   @apply block absolute h-2 w-3 -left-4 bg-gray-700 rounded-xl;
143 |   content: '';
144 | }
145 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { User } from 'stream-chat';
  4 | import { LoadingIndicator } from 'stream-chat-react';
  5 | 
  6 | import { useClerk } from '@clerk/nextjs';
  7 | import { useCallback, useEffect, useState } from 'react';
  8 | import MyChat from '@/components/MyChat';
  9 | 
 10 | // const userId = '7cd445eb-9af2-4505-80a9-aa8543c3343f';
 11 | // const userName = 'Harry Potter';
 12 | 
 13 | const apiKey = '7cu55d72xtjs';
 14 | // const userToken =
 15 | //   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiN2NkNDQ1ZWItOWFmMi00NTA1LTgwYTktYWE4NTQzYzMzNDNmIn0.TtrCA5VoRB2KofI3O6lYjYZd2pHdQT408u7ryeWO4Qg';
 16 | 
 17 | export type DiscordServer = {
 18 |   name: string;
 19 |   image: string | undefined;
 20 | };
 21 | 
 22 | export type Homestate = {
 23 |   apiKey: string;
 24 |   user: User;
 25 |   token: string;
 26 | };
 27 | 
 28 | export default function Home() {
 29 |   const [myState, setMyState] = useState<Homestate | undefined>(undefined);
 30 | 
 31 |   const { user: myUser } = useClerk();
 32 | 
 33 |   const registerUser = useCallback(
 34 |     async function registerUser() {
 35 |       // register user on Stream backend
 36 |       console.log('[registerUser] myUser:', myUser);
 37 |       const userId = myUser?.id;
 38 |       const mail = myUser?.primaryEmailAddress?.emailAddress;
 39 |       if (userId && mail) {
 40 |         const streamResponse = await fetch('/api/register-user', {
 41 |           method: 'POST',
 42 |           headers: {
 43 |             'Content-Type': 'application/json',
 44 |           },
 45 |           body: JSON.stringify({
 46 |             userId: userId,
 47 |             email: mail,
 48 |           }),
 49 |         });
 50 |         const responseBody = await streamResponse.json();
 51 |         console.log('[registerUser] Stream response:', responseBody);
 52 |         return responseBody;
 53 |       }
 54 |     },
 55 |     [myUser]
 56 |   );
 57 | 
 58 |   useEffect(() => {
 59 |     if (
 60 |       myUser?.id &&
 61 |       myUser?.primaryEmailAddress?.emailAddress &&
 62 |       !myUser?.publicMetadata.streamRegistered
 63 |     ) {
 64 |       console.log('[Page - useEffect] Registering user on Stream backend');
 65 |       registerUser().then((result) => {
 66 |         console.log('[Page - useEffect] Result: ', result);
 67 |         getUserToken(
 68 |           myUser.id,
 69 |           myUser?.primaryEmailAddress?.emailAddress || 'Unknown'
 70 |         );
 71 |       });
 72 |     } else {
 73 |       // take user and get token
 74 |       if (myUser?.id) {
 75 |         console.log(
 76 |           '[Page - useEffect] User already registered on Stream backend: ',
 77 |           myUser?.id
 78 |         );
 79 |         getUserToken(
 80 |           myUser?.id || 'Unknown',
 81 |           myUser?.primaryEmailAddress?.emailAddress || 'Unknown'
 82 |         );
 83 |       }
 84 |     }
 85 |   }, [registerUser, myUser]);
 86 | 
 87 |   if (!myState) {
 88 |     return <LoadingIndicator />;
 89 |   }
 90 | 
 91 |   return <MyChat {...myState} />;
 92 | 
 93 |   async function getUserToken(userId: string, userName: string) {
 94 |     const response = await fetch('/api/token', {
 95 |       method: 'POST',
 96 |       headers: {
 97 |         'Content-Type': 'application/json',
 98 |       },
 99 |       body: JSON.stringify({
100 |         userId: userId,
101 |       }),
102 |     });
103 |     const responseBody = await response.json();
104 |     const token = responseBody.token;
105 | 
106 |     if (!token) {
107 |       console.error("Couldn't retrieve token.");
108 |       return;
109 |     }
110 | 
111 |     const user: User = {
112 |       id: userId,
113 |       name: userName,
114 |       image: `https://getstream.io/random_png/?id=${userId}&name=${userName}`,
115 |     };
116 |     setMyState({
117 |       apiKey: apiKey,
118 |       user: user,
119 |       token: token,
120 |     });
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/components/ServerList/ServerList.tsx:
--------------------------------------------------------------------------------
  1 | import { useChatContext } from 'stream-chat-react';
  2 | import Image from 'next/image';
  3 | import { useCallback, useEffect, useState } from 'react';
  4 | import { DiscordServer } from '@/app/page';
  5 | import { useDiscordContext } from '@/contexts/DiscordContext';
  6 | import CreateServerForm from './CreateServerForm';
  7 | import Link from 'next/link';
  8 | import { Channel } from 'stream-chat';
  9 | 
 10 | const ServerList = () => {
 11 |   const { client } = useChatContext();
 12 |   const { server: activeServer, changeServer } = useDiscordContext();
 13 |   const [serverList, setServerList] = useState<DiscordServer[]>([]);
 14 | 
 15 |   const loadServerList = useCallback(async (): Promise<void> => {
 16 |     const channels = await client.queryChannels({
 17 |       type: 'messaging',
 18 |       members: { $in: [client.userID as string] },
 19 |     });
 20 |     const serverSet: Set<DiscordServer> = new Set(
 21 |       channels
 22 |         .map((channel: Channel) => {
 23 |           return {
 24 |             name: (channel.data?.data?.server as string) ?? 'Unknown',
 25 |             image: channel.data?.data?.image,
 26 |           };
 27 |         })
 28 |         .filter((server: DiscordServer) => server.name !== 'Unknown')
 29 |         .filter(
 30 |           (server: DiscordServer, index, self) =>
 31 |             index ===
 32 |             self.findIndex((serverObject) => serverObject.name == server.name)
 33 |         )
 34 |     );
 35 |     const serverArray = Array.from(serverSet.values());
 36 |     setServerList(serverArray);
 37 |     if (serverArray.length > 0) {
 38 |       changeServer(serverArray[0], client);
 39 |     }
 40 |   }, [client, changeServer]);
 41 | 
 42 |   useEffect(() => {
 43 |     loadServerList();
 44 |   }, [loadServerList]);
 45 | 
 46 |   return (
 47 |     <div className='bg-dark-gray h-full flex flex-col items-center'>
 48 |       <button
 49 |         className={`block p-3 aspect-square sidebar-icon border-t-2 border-t-gray-300 ${
 50 |           activeServer === undefined ? 'selected-icon' : ''
 51 |         }`}
 52 |         onClick={() => changeServer(undefined, client)}
 53 |       >
 54 |         <div className='rounded-icon discord-icon'></div>
 55 |       </button>
 56 |       <div className='border-t-2 border-t-gray-300'>
 57 |         {serverList.map((server) => {
 58 |           return (
 59 |             <button
 60 |               key={server.name}
 61 |               className={`p-4 sidebar-icon ${
 62 |                 server === activeServer ? 'selected-icon' : ''
 63 |               }`}
 64 |               onClick={() => {
 65 |                 changeServer(server, client);
 66 |               }}
 67 |             >
 68 |               {server.image && checkIfUrl(server.image) ? (
 69 |                 <Image
 70 |                   className='rounded-icon'
 71 |                   src={server.image}
 72 |                   width={50}
 73 |                   height={50}
 74 |                   alt='Server Icon'
 75 |                 />
 76 |               ) : (
 77 |                 <span className='rounded-icon bg-gray-600 w-[50px] flex items-center justify-center text-sm'>
 78 |                   {server.name.charAt(0)}
 79 |                 </span>
 80 |               )}
 81 |             </button>
 82 |           );
 83 |         })}
 84 |       </div>
 85 |       <Link
 86 |         href={'/?createServer=true'}
 87 |         className='flex items-center justify-center rounded-icon bg-white text-green-500 hover:bg-green-500 hover:text-white hover:rounded-xl transition-all duration-200 p-2 my-2 text-2xl font-light h-12 w-12'
 88 |       >
 89 |         <span className='inline-block'>+</span>
 90 |       </Link>
 91 |       <CreateServerForm />
 92 |     </div>
 93 |   );
 94 | 
 95 |   function checkIfUrl(path: string): Boolean {
 96 |     try {
 97 |       const _ = new URL(path);
 98 |       return true;
 99 |     } catch (_) {
100 |       return false;
101 |     }
102 |   }
103 | };
104 | 
105 | export default ServerList;
106 | 


--------------------------------------------------------------------------------
/components/ServerList/CreateServerForm.tsx:
--------------------------------------------------------------------------------
  1 | import { useDiscordContext } from '@/contexts/DiscordContext';
  2 | import { UserObject } from '@/model/UserObject';
  3 | import Link from 'next/link';
  4 | import { useSearchParams } from 'next/navigation';
  5 | import { useRouter } from 'next/navigation';
  6 | import { useCallback, useEffect, useRef, useState } from 'react';
  7 | import { useChatContext } from 'stream-chat-react';
  8 | import { useStreamVideoClient } from '@stream-io/video-react-sdk';
  9 | import { CloseMark } from '../ChannelList/Icons';
 10 | import UserRow from '../ChannelList/CreateChannelForm/UserRow';
 11 | 
 12 | type FormState = {
 13 |   serverName: string;
 14 |   serverImage: string;
 15 |   users: UserObject[];
 16 | };
 17 | 
 18 | const CreateServerForm = () => {
 19 |   // Check if we are shown
 20 |   const params = useSearchParams();
 21 |   const showCreateServerForm = params.get('createServer');
 22 |   const dialogRef = useRef<HTMLDialogElement>(null);
 23 |   const router = useRouter();
 24 | 
 25 |   // Data
 26 |   const { client } = useChatContext();
 27 |   const videoClient = useStreamVideoClient();
 28 |   const { createServer } = useDiscordContext();
 29 |   const initialState: FormState = {
 30 |     serverName: '',
 31 |     serverImage: '',
 32 |     users: [],
 33 |   };
 34 | 
 35 |   const [formData, setFormData] = useState<FormState>(initialState);
 36 |   const [users, setUsers] = useState<UserObject[]>([]);
 37 | 
 38 |   const loadUsers = useCallback(async () => {
 39 |     const response = await client.queryUsers({});
 40 |     const users: UserObject[] = response.users
 41 |       .filter((user) => user.role !== 'admin')
 42 |       .map((user) => {
 43 |         return {
 44 |           id: user.id,
 45 |           name: user.name ?? user.id,
 46 |           image: user.image as string,
 47 |           online: user.online,
 48 |           lastOnline: user.last_active,
 49 |         };
 50 |       });
 51 |     if (users) setUsers(users);
 52 |   }, [client]);
 53 | 
 54 |   useEffect(() => {
 55 |     if (showCreateServerForm && dialogRef.current) {
 56 |       dialogRef.current.showModal();
 57 |     } else {
 58 |       dialogRef.current?.close();
 59 |     }
 60 |   }, [showCreateServerForm]);
 61 | 
 62 |   useEffect(() => {
 63 |     loadUsers();
 64 |   }, [loadUsers]);
 65 | 
 66 |   return (
 67 |     <dialog className='absolute z-10 space-y-2 rounded-xl' ref={dialogRef}>
 68 |       <div className='w-full flex items-center justify-between py-8 px-6'>
 69 |         <h2 className='text-3xl font-semibold text-gray-600'>
 70 |           Create new server
 71 |         </h2>
 72 |         <Link href='/'>
 73 |           <CloseMark className='w-10 h-10 text-gray-400' />
 74 |         </Link>
 75 |       </div>
 76 |       <form method='dialog' className='flex flex-col space-y-2 px-6'>
 77 |         <label className='labelTitle' htmlFor='serverName'>
 78 |           Server Name
 79 |         </label>
 80 |         <div className='flex items-center bg-gray-100'>
 81 |           <span className='text-2xl p-2 text-gray-500'>#</span>
 82 |           <input
 83 |             type='text'
 84 |             id='serverName'
 85 |             name='serverName'
 86 |             value={formData.serverName}
 87 |             onChange={(e) =>
 88 |               setFormData({ ...formData, serverName: e.target.value })
 89 |             }
 90 |             required
 91 |           />
 92 |         </div>
 93 |         <label className='labelTitle' htmlFor='serverImage'>
 94 |           Image URL
 95 |         </label>
 96 |         <div className='flex items-center bg-gray-100'>
 97 |           <span className='text-2xl p-2 text-gray-500'>#</span>
 98 |           <input
 99 |             type='text'
100 |             id='serverImage'
101 |             name='serverImage'
102 |             value={formData.serverImage}
103 |             onChange={(e) =>
104 |               setFormData({ ...formData, serverImage: e.target.value })
105 |             }
106 |             required
107 |           />
108 |         </div>
109 |         <h2 className='mb-2 labelTitle'>Add Users</h2>
110 |         <div className='max-h-64 overflow-y-scroll'>
111 |           {users.map((user) => (
112 |             <UserRow user={user} userChanged={userChanged} key={user.id} />
113 |           ))}
114 |         </div>
115 |       </form>
116 |       <div className='flex space-x-6 items-center justify-end p-6 bg-gray-200'>
117 |         <Link href={'/'} className='font-semibold text-gray-500'>
118 |           Cancel
119 |         </Link>
120 |         <button
121 |           type='submit'
122 |           disabled={buttonDisabled()}
123 |           className={`bg-discord rounded py-2 px-4 text-white font-bold uppercase ${
124 |             buttonDisabled() ? 'opacity-50 cursor-not-allowed' : ''
125 |           }`}
126 |           onClick={createClicked}
127 |         >
128 |           Create Server
129 |         </button>
130 |       </div>
131 |     </dialog>
132 |   );
133 | 
134 |   function buttonDisabled(): boolean {
135 |     return (
136 |       !formData.serverName ||
137 |       !formData.serverImage ||
138 |       formData.users.length <= 1
139 |     );
140 |   }
141 | 
142 |   function userChanged(user: UserObject, checked: boolean) {
143 |     if (checked) {
144 |       setFormData({
145 |         ...formData,
146 |         users: [...formData.users, user],
147 |       });
148 |     } else {
149 |       setFormData({
150 |         ...formData,
151 |         users: formData.users.filter((thisUser) => thisUser.id !== user.id),
152 |       });
153 |     }
154 |   }
155 | 
156 |   function createClicked() {
157 |     if (!videoClient) {
158 |       console.log('[CreateServerForm] Video client not available');
159 |       return;
160 |     }
161 |     createServer(
162 |       client,
163 |       videoClient,
164 |       formData.serverName,
165 |       formData.serverImage,
166 |       formData.users.map((user) => user.id)
167 |     );
168 |     setFormData(initialState);
169 |     router.replace('/');
170 |   }
171 | };
172 | export default CreateServerForm;
173 | 


--------------------------------------------------------------------------------
/contexts/DiscordContext.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import { DiscordServer } from '@/app/page';
  4 | import { MemberRequest, StreamVideoClient } from '@stream-io/video-client';
  5 | import { createContext, useCallback, useContext, useState } from 'react';
  6 | import { Channel, ChannelFilters, StreamChat } from 'stream-chat';
  7 | import { DefaultStreamChatGenerics } from 'stream-chat-react';
  8 | import { v4 as uuid } from 'uuid';
  9 | 
 10 | type DiscordState = {
 11 |   server?: DiscordServer;
 12 |   callId: string | undefined;
 13 |   channelsByCategories: Map<string, Array<Channel<DefaultStreamChatGenerics>>>;
 14 |   changeServer: (server: DiscordServer | undefined, client: StreamChat) => void;
 15 |   createServer: (
 16 |     client: StreamChat,
 17 |     videoClient: StreamVideoClient,
 18 |     name: string,
 19 |     imageUrl: string,
 20 |     userIds: string[]
 21 |   ) => void;
 22 |   createChannel: (
 23 |     client: StreamChat,
 24 |     name: string,
 25 |     category: string,
 26 |     userIds: string[]
 27 |   ) => void;
 28 |   createCall: (
 29 |     client: StreamVideoClient,
 30 |     server: DiscordServer,
 31 |     channelName: string,
 32 |     userIds: string[]
 33 |   ) => Promise<void>;
 34 |   setCall: (callId: string | undefined) => void;
 35 | };
 36 | 
 37 | const initialValue: DiscordState = {
 38 |   server: undefined,
 39 |   callId: undefined,
 40 |   channelsByCategories: new Map(),
 41 |   changeServer: () => {},
 42 |   createServer: () => {},
 43 |   createChannel: () => {},
 44 |   createCall: async () => {},
 45 |   setCall: () => {},
 46 | };
 47 | 
 48 | const DiscordContext = createContext<DiscordState>(initialValue);
 49 | 
 50 | export const DiscordContextProvider: any = ({
 51 |   children,
 52 | }: {
 53 |   children: React.ReactNode;
 54 | }) => {
 55 |   const [myState, setMyState] = useState<DiscordState>(initialValue);
 56 | 
 57 |   const changeServer = useCallback(
 58 |     async (server: DiscordServer | undefined, client: StreamChat) => {
 59 |       let filters: ChannelFilters = {
 60 |         type: 'messaging',
 61 |         members: { $in: [client.userID as string] },
 62 |       };
 63 |       if (!server) {
 64 |         filters.member_count = 2;
 65 |       }
 66 | 
 67 |       console.log(
 68 |         '[DiscordContext - loadServerList] Querying channels for ',
 69 |         client.userID
 70 |       );
 71 |       const channels = await client.queryChannels(filters);
 72 |       const channelsByCategories = new Map<
 73 |         string,
 74 |         Array<Channel<DefaultStreamChatGenerics>>
 75 |       >();
 76 |       if (server) {
 77 |         const categories = new Set(
 78 |           channels
 79 |             .filter((channel) => {
 80 |               return channel.data?.data?.server === server.name;
 81 |             })
 82 |             .map((channel) => {
 83 |               return channel.data?.data?.category;
 84 |             })
 85 |         );
 86 | 
 87 |         for (const category of Array.from(categories)) {
 88 |           channelsByCategories.set(
 89 |             category,
 90 |             channels.filter((channel) => {
 91 |               return (
 92 |                 channel.data?.data?.server === server.name &&
 93 |                 channel.data?.data?.category === category
 94 |               );
 95 |             })
 96 |           );
 97 |         }
 98 |       } else {
 99 |         channelsByCategories.set('Direct Messages', channels);
100 |       }
101 |       setMyState((myState) => {
102 |         return { ...myState, server, channelsByCategories };
103 |       });
104 |     },
105 |     [setMyState]
106 |   );
107 | 
108 |   const createCall = useCallback(
109 |     async (
110 |       client: StreamVideoClient,
111 |       server: DiscordServer,
112 |       channelName: string,
113 |       userIds: string[]
114 |     ) => {
115 |       const callId = uuid();
116 |       const audioCall = client.call('default', callId);
117 |       const audioChannelMembers: MemberRequest[] = userIds.map((userId) => {
118 |         return {
119 |           user_id: userId,
120 |         };
121 |       });
122 |       try {
123 |         const createdAudioCall = await audioCall.create({
124 |           data: {
125 |             custom: {
126 |               // serverId: server?.id,
127 |               serverName: server?.name,
128 |               callName: channelName,
129 |             },
130 |             members: audioChannelMembers,
131 |           },
132 |         });
133 |         console.log(
134 |           `[DiscordContext] Created Call with id: ${createdAudioCall.call.id}`
135 |         );
136 |       } catch (err) {
137 |         console.log(err);
138 |       }
139 |     },
140 |     []
141 |   );
142 | 
143 |   const createServer = useCallback(
144 |     async (
145 |       client: StreamChat,
146 |       videoClient: StreamVideoClient,
147 |       name: string,
148 |       imageUrl: string,
149 |       userIds: string[]
150 |     ) => {
151 |       const messagingChannel = client.channel('messaging', uuid(), {
152 |         name: 'Welcome',
153 |         members: userIds,
154 |         data: {
155 |           image: imageUrl,
156 |           server: name,
157 |           category: 'Text Channels',
158 |         },
159 |       });
160 | 
161 |       try {
162 |         const response = await messagingChannel.create();
163 |         console.log('[DiscordContext - createServer] Response: ', response);
164 |         if (myState.server) {
165 |           await createCall(
166 |             videoClient,
167 |             myState.server,
168 |             'General Voice Channel',
169 |             userIds
170 |           );
171 |         }
172 |         changeServer({ name, image: imageUrl }, client);
173 |       } catch (err) {
174 |         console.error(err);
175 |       }
176 |     },
177 |     [changeServer, createCall, myState.server]
178 |   );
179 | 
180 |   const createChannel = useCallback(
181 |     async (
182 |       client: StreamChat,
183 |       name: string,
184 |       category: string,
185 |       userIds: string[]
186 |     ) => {
187 |       if (client.userID) {
188 |         const channel = client.channel('messaging', {
189 |           name: name,
190 |           members: userIds,
191 |           data: {
192 |             server: myState.server?.name,
193 |             category: category,
194 |           },
195 |         });
196 |         try {
197 |           const response = await channel.create();
198 |         } catch (err) {
199 |           console.log(err);
200 |         }
201 |       }
202 |     },
203 |     [myState.server?.name]
204 |   );
205 | 
206 |   const setCall = useCallback(
207 |     (callId: string | undefined) => {
208 |       setMyState((myState) => {
209 |         return { ...myState, callId };
210 |       });
211 |     },
212 |     [setMyState]
213 |   );
214 | 
215 |   const store: DiscordState = {
216 |     server: myState.server,
217 |     callId: myState.callId,
218 |     channelsByCategories: myState.channelsByCategories,
219 |     changeServer: changeServer,
220 |     createServer: createServer,
221 |     createChannel: createChannel,
222 |     createCall: createCall,
223 |     setCall: setCall,
224 |   };
225 | 
226 |   return (
227 |     <DiscordContext.Provider value={store}>{children}</DiscordContext.Provider>
228 |   );
229 | };
230 | 
231 | export const useDiscordContext = () => useContext(DiscordContext);
232 | 


--------------------------------------------------------------------------------
/components/ChannelList/CreateChannelForm/CreateChannelForm.tsx:
--------------------------------------------------------------------------------
  1 | import { UserObject } from '@/model/UserObject';
  2 | import { useDiscordContext } from '@/contexts/DiscordContext';
  3 | import { useSearchParams } from 'next/navigation';
  4 | import { useRouter } from 'next/navigation';
  5 | import { useCallback, useEffect, useRef, useState } from 'react';
  6 | import { useChatContext } from 'stream-chat-react';
  7 | import Link from 'next/link';
  8 | import { CloseMark, Speaker } from '../Icons';
  9 | import UserRow from './UserRow';
 10 | import { useStreamVideoClient } from '@stream-io/video-react-sdk';
 11 | 
 12 | type FormState = {
 13 |   channelType: 'text' | 'voice';
 14 |   channelName: string;
 15 |   category: string;
 16 |   users: UserObject[];
 17 | };
 18 | 
 19 | export default function CreateChannelForm(): JSX.Element {
 20 |   const params = useSearchParams();
 21 |   const showCreateChannelForm = params.get('createChannel');
 22 | 
 23 |   const dialogRef = useRef<HTMLDialogElement>(null);
 24 |   const router = useRouter();
 25 | 
 26 |   const { client } = useChatContext();
 27 |   const videoClient = useStreamVideoClient();
 28 |   const { server, createChannel, createCall } = useDiscordContext();
 29 |   const initialState: FormState = {
 30 |     channelType: 'text',
 31 |     channelName: '',
 32 |     category: '',
 33 |     users: [],
 34 |   };
 35 |   const [formData, setFormData] = useState<FormState>(initialState);
 36 |   const [users, setUsers] = useState<UserObject[]>([]);
 37 | 
 38 |   const loadUsers = useCallback(async () => {
 39 |     const response = await fetch('/api/users');
 40 |     const data = (await response.json())?.data as UserObject[];
 41 |     if (data) setUsers(data);
 42 |   }, []);
 43 | 
 44 |   useEffect(() => {
 45 |     loadUsers();
 46 |   }, [loadUsers]);
 47 | 
 48 |   useEffect(() => {
 49 |     const category = params.get('category');
 50 |     const isVoice = params.get('isVoice');
 51 |     setFormData({
 52 |       channelType: isVoice ? 'voice' : 'text',
 53 |       channelName: '',
 54 |       category: category ?? '',
 55 |       users: [],
 56 |     });
 57 |   }, [setFormData, params]);
 58 | 
 59 |   useEffect(() => {
 60 |     if (showCreateChannelForm && dialogRef.current) {
 61 |       dialogRef.current.showModal();
 62 |     } else {
 63 |       dialogRef.current?.close();
 64 |     }
 65 |   }, [showCreateChannelForm]);
 66 | 
 67 |   return (
 68 |     <dialog className='absolute z-10 space-y-2 rounded-xl' ref={dialogRef}>
 69 |       <div className='w-full flex items-center justify-between py-8 px-6'>
 70 |         <h2 className='text-3xl font-semibold text-gray-600'>Create Channel</h2>
 71 |         <Link href='/'>
 72 |           <CloseMark className='w-10 h-10 text-gray-400' />
 73 |         </Link>
 74 |       </div>
 75 |       <form method='dialog' className='flex flex-col space-y-4 px-6'>
 76 |         <div className='space-y-4'>
 77 |           <h3 className='labelTitle'>Channel Type</h3>
 78 |           <div className='w-full flex space-x-4 items-center bg-gray-100 px-4 py-2 rounded-md'>
 79 |             <label
 80 |               htmlFor='text'
 81 |               className='flex flex-1 items-center space-x-6'
 82 |             >
 83 |               <span className='text-4xl text-gray-400'>#</span>
 84 |               <div>
 85 |                 <p className='text-lg text-gray-700 font-semibold'>Text</p>
 86 |                 <p className='text-gray-500'>
 87 |                   Send messages, images, GIFs, emoji, opinions, and puns
 88 |                 </p>
 89 |               </div>
 90 |             </label>
 91 |             <input
 92 |               type='radio'
 93 |               id='text'
 94 |               name='channelType'
 95 |               value='text'
 96 |               checked={formData.channelType === 'text'}
 97 |               onChange={() => setFormData({ ...formData, channelType: 'text' })}
 98 |             />
 99 |           </div>
100 |           <div className='w-full flex space-x-4 items-center bg-gray-100 px-4 py-2 rounded-md'>
101 |             <label
102 |               htmlFor='voice'
103 |               className='flex flex-1 items-center space-x-4'
104 |             >
105 |               <Speaker className='text-gray-400 w-7 h-7' />
106 |               <div>
107 |                 <p className='text-lg text-gray-700 font-semibold'>Voice</p>
108 |                 <p className='text-gray-500'>
109 |                   Hang out together with voice, video, and screen share
110 |                 </p>
111 |               </div>
112 |             </label>
113 |             <input
114 |               type='radio'
115 |               id='voice'
116 |               name='channelType'
117 |               value='voice'
118 |               checked={formData.channelType === 'voice'}
119 |               onChange={() =>
120 |                 setFormData({ ...formData, channelType: 'voice' })
121 |               }
122 |             />
123 |           </div>
124 |         </div>
125 |         <label className='labelTitle' htmlFor='channelName'>
126 |           Channel Name
127 |         </label>
128 |         <div className='flex items-center bg-gray-100'>
129 |           <span className='text-2xl p-2 text-gray-500'>#</span>
130 |           <input
131 |             type='text'
132 |             id='channelName'
133 |             name='channelName'
134 |             value={formData.channelName}
135 |             onChange={(e) =>
136 |               setFormData({ ...formData, channelName: e.target.value })
137 |             }
138 |           />
139 |         </div>
140 |         <label
141 |           className='labelTitle flex items-center justify-between'
142 |           htmlFor='category'
143 |         >
144 |           Category
145 |         </label>
146 |         <div className='flex items-center bg-gray-100'>
147 |           <span className='text-2xl p-2 text-gray-500'>#</span>
148 |           <input
149 |             type='text'
150 |             id='category'
151 |             name='category'
152 |             value={formData.category}
153 |             onChange={(e) =>
154 |               setFormData({ ...formData, category: e.target.value })
155 |             }
156 |           />
157 |         </div>
158 |         <h2 className='mb-2 labelTitle'>Add Users</h2>
159 |         <div className='max-h-64 overflow-y-scroll'>
160 |           {users.map((user) => (
161 |             <UserRow user={user} userChanged={userChanged} key={user.id} />
162 |           ))}
163 |         </div>
164 |       </form>
165 |       <div className='flex space-x-6 items-center justify-end p-6 bg-gray-200'>
166 |         <Link href={'/'} className='font-semibold text-gray-500'>
167 |           Cancel
168 |         </Link>
169 |         <button
170 |           type='submit'
171 |           disabled={buttonDisabled()}
172 |           className={`bg-discord rounded py-2 px-4 text-white font-bold uppercase ${
173 |             buttonDisabled() ? 'opacity-50 cursor-not-allowed' : ''
174 |           }`}
175 |           onClick={createClicked}
176 |         >
177 |           Create Channel
178 |         </button>
179 |       </div>
180 |     </dialog>
181 |   );
182 | 
183 |   function buttonDisabled(): boolean {
184 |     return (
185 |       !formData.channelName || !formData.category || formData.users.length <= 1
186 |     );
187 |   }
188 | 
189 |   function userChanged(user: UserObject, checked: boolean) {
190 |     if (checked) {
191 |       setFormData({
192 |         ...formData,
193 |         users: [...formData.users, user],
194 |       });
195 |     } else {
196 |       setFormData({
197 |         ...formData,
198 |         users: formData.users.filter((thisUser) => thisUser.id !== user.id),
199 |       });
200 |     }
201 |   }
202 | 
203 |   function createClicked() {
204 |     switch (formData.channelType) {
205 |       case 'text':
206 |         createChannel(
207 |           client,
208 |           formData.channelName,
209 |           formData.category,
210 |           formData.users.map((user) => user.id)
211 |         );
212 |       case 'voice':
213 |         if (videoClient && server) {
214 |           createCall(
215 |             videoClient,
216 |             server,
217 |             formData.channelName,
218 |             formData.users.map((user) => user.id)
219 |           );
220 |         }
221 |     }
222 |     setFormData(initialState);
223 |     router.replace('/');
224 |   }
225 | }
226 | 


--------------------------------------------------------------------------------
/components/ChannelList/Icons.tsx:
--------------------------------------------------------------------------------
  1 | import { Icon } from 'next/dist/lib/metadata/types/metadata-types';
  2 | 
  3 | type IconProps = {
  4 |   className?: string;
  5 | };
  6 | 
  7 | export function PlusIcon({
  8 |   className = 'h-5 w-5 text-gray-500',
  9 | }: IconProps): JSX.Element {
 10 |   return (
 11 |     <svg
 12 |       xmlns='http://www.w3.org/2000/svg'
 13 |       fill='none'
 14 |       viewBox='0 0 24 24'
 15 |       strokeWidth={2}
 16 |       stroke='currentColor'
 17 |       className={className}
 18 |     >
 19 |       <path
 20 |         strokeLinecap='round'
 21 |         strokeLinejoin='round'
 22 |         d='M12 4.5v15m7.5-7.5h-15'
 23 |       />
 24 |     </svg>
 25 |   );
 26 | }
 27 | 
 28 | export function CloseIcon({
 29 |   className = 'h-5 w-5 text-gray-500',
 30 | }: IconProps): JSX.Element {
 31 |   return (
 32 |     <svg
 33 |       xmlns='http://www.w3.org/2000/svg'
 34 |       fill='none'
 35 |       viewBox='0 0 24 24'
 36 |       strokeWidth={1.5}
 37 |       stroke='currentColor'
 38 |       className={className}
 39 |     >
 40 |       <path
 41 |         strokeLinecap='round'
 42 |         strokeLinejoin='round'
 43 |         d='M6 18 18 6M6 6l12 12'
 44 |       />
 45 |     </svg>
 46 |   );
 47 | }
 48 | 
 49 | export function CloseCircle({
 50 |   className = 'w-8 h-8 text-gray-500 hover:text-black hover:font-bold',
 51 | }): JSX.Element {
 52 |   return (
 53 |     <svg
 54 |       xmlns='http://www.w3.org/2000/svg'
 55 |       fill='none'
 56 |       viewBox='0 0 24 24'
 57 |       strokeWidth={1.5}
 58 |       stroke='currentColor'
 59 |       className={className}
 60 |     >
 61 |       <path
 62 |         strokeLinecap='round'
 63 |         strokeLinejoin='round'
 64 |         d='M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
 65 |       />
 66 |     </svg>
 67 |   );
 68 | }
 69 | 
 70 | export function PersonIcon({ className = 'h-8 w-8' }: IconProps): JSX.Element {
 71 |   return (
 72 |     <svg
 73 |       xmlns='http://www.w3.org/2000/svg'
 74 |       fill='none'
 75 |       viewBox='0 0 24 24'
 76 |       strokeWidth={1.5}
 77 |       stroke='currentColor'
 78 |       className={className}
 79 |     >
 80 |       <path
 81 |         strokeLinecap='round'
 82 |         strokeLinejoin='round'
 83 |         d='M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z'
 84 |       />
 85 |     </svg>
 86 |   );
 87 | }
 88 | 
 89 | export function ChevronRight({
 90 |   className = 'h-5 w-5 text-gray-500',
 91 | }: IconProps): JSX.Element {
 92 |   return (
 93 |     <svg
 94 |       xmlns='http://www.w3.org/2000/svg'
 95 |       fill='none'
 96 |       viewBox='0 0 24 24'
 97 |       strokeWidth={2}
 98 |       stroke='currentColor'
 99 |       className={className}
100 |     >
101 |       <path
102 |         strokeLinecap='round'
103 |         strokeLinejoin='round'
104 |         d='m8.25 4.5 7.5 7.5-7.5 7.5'
105 |       />
106 |     </svg>
107 |   );
108 | }
109 | 
110 | export function ChevronDown({
111 |   className = 'h-5 w-5 text-gray-500',
112 | }: IconProps): JSX.Element {
113 |   return (
114 |     <svg
115 |       xmlns='http://www.w3.org/2000/svg'
116 |       fill='none'
117 |       viewBox='0 0 24 24'
118 |       strokeWidth={1.5}
119 |       stroke='currentColor'
120 |       className={className}
121 |     >
122 |       <path
123 |         strokeLinecap='round'
124 |         strokeLinejoin='round'
125 |         d='M19.5 8.25l-7.5 7.5-7.5-7.5'
126 |       />
127 |     </svg>
128 |   );
129 | }
130 | 
131 | export function Bell({ className = 'h-5 w-5' }: IconProps): JSX.Element {
132 |   return (
133 |     <svg
134 |       xmlns='http://www.w3.org/2000/svg'
135 |       viewBox='0 0 24 24'
136 |       fill='currentColor'
137 |       className={className}
138 |     >
139 |       <path
140 |         fillRule='evenodd'
141 |         d='M5.25 9a6.75 6.75 0 0 1 13.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 0 1-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 1 1-7.48 0 24.585 24.585 0 0 1-4.831-1.244.75.75 0 0 1-.298-1.205A8.217 8.217 0 0 0 5.25 9.75V9Zm4.502 8.9a2.25 2.25 0 1 0 4.496 0 25.057 25.057 0 0 1-4.496 0Z'
142 |         clipRule='evenodd'
143 |       />
144 |     </svg>
145 |   );
146 | }
147 | 
148 | export function Boost({ className = 'h-5 w-5' }: IconProps): JSX.Element {
149 |   return (
150 |     <svg
151 |       xmlns='http://www.w3.org/2000/svg'
152 |       viewBox='0 0 24 24'
153 |       fill='currentColor'
154 |       className={className}
155 |     >
156 |       <path
157 |         fillRule='evenodd'
158 |         d='M10.5 3.798v5.02a3 3 0 0 1-.879 2.121l-2.377 2.377a9.845 9.845 0 0 1 5.091 1.013 8.315 8.315 0 0 0 5.713.636l.285-.071-3.954-3.955a3 3 0 0 1-.879-2.121v-5.02a23.614 23.614 0 0 0-3 0Zm4.5.138a.75.75 0 0 0 .093-1.495A24.837 24.837 0 0 0 12 2.25a25.048 25.048 0 0 0-3.093.191A.75.75 0 0 0 9 3.936v4.882a1.5 1.5 0 0 1-.44 1.06l-6.293 6.294c-1.62 1.621-.903 4.475 1.471 4.88 2.686.46 5.447.698 8.262.698 2.816 0 5.576-.239 8.262-.697 2.373-.406 3.092-3.26 1.47-4.881L15.44 9.879A1.5 1.5 0 0 1 15 8.818V3.936Z'
159 |         clipRule='evenodd'
160 |       />
161 |     </svg>
162 |   );
163 | }
164 | 
165 | export function FaceSmile({ className = 'h-5 w-5' }: IconProps): JSX.Element {
166 |   return (
167 |     <svg
168 |       xmlns='http://www.w3.org/2000/svg'
169 |       viewBox='0 0 24 24'
170 |       fill='currentColor'
171 |       className={className}
172 |     >
173 |       <path
174 |         fillRule='evenodd'
175 |         d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z'
176 |         clipRule='evenodd'
177 |       />
178 |     </svg>
179 |   );
180 | }
181 | 
182 | export function FolderPlus({ className = 'h-5 w-5' }: IconProps): JSX.Element {
183 |   return (
184 |     <svg
185 |       xmlns='http://www.w3.org/2000/svg'
186 |       viewBox='0 0 24 24'
187 |       fill='currentColor'
188 |       className={className}
189 |     >
190 |       <path
191 |         fillRule='evenodd'
192 |         d='M19.5 21a3 3 0 0 0 3-3V9a3 3 0 0 0-3-3h-5.379a.75.75 0 0 1-.53-.22L11.47 3.66A2.25 2.25 0 0 0 9.879 3H4.5a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3h15Zm-6.75-10.5a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V10.5Z'
193 |         clipRule='evenodd'
194 |       />
195 |     </svg>
196 |   );
197 | }
198 | 
199 | export function Gear({ className = 'h-5 w-5' }: IconProps): JSX.Element {
200 |   return (
201 |     <svg
202 |       xmlns='http://www.w3.org/2000/svg'
203 |       viewBox='0 0 24 24'
204 |       fill='currentColor'
205 |       className={className}
206 |     >
207 |       <path
208 |         fillRule='evenodd'
209 |         d='M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 0 0-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 0 0-2.282.819l-.922 1.597a1.875 1.875 0 0 0 .432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 0 0 0 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 0 0-.432 2.385l.922 1.597a1.875 1.875 0 0 0 2.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 0 0 2.28-.819l.923-1.597a1.875 1.875 0 0 0-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 0 0 0-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 0 0-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 0 0-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 0 0-1.85-1.567h-1.843ZM12 15.75a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5Z'
210 |         clipRule='evenodd'
211 |       />
212 |     </svg>
213 |   );
214 | }
215 | 
216 | export function LeaveServer({ className = 'h-5 w-5' }: IconProps): JSX.Element {
217 |   return (
218 |     <svg
219 |       xmlns='http://www.w3.org/2000/svg'
220 |       viewBox='0 0 24 24'
221 |       fill='currentColor'
222 |       className={className}
223 |     >
224 |       <path
225 |         fillRule='evenodd'
226 |         d='M7.5 3.75A1.5 1.5 0 0 0 6 5.25v13.5a1.5 1.5 0 0 0 1.5 1.5h6a1.5 1.5 0 0 0 1.5-1.5V15a.75.75 0 0 1 1.5 0v3.75a3 3 0 0 1-3 3h-6a3 3 0 0 1-3-3V5.25a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3V9A.75.75 0 0 1 15 9V5.25a1.5 1.5 0 0 0-1.5-1.5h-6Zm10.72 4.72a.75.75 0 0 1 1.06 0l3 3a.75.75 0 0 1 0 1.06l-3 3a.75.75 0 1 1-1.06-1.06l1.72-1.72H9a.75.75 0 0 1 0-1.5h10.94l-1.72-1.72a.75.75 0 0 1 0-1.06Z'
227 |         clipRule='evenodd'
228 |       />
229 |     </svg>
230 |   );
231 | }
232 | 
233 | export function Pen({ className = 'h-5 w-5' }: IconProps): JSX.Element {
234 |   return (
235 |     <svg
236 |       xmlns='http://www.w3.org/2000/svg'
237 |       viewBox='0 0 24 24'
238 |       fill='currentColor'
239 |       className={className}
240 |     >
241 |       <path d='M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z' />
242 |     </svg>
243 |   );
244 | }
245 | 
246 | export function PersonAdd({ className = 'h-5 w-5' }: IconProps): JSX.Element {
247 |   return (
248 |     <svg
249 |       xmlns='http://www.w3.org/2000/svg'
250 |       viewBox='0 0 24 24'
251 |       fill='currentColor'
252 |       className={className}
253 |     >
254 |       <path d='M5.25 6.375a4.125 4.125 0 1 1 8.25 0 4.125 4.125 0 0 1-8.25 0ZM2.25 19.125a7.125 7.125 0 0 1 14.25 0v.003l-.001.119a.75.75 0 0 1-.363.63 13.067 13.067 0 0 1-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 0 1-.364-.63l-.001-.122ZM18.75 7.5a.75.75 0 0 0-1.5 0v2.25H15a.75.75 0 0 0 0 1.5h2.25v2.25a.75.75 0 0 0 1.5 0v-2.25H21a.75.75 0 0 0 0-1.5h-2.25V7.5Z' />
255 |     </svg>
256 |   );
257 | }
258 | 
259 | export function PlusCircle({ className = 'h-5 w-5' }: IconProps): JSX.Element {
260 |   return (
261 |     <svg
262 |       xmlns='http://www.w3.org/2000/svg'
263 |       viewBox='0 0 24 24'
264 |       fill='currentColor'
265 |       className={className}
266 |     >
267 |       <path
268 |         fillRule='evenodd'
269 |         d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z'
270 |         clipRule='evenodd'
271 |       />
272 |     </svg>
273 |   );
274 | }
275 | 
276 | export function Shield({ className = 'h-5 w-5' }: IconProps): JSX.Element {
277 |   return (
278 |     <svg
279 |       xmlns='http://www.w3.org/2000/svg'
280 |       viewBox='0 0 24 24'
281 |       fill='currentColor'
282 |       className={className}
283 |     >
284 |       <path
285 |         fillRule='evenodd'
286 |         d='M12.516 2.17a.75.75 0 0 0-1.032 0 11.209 11.209 0 0 1-7.877 3.08.75.75 0 0 0-.722.515A12.74 12.74 0 0 0 2.25 9.75c0 5.942 4.064 10.933 9.563 12.348a.749.749 0 0 0 .374 0c5.499-1.415 9.563-6.406 9.563-12.348 0-1.39-.223-2.73-.635-3.985a.75.75 0 0 0-.722-.516l-.143.001c-2.996 0-5.717-1.17-7.734-3.08Zm3.094 8.016a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z'
287 |         clipRule='evenodd'
288 |       />
289 |     </svg>
290 |   );
291 | }
292 | 
293 | export function SpeakerMuted({
294 |   className = 'h-5 w-5',
295 | }: IconProps): JSX.Element {
296 |   return (
297 |     <svg
298 |       xmlns='http://www.w3.org/2000/svg'
299 |       viewBox='0 0 24 24'
300 |       fill='currentColor'
301 |       className={className}
302 |     >
303 |       <path d='M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM17.78 9.22a.75.75 0 1 0-1.06 1.06L18.44 12l-1.72 1.72a.75.75 0 1 0 1.06 1.06l1.72-1.72 1.72 1.72a.75.75 0 1 0 1.06-1.06L20.56 12l1.72-1.72a.75.75 0 1 0-1.06-1.06l-1.72 1.72-1.72-1.72Z' />
304 |     </svg>
305 |   );
306 | }
307 | 
308 | export function Mic({ className = 'w-full h-full' }: IconProps): JSX.Element {
309 |   return (
310 |     <svg
311 |       xmlns='http://www.w3.org/2000/svg'
312 |       viewBox='0 0 24 24'
313 |       fill='currentColor'
314 |       className={className}
315 |     >
316 |       <path d='M8.25 4.5a3.75 3.75 0 117.5 0v8.25a3.75 3.75 0 11-7.5 0V4.5z' />
317 |       <path d='M6 10.5a.75.75 0 01.75.75v1.5a5.25 5.25 0 1010.5 0v-1.5a.75.75 0 011.5 0v1.5a6.751 6.751 0 01-6 6.709v2.291h3a.75.75 0 010 1.5h-7.5a.75.75 0 010-1.5h3v-2.291a6.751 6.751 0 01-6-6.709v-1.5A.75.75 0 016 10.5z' />
318 |     </svg>
319 |   );
320 | }
321 | 
322 | export function Speaker({
323 |   className = 'w-full h-full',
324 | }: IconProps): JSX.Element {
325 |   return (
326 |     <svg
327 |       xmlns='http://www.w3.org/2000/svg'
328 |       viewBox='0 0 24 24'
329 |       fill='currentColor'
330 |       className={className}
331 |     >
332 |       <path d='M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 001.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06zM18.584 5.106a.75.75 0 011.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 11-1.06-1.06 8.25 8.25 0 000-11.668.75.75 0 010-1.06z' />
333 |       <path d='M15.932 7.757a.75.75 0 011.061 0 6 6 0 010 8.486.75.75 0 01-1.06-1.061 4.5 4.5 0 000-6.364.75.75 0 010-1.06z' />
334 |     </svg>
335 |   );
336 | }
337 | 
338 | export function Present({
339 |   className = 'w-full h-full',
340 | }: IconProps): JSX.Element {
341 |   return (
342 |     <svg
343 |       xmlns='http://www.w3.org/2000/svg'
344 |       viewBox='0 0 24 24'
345 |       fill='currentColor'
346 |       className={className}
347 |     >
348 |       <path d='M9.375 3a1.875 1.875 0 0 0 0 3.75h1.875v4.5H3.375A1.875 1.875 0 0 1 1.5 9.375v-.75c0-1.036.84-1.875 1.875-1.875h3.193A3.375 3.375 0 0 1 12 2.753a3.375 3.375 0 0 1 5.432 3.997h3.943c1.035 0 1.875.84 1.875 1.875v.75c0 1.036-.84 1.875-1.875 1.875H12.75v-4.5h1.875a1.875 1.875 0 1 0-1.875-1.875V6.75h-1.5V4.875C11.25 3.839 10.41 3 9.375 3ZM11.25 12.75H3v6.75a2.25 2.25 0 0 0 2.25 2.25h6v-9ZM12.75 12.75v9h6.75a2.25 2.25 0 0 0 2.25-2.25v-6.75h-9Z' />
349 |     </svg>
350 |   );
351 | }
352 | 
353 | export function GIF({ className = 'w-full h-full' }: IconProps): JSX.Element {
354 |   return (
355 |     <svg
356 |       xmlns='http://www.w3.org/2000/svg'
357 |       viewBox='0 0 24 24'
358 |       fill='currentColor'
359 |       className={className}
360 |     >
361 |       <path
362 |         fillRule='evenodd'
363 |         d='M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm9 4.5a.75.75 0 0 0-1.5 0v7.5a.75.75 0 0 0 1.5 0v-7.5Zm1.5 0a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 0 1.5H16.5v2.25H18a.75.75 0 0 1 0 1.5h-1.5v3a.75.75 0 0 1-1.5 0v-7.5ZM6.636 9.78c.404-.575.867-.78 1.25-.78s.846.205 1.25.78a.75.75 0 0 0 1.228-.863C9.738 8.027 8.853 7.5 7.886 7.5c-.966 0-1.852.527-2.478 1.417-.62.882-.908 2-.908 3.083 0 1.083.288 2.201.909 3.083.625.89 1.51 1.417 2.477 1.417.967 0 1.852-.527 2.478-1.417a.75.75 0 0 0 .136-.431V12a.75.75 0 0 0-.75-.75h-1.5a.75.75 0 0 0 0 1.5H9v1.648c-.37.44-.774.602-1.114.602-.383 0-.846-.205-1.25-.78C6.226 13.638 6 12.837 6 12c0-.837.226-1.638.636-2.22Z'
364 |         clipRule='evenodd'
365 |       />
366 |     </svg>
367 |   );
368 | }
369 | 
370 | export function Emoji({ className = 'w-full h-full' }: IconProps): JSX.Element {
371 |   return (
372 |     <svg
373 |       xmlns='http://www.w3.org/2000/svg'
374 |       viewBox='0 0 24 24'
375 |       fill='currentColor'
376 |       className={className}
377 |     >
378 |       <path
379 |         fillRule='evenodd'
380 |         d='M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm2.023 6.828a.75.75 0 1 0-1.06-1.06 3.75 3.75 0 0 1-5.304 0 .75.75 0 0 0-1.06 1.06 5.25 5.25 0 0 0 7.424 0Z'
381 |         clipRule='evenodd'
382 |       />
383 |     </svg>
384 |   );
385 | }
386 | 
387 | export function Thread({ className = 'w-5 h-5' }: IconProps): JSX.Element {
388 |   return (
389 |     <svg
390 |       xmlns='http://www.w3.org/2000/svg'
391 |       viewBox='0 0 24 24'
392 |       fill='currentColor'
393 |       className={className}
394 |     >
395 |       <path
396 |         fillRule='evenodd'
397 |         d='M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z'
398 |         clipRule='evenodd'
399 |       />
400 |     </svg>
401 |   );
402 | }
403 | 
404 | export function Apps({ className = 'w-5 h-5' }: IconProps): JSX.Element {
405 |   return (
406 |     <svg
407 |       xmlns='http://www.w3.org/2000/svg'
408 |       viewBox='0 0 24 24'
409 |       fill='currentColor'
410 |       className={className}
411 |     >
412 |       <path d='M6 3a3 3 0 0 0-3 3v2.25a3 3 0 0 0 3 3h2.25a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM15.75 3a3 3 0 0 0-3 3v2.25a3 3 0 0 0 3 3H18a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3h-2.25ZM6 12.75a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h2.25a3 3 0 0 0 3-3v-2.25a3 3 0 0 0-3-3H6ZM17.625 13.5a.75.75 0 0 0-1.5 0v2.625H13.5a.75.75 0 0 0 0 1.5h2.625v2.625a.75.75 0 0 0 1.5 0v-2.625h2.625a.75.75 0 0 0 0-1.5h-2.625V13.5Z' />
413 |     </svg>
414 |   );
415 | }
416 | 
417 | export function ArrowUturnLeft({
418 |   className = 'w-5 h-5',
419 | }: IconProps): JSX.Element {
420 |   return (
421 |     <svg
422 |       xmlns='http://www.w3.org/2000/svg'
423 |       fill='none'
424 |       viewBox='0 0 24 24'
425 |       strokeWidth={1.5}
426 |       stroke='currentColor'
427 |       className={className}
428 |     >
429 |       <path
430 |         strokeLinecap='round'
431 |         strokeLinejoin='round'
432 |         d='M9 15 3 9m0 0 6-6M3 9h12a6 6 0 0 1 0 12h-3'
433 |       />
434 |     </svg>
435 |   );
436 | }
437 | 
438 | export function CloseMark({ className = 'w-5 h-5' }: IconProps): JSX.Element {
439 |   return (
440 |     <svg
441 |       xmlns='http://www.w3.org/2000/svg'
442 |       fill='none'
443 |       viewBox='0 0 24 24'
444 |       strokeWidth={2}
445 |       stroke='currentColor'
446 |       className={className}
447 |     >
448 |       <path
449 |         strokeLinecap='round'
450 |         strokeLinejoin='round'
451 |         d='M6 18 18 6M6 6l12 12'
452 |       />
453 |     </svg>
454 |   );
455 | }
456 | 


--------------------------------------------------------------------------------