diff --git a/components.json b/components.json
index 7d79574..4192276 100644
--- a/components.json
+++ b/components.json
@@ -11,6 +11,6 @@
},
"aliases": {
"components": "@/components",
- "utils": "@/utils/index.ts"
+ "utils": "@/utils/index"
}
}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..83afb49
--- /dev/null
+++ b/index.html
@@ -0,0 +1,11 @@
+
+
+
+
+
+ WebChat
+
+
+ WebChat Dev Page
+
+
\ No newline at end of file
diff --git a/package.json b/package.json
index e69b39e..c85557b 100644
--- a/package.json
+++ b/package.json
@@ -85,8 +85,10 @@
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
+ "@radix-ui/react-slot": "^1.0.2",
"class-variance-authority": "^0.6.1",
"clsx": "^1.2.1",
+ "peerjs": "^1.4.7",
"tailwind-merge": "^1.13.2",
"tailwindcss-animate": "^1.0.6",
"type-fest": "^3.13.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5632aad..bd1f1d7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,12 +4,18 @@ dependencies:
'@radix-ui/react-icons':
specifier: ^1.3.0
version: 1.3.0(react@18.2.0)
+ '@radix-ui/react-slot':
+ specifier: ^1.0.2
+ version: 1.0.2(@types/react@18.2.14)(react@18.2.0)
class-variance-authority:
specifier: ^0.6.1
version: 0.6.1
clsx:
specifier: ^1.2.1
version: 1.2.1
+ peerjs:
+ specifier: ^1.4.7
+ version: 1.4.7
tailwind-merge:
specifier: ^1.13.2
version: 1.13.2
@@ -356,7 +362,6 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
regenerator-runtime: 0.13.11
- dev: true
/@babel/template@7.22.5:
resolution: {integrity: sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==}
@@ -1046,6 +1051,20 @@ packages:
config-chain: 1.1.13
dev: true
+ /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.14)(react@18.2.0):
+ resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.21.0
+ '@types/react': 18.2.14
+ react: 18.2.0
+ dev: false
+
/@radix-ui/react-icons@1.3.0(react@18.2.0):
resolution: {integrity: sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==}
peerDependencies:
@@ -1054,6 +1073,21 @@ packages:
react: 18.2.0
dev: false
+ /@radix-ui/react-slot@1.0.2(@types/react@18.2.14)(react@18.2.0):
+ resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.21.0
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+ '@types/react': 18.2.14
+ react: 18.2.0
+ dev: false
+
/@rollup/pluginutils@4.2.1:
resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
engines: {node: '>= 8.0.0'}
@@ -1192,6 +1226,12 @@ packages:
- supports-color
dev: true
+ /@swc/helpers@0.3.17:
+ resolution: {integrity: sha512-tb7Iu+oZ+zWJZ3HJqwx8oNwSDIU440hmVMDPhpACWQWnrZHK99Bxs70gT1L2dnr5Hg50ZRWEFkQCAnOVVV0z1Q==}
+ dependencies:
+ tslib: 2.6.0
+ dev: false
+
/@szmarczak/http-timer@5.0.1:
resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
engines: {node: '>=14.16'}
@@ -1240,7 +1280,6 @@ packages:
/@types/prop-types@15.7.5:
resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
- dev: true
/@types/react-dom@18.2.7:
resolution: {integrity: sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==}
@@ -1254,11 +1293,9 @@ packages:
'@types/prop-types': 15.7.5
'@types/scheduler': 0.16.3
csstype: 3.1.2
- dev: true
/@types/scheduler@0.16.3:
resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
- dev: true
/@types/semver@7.5.0:
resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==}
@@ -2434,7 +2471,6 @@ packages:
/csstype@3.1.2:
resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
- dev: true
/dargs@7.0.0:
resolution: {integrity: sha512-2iy1EkLdlBzQGvbweYRFxmFath8+K7+AKB0TlhHWkNuH+TmovaMH/Wp7V7R4u7f4SnX3OgLsU9t1NI9ioDnUpg==}
@@ -3251,6 +3287,10 @@ packages:
engines: {node: '>=6'}
dev: true
+ /eventemitter3@4.0.7:
+ resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
+ dev: false
+
/events@3.3.0:
resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
engines: {node: '>=0.8.x'}
@@ -5335,6 +5375,20 @@ packages:
resolve-protobuf-schema: 2.1.0
dev: true
+ /peerjs-js-binarypack@1.0.1:
+ resolution: {integrity: sha512-N6aeia3NhdpV7kiGxJV5xQiZZCVEEVjRz2T2C6UZQiBkHWHzUv/oWA4myQLcwBwO8LUoR1KWW5oStvwVesmfCg==}
+ dev: false
+
+ /peerjs@1.4.7:
+ resolution: {integrity: sha512-dWE2HIGvJO0Hm8lYHJiO/5OWl8xYtGcAuU08To1HMIfhh76ULzkCS3NIQO/PZm4noO1RhaGTkQaQ6sbAss6/Tg==}
+ engines: {node: '>= 10'}
+ dependencies:
+ '@swc/helpers': 0.3.17
+ eventemitter3: 4.0.7
+ peerjs-js-binarypack: 1.0.1
+ webrtc-adapter: 7.7.1
+ dev: false
+
/pend@1.2.0:
resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
dev: true
@@ -5717,7 +5771,6 @@ packages:
/regenerator-runtime@0.13.11:
resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
- dev: true
/regexp.prototype.flags@1.5.0:
resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
@@ -5894,6 +5947,13 @@ packages:
fsevents: 2.3.2
dev: true
+ /rtcpeerconnection-shim@1.2.15:
+ resolution: {integrity: sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==}
+ engines: {node: '>=6.0.0', npm: '>=3.10.0'}
+ dependencies:
+ sdp: 2.12.0
+ dev: false
+
/run-applescript@5.0.0:
resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
engines: {node: '>=12'}
@@ -5953,6 +6013,10 @@ packages:
loose-envify: 1.4.0
dev: true
+ /sdp@2.12.0:
+ resolution: {integrity: sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==}
+ dev: false
+
/semver-diff@4.0.0:
resolution: {integrity: sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==}
engines: {node: '>=12'}
@@ -6608,7 +6672,6 @@ packages:
/tslib@2.6.0:
resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
- dev: true
/tsutils@3.21.0(typescript@5.1.6):
resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -6995,6 +7058,14 @@ packages:
resolution: {integrity: sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==}
dev: true
+ /webrtc-adapter@7.7.1:
+ resolution: {integrity: sha512-TbrbBmiQBL9n0/5bvDdORc6ZfRY/Z7JnEj+EYOD1ghseZdpJ+nF2yx14k3LgQKc7JZnG7HAcL+zHnY25So9d7A==}
+ engines: {node: '>=6.0.0', npm: '>=3.10.0'}
+ dependencies:
+ rtcpeerconnection-shim: 1.2.15
+ sdp: 2.12.0
+ dev: false
+
/when@3.7.7:
resolution: {integrity: sha1-q6A/w7tzbWyIsJHQE9io5ZDYRxg=}
dev: true
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 49c7bff..1d9698f 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,11 +1,15 @@
import Logo from '@/components/Logo'
+import { Textarea } from '@/components/ui/textarea'
+import { Button } from '@/components/ui/button'
export default function Sidebar() {
return (
- Sidebar
+ Sidebar123
This is the sidebar page
+
+
)
}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
new file mode 100644
index 0000000..2b5b161
--- /dev/null
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '@/utils/index'
+
+const buttonVariants = cva(
+ 'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+ destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+ outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+ secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+ ghost: 'hover:bg-accent hover:text-accent-foreground',
+ link: 'text-primary underline-offset-4 hover:underline'
+ },
+ size: {
+ default: 'h-9 px-4 py-2',
+ sm: 'h-8 rounded-md px-3 text-xs',
+ lg: 'h-10 rounded-md px-8',
+ icon: 'h-9 w-9'
+ }
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default'
+ }
+ }
+)
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : 'button'
+ return
+ }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..2617ccd
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+
+import { cn } from '@/utils/index'
+
+export interface TextareaProps extends React.TextareaHTMLAttributes {}
+
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+ return (
+
+ )
+})
+Textarea.displayName = 'Textarea'
+
+export { Textarea }
diff --git a/src/createShadowRoot.ts b/src/createShadowRoot.ts
index e2160d6..2ffe076 100644
--- a/src/createShadowRoot.ts
+++ b/src/createShadowRoot.ts
@@ -10,8 +10,8 @@ export interface RootOptions {
const createShadowRoot = (name: string, options: RootOptions): Root => {
const { mode = 'open', style = '', script = '' } = options ?? {}
- const shadowApp = createElement(`<${name}>`)
- const shadowRoot = shadowApp.attachShadow({ mode })
+ const shadowHost = createElement(`<${name}>`)
+ const shadowRoot = shadowHost.attachShadow({ mode })
const appRoot = createElement(``)
const appStyle = style && createElement(``)
const appScript = script && createElement(``)
@@ -22,7 +22,7 @@ const createShadowRoot = (name: string, options: RootOptions): Root => {
return {
...reactRoot,
render: (children: ReactNode) => {
- document.body.appendChild(shadowApp)
+ document.body.appendChild(shadowHost)
reactRoot.render(children)
}
}
diff --git a/src/index.css b/src/index.css
index ad472c1..e453cc6 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,78 +1,78 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
-
+
@layer base {
- :root {
+ :host {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
-
+
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
-
+
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
-
+
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
-
+
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
-
+
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
-
+
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
-
+
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
-
+
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
-
+
--ring: 215 20.2% 65.1%;
-
+
--radius: 0.5rem;
}
-
+
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
-
+
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
-
+
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
-
+
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
-
+
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
-
+
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
-
+
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
-
+
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
-
+
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 85.7% 97.3%;
-
+
--ring: 217.2 32.6% 17.5%;
}
}
-
+
@layer base {
* {
@apply border-border;
}
- body {
+ :host {
@apply bg-background text-foreground;
}
-}
\ No newline at end of file
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2944407..6e0f7fc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,7 +1,7 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
- content: ['./pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/*.{ts,tsx}'],
+ content: ['./src/**/*.{ts,tsx}'],
theme: {
container: {
center: true,
diff --git a/vite.config.ts b/vite.config.ts
index e693a1d..75be72b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,6 +7,9 @@ import manifest from './manifest'
import packageJson from './package.json'
export default defineConfig({
+ server: {
+ open: './index.html'
+ },
resolve: {
alias: {
'@': path.resolve(__dirname, './src')