Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DNM]feat(demo): refine header action and support RTM presence #461

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
+142 −88
Draft

[DNM]feat(demo): refine header action and support RTM presence #461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion demo/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,15 @@ import { StoreProvider } from "@/store"
import type { Metadata, Viewport } from "next"
import "./global.css"
import { Toaster } from "@/components/ui/sonner"
import { Roboto } from "next/font/google"
import { cn } from "@/lib/utils"

const roboto = Roboto({
subsets: ["latin"],
weight: ["400", "700"],
variable: "--font-roboto",
display: "swap",
})

export const metadata: Metadata = {
title: "TEN Agent",
Expand Down Expand Up @@ -29,7 +38,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className="dark">
<body className={cn("dark", "antialiased", roboto.variable)}>
{/* <ConfigProvider
theme={{
components: {
Expand Down
16 changes: 16 additions & 0 deletions demo/src/components/Icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,22 @@ import * as React from "react"

import { cn } from "@/lib/utils"

export function TenLogo(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 48 34"
fill="none"
{...props}
>
<path
d="M40.0724 0.706698H40.1247L39.3918 0.052348H38.5543L8.9515 0L8.74211 0.602002L0 25.9646L7.32871 34L16.6205 33.9738L25.8861 7.0408L16.097 6.98845L9.57968 0.602002L39.2348 0.706698L46.4588 7.66898L35.0208 7.25019L25.8075 33.9738L38.2664 33.843L47.2702 7.69515L40.0724 0.706698Z"
fill="currentColor"
/>
</svg>
)
}

export const GitHubIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
Expand Down
9 changes: 5 additions & 4 deletions demo/src/components/Layout/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { LogoIcon, SmallLogoIcon } from "@/components/Icon"
import { HeaderRoomInfo, HeaderActions } from "./HeaderComponents"
// import { LogoIcon, SmallLogoIcon } from "@/components/Icon"
import { HeaderActions } from "./HeaderComponents"
import { TenLogo } from "@/components/Icon"
import { cn } from "@/lib/utils"

export default function Header(props: { className?: string }) {
Expand All @@ -13,12 +14,12 @@ export default function Header(props: { className?: string }) {
className,
)}
>
<div className="flex items-center space-x-2">
<div className="font-roboto flex items-center space-x-2">
<TenLogo className="h-3 md:h-5" />
{/* <LogoIcon className="hidden h-5 md:block" />
<SmallLogoIcon className="block h-4 md:hidden" /> */}
<h1 className="text-sm font-bold md:text-xl">TEN Agent</h1>
</div>
<HeaderRoomInfo />
<HeaderActions />
</header>
</>
Expand Down
71 changes: 48 additions & 23 deletions demo/src/components/Layout/HeaderComponents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,61 +13,81 @@ import {
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
import { InfoIcon, GitHubIcon, PaletteIcon } from "@/components/Icon"
import { Button } from "@/components/ui/button"
import { GitHubIcon, PaletteIcon } from "@/components/Icon"
import { MessagesSquareIcon, MessageSquareOffIcon } from "lucide-react"
import {
useAppSelector,
useAppDispatch,
GITHUB_URL,
COLOR_LIST,
getRandomUserId,
getRandomChannel,
genRandomString,
} from "@/common"
import { setThemeColor } from "@/store/reducers/global"
import { setThemeColor, setOptions } from "@/store/reducers/global"
import { cn } from "@/lib/utils"
import { HexColorPicker } from "react-colorful"
import dynamic from "next/dynamic"

import styles from "./Header.module.css"

export function HeaderRoomInfo() {
const dispatch = useAppDispatch()

const options = useAppSelector((state) => state.global.options)
const { channel, userId } = options

const roomConnected = useAppSelector((state) => state.global.roomConnected)
const agentConnected = useAppSelector((state) => state.global.agentConnected)

const roomConnectedText = React.useMemo(() => {
return roomConnected ? "TRUE" : "FALSE"
}, [roomConnected])

const agentConnectedText = React.useMemo(() => {
return agentConnected ? "TRUE" : "FALSE"
}, [agentConnected])
const handleRegenerateChannelAndUserId = () => {
const newOptions = {
userName: genRandomString(8),
channel: getRandomChannel(),
userId: getRandomUserId(),
}
dispatch(setOptions(newOptions))
}

return (
<>
<TooltipProvider delayDuration={200}>
<Tooltip>
<TooltipTrigger className="flex items-center space-x-2 text-lg font-semibold">
<InfoIcon className="h-4 w-4 md:h-5 md:w-5" />
<span className="hidden text-sm md:inline-block">
Channel Name:{" "}
</span>
{channel ? (
<MessagesSquareIcon className="h-4 w-4 md:h-5 md:w-5" />
) : (
<MessageSquareOffIcon className="h-4 w-4 md:h-5 md:w-5" />
)}
<span className="max-w-24 truncate text-ellipsis text-sm md:text-base">
{channel}
</span>
</TooltipTrigger>
<TooltipContent className="bg-[var(--background-color,#1C1E22)] text-gray-600">
<TooltipContent
className="bg-[var(--background-color,#1C1E22)] text-gray-600"
align="end"
>
<table className="border-collapse">
<tbody>
<tr>
<td className="pr-2 font-bold text-primary">INFO</td>
<td></td>
<td>
<Button
size="sm"
disabled={roomConnected || agentConnected}
onClick={handleRegenerateChannelAndUserId}
>
Regenerate
</Button>
</td>
</tr>
<tr>
<td className="pr-2">Room:</td>
<td className="pr-2">ChannelName</td>
<td className="text-[#0888FF]">{channel}</td>
</tr>
<tr>
<td className="pr-2">Participant:</td>
<td className="pr-2">UserID</td>
<td className="text-[#0888FF]">{userId}</td>
</tr>
<tr>
Expand All @@ -81,12 +101,16 @@ export function HeaderRoomInfo() {
</td>
</tr>
<tr>
<td className="pr-2">Room connected:</td>
<td className="text-[#0888FF]">{roomConnectedText}</td>
<td className="pr-2">Room Status</td>
<td className="text-[#0888FF]">
{roomConnected ? "Connected" : "Disconnected"}
</td>
</tr>
<tr>
<td className="pr-2">Agent connected:</td>
<td className="text-[#0888FF]">{agentConnectedText}</td>
<td className="pr-2">Agent Status</td>
<td className="text-[#0888FF]">
{agentConnected ? "Connected" : "Disconnected"}
</td>
</tr>
</tbody>
</table>
Expand All @@ -104,8 +128,9 @@ export function HeaderActions() {
<GitHubIcon className="h-4 w-4 md:h-5 md:w-5" />
<span className="sr-only">GitHub</span>
</NextLink>
<ThemePalettePopover />
<NetworkIndicator />
<HeaderRoomInfo />
{/* <ThemePalettePopover />
<NetworkIndicator /> */}
</div>
)
}
Expand Down
123 changes: 63 additions & 60 deletions demo/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,67 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
darkMode: ["class"],
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",

// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
}
}
// Or if using `src` directory:
"./src/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
colors: {
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
chart: {
1: "hsl(var(--chart-1))",
2: "hsl(var(--chart-2))",
3: "hsl(var(--chart-3))",
4: "hsl(var(--chart-4))",
5: "hsl(var(--chart-5))",
},
},
fontFamily: {
roboto: "var(--font-roboto)",
},
},
plugins: [require("tailwindcss-animate")],
};
},
plugins: [require("tailwindcss-animate")],
}
Loading