38648ae5f4
- Add SessionManager class to handle PTY sessions with WebSocket connections. - Implement methods for creating, retrieving, and destroying sessions. - Handle PTY output and WebSocket messages for terminal interaction. - Ensure graceful session destruction and cleanup. feat: initialize web application with Next.js and Tailwind CSS - Create initial Next.js application structure with TypeScript support. - Set up Tailwind CSS for styling with custom theme configurations. - Add ESLint configuration for code quality and consistency. feat: implement chat API and UI components - Create chat API route to handle chat requests and responses. - Develop chat layout with sidebar, header, chat window, and input components. - Integrate Zustand for state management of conversations and messages. - Add utility functions for formatting dates and managing class names. chore: add environment variables and configuration files - Create .env.example for environment variable setup. - Add configuration files for PostCSS, Tailwind CSS, and TypeScript. - Set up package.json with necessary dependencies and scripts for development.
67 lines
2.1 KiB
TypeScript
67 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import * as Toast from "@radix-ui/react-toast";
|
|
import { createContext, useContext, useState, useCallback } from "react";
|
|
import { X } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ToastMessage {
|
|
id: string;
|
|
title: string;
|
|
description?: string;
|
|
variant?: "default" | "destructive";
|
|
}
|
|
|
|
interface ToastContextValue {
|
|
toast: (message: Omit<ToastMessage, "id">) => void;
|
|
}
|
|
|
|
const ToastContext = createContext<ToastContextValue>({ toast: () => {} });
|
|
|
|
export function ToastProvider({ children }: { children: React.ReactNode }) {
|
|
const [toasts, setToasts] = useState<ToastMessage[]>([]);
|
|
|
|
const toast = useCallback((message: Omit<ToastMessage, "id">) => {
|
|
const id = Math.random().toString(36).slice(2);
|
|
setToasts((prev) => [...prev, { ...message, id }]);
|
|
setTimeout(() => {
|
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
}, 5000);
|
|
}, []);
|
|
|
|
return (
|
|
<ToastContext.Provider value={{ toast }}>
|
|
<Toast.Provider swipeDirection="right">
|
|
{children}
|
|
{toasts.map((t) => (
|
|
<Toast.Root
|
|
key={t.id}
|
|
className={cn(
|
|
"flex items-start gap-3 p-4 rounded-lg shadow-lg border",
|
|
"bg-surface-800 border-surface-700 text-surface-100",
|
|
"data-[state=open]:animate-slide-up",
|
|
t.variant === "destructive" && "border-red-800 bg-red-950"
|
|
)}
|
|
open
|
|
>
|
|
<div className="flex-1">
|
|
<Toast.Title className="text-sm font-medium">{t.title}</Toast.Title>
|
|
{t.description && (
|
|
<Toast.Description className="text-xs text-surface-400 mt-0.5">
|
|
{t.description}
|
|
</Toast.Description>
|
|
)}
|
|
</div>
|
|
<Toast.Close className="text-surface-500 hover:text-surface-100">
|
|
<X className="w-4 h-4" />
|
|
</Toast.Close>
|
|
</Toast.Root>
|
|
))}
|
|
<Toast.Viewport className="fixed bottom-4 right-4 flex flex-col gap-2 w-80 z-50" />
|
|
</Toast.Provider>
|
|
</ToastContext.Provider>
|
|
);
|
|
}
|
|
|
|
export const useToast = () => useContext(ToastContext);
|