new changes
This commit is contained in:
commit
b980f7a052
3
.bolt/config.json
Normal file
3
.bolt/config.json
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"template": "bolt-vite-react-ts"
|
||||||
|
}
|
||||||
5
.bolt/prompt
Normal file
5
.bolt/prompt
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
|
||||||
|
|
||||||
|
By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
|
||||||
|
|
||||||
|
Use icons from lucide-react for logos.
|
||||||
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
.env
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import js from '@eslint/js';
|
||||||
|
import globals from 'globals';
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>IT Ticket Management System</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
4066
package-lock.json
generated
Normal file
4066
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
36
package.json
Normal file
36
package.json
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"name": "vite-react-typescript-starter",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-react": "^0.263.1",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^8.57.0",
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"globals": "^13.20.0",
|
||||||
|
"postcss": "^8.4.24",
|
||||||
|
"tailwindcss": "^3.3.0",
|
||||||
|
"typescript": "^5.0.2",
|
||||||
|
"typescript-eslint": "^7.13.1",
|
||||||
|
"vite": "^4.4.5"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=14.18.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
171
src/App.tsx
Normal file
171
src/App.tsx
Normal file
|
|
@ -0,0 +1,171 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Computer, MessageSquare, History, Plus } from 'lucide-react';
|
||||||
|
import { TicketForm } from './components/TicketForm';
|
||||||
|
import { TicketHistory } from './components/TicketHistory';
|
||||||
|
import { ChatInterface } from './components/ChatInterface';
|
||||||
|
import { TicketConfirmation } from './components/TicketConfirmation';
|
||||||
|
import { apiService } from './services/apiService';
|
||||||
|
import { Ticket } from './types';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [activeTab, setActiveTab] = useState<'new' | 'history' | 'chat'>('new');
|
||||||
|
const [tickets, setTickets] = useState<Ticket[]>([]);
|
||||||
|
const [showConfirmation, setShowConfirmation] = useState<Ticket | null>(null);
|
||||||
|
const [isLoadingTickets, setIsLoadingTickets] = useState(false);
|
||||||
|
|
||||||
|
// Load tickets from backend on component mount
|
||||||
|
useEffect(() => {
|
||||||
|
loadTickets();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadTickets = async () => {
|
||||||
|
setIsLoadingTickets(true);
|
||||||
|
try {
|
||||||
|
const backendTickets = await apiService.getTickets();
|
||||||
|
// Convert backend format to frontend format
|
||||||
|
const formattedTickets: Ticket[] = backendTickets.map((ticket: any) => ({
|
||||||
|
...ticket,
|
||||||
|
status: 'Open' as const, // Backend doesn't have status field yet
|
||||||
|
timestamp: new Date(ticket.timestamp).toLocaleString()
|
||||||
|
}));
|
||||||
|
setTickets(formattedTickets);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading tickets:', error);
|
||||||
|
} finally {
|
||||||
|
setIsLoadingTickets(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTicketSubmit = (ticket: Ticket) => {
|
||||||
|
setTickets(prev => [ticket, ...prev]);
|
||||||
|
setShowConfirmation(ticket);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTicketUpdate = (ticketId: string, updates: Partial<Ticket>) => {
|
||||||
|
setTickets(prev =>
|
||||||
|
prev.map(ticket =>
|
||||||
|
ticket.id === ticketId ? { ...ticket, ...updates } : ticket
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateTicketFromChat = (conversation: string) => {
|
||||||
|
// This would typically show a form pre-filled with the conversation
|
||||||
|
// For now, we'll just switch to the new ticket tab
|
||||||
|
setActiveTab('new');
|
||||||
|
};
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: 'new' as const, label: 'New Ticket', icon: Plus },
|
||||||
|
{ id: 'history' as const, label: 'History', icon: History },
|
||||||
|
{ id: 'chat' as const, label: 'Live Chat', icon: MessageSquare }
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-950 text-white">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="bg-gray-900 border-b border-gray-800">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="flex items-center justify-between h-16">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
|
||||||
|
<Computer className="w-6 h-6 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-xl font-bold">DIGI TICKET</h1>
|
||||||
|
<p className="text-xs text-gray-400">IT Support System</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||||
|
<span>Total Tickets:</span>
|
||||||
|
<span className="text-white font-semibold">
|
||||||
|
{isLoadingTickets ? '...' : tickets.length}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="bg-gray-900 border-b border-gray-800">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<nav className="flex space-x-1">
|
||||||
|
{tabs.map((tab) => {
|
||||||
|
const Icon = tab.icon;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => setActiveTab(tab.id)}
|
||||||
|
className={`flex items-center gap-2 px-6 py-4 text-sm font-medium transition-all duration-200 border-b-2 ${
|
||||||
|
activeTab === tab.id
|
||||||
|
? 'text-blue-400 border-blue-400 bg-blue-400/5'
|
||||||
|
: 'text-gray-400 border-transparent hover:text-gray-300 hover:border-gray-600'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon className="w-4 h-4" />
|
||||||
|
<span>{tab.label}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
{activeTab === 'new' && (
|
||||||
|
<div>
|
||||||
|
<div className="mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">Submit New Ticket</h2>
|
||||||
|
<p className="text-gray-400">Use voice or text to describe your IT issue</p>
|
||||||
|
</div>
|
||||||
|
<TicketForm onTicketSubmit={handleTicketSubmit} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'history' && (
|
||||||
|
<div>
|
||||||
|
<div className="mb-8 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">Ticket History</h2>
|
||||||
|
<p className="text-gray-400">View and manage all your support tickets</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={loadTickets}
|
||||||
|
disabled={isLoadingTickets}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:opacity-50"
|
||||||
|
>
|
||||||
|
{isLoadingTickets ? 'Loading...' : 'Refresh'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<TicketHistory
|
||||||
|
tickets={tickets}
|
||||||
|
onTicketUpdate={handleTicketUpdate}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{activeTab === 'chat' && (
|
||||||
|
<div>
|
||||||
|
<div className="mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">Live Chat Support</h2>
|
||||||
|
<p className="text-gray-400">Get instant help from our AI assistant</p>
|
||||||
|
</div>
|
||||||
|
<ChatInterface onCreateTicket={handleCreateTicketFromChat} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Confirmation Modal */}
|
||||||
|
{showConfirmation && (
|
||||||
|
<TicketConfirmation
|
||||||
|
ticket={showConfirmation}
|
||||||
|
onClose={() => setShowConfirmation(null)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
274
src/components/ChatInterface.tsx
Normal file
274
src/components/ChatInterface.tsx
Normal file
|
|
@ -0,0 +1,274 @@
|
||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
import { Send, Bot, User, Loader, MessageSquare, UserPlus } from 'lucide-react';
|
||||||
|
import { ChatMessage } from '../types';
|
||||||
|
import { ChatService } from '../services/chatService';
|
||||||
|
|
||||||
|
interface ChatInterfaceProps {
|
||||||
|
onCreateTicket?: (conversation: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ChatInterface: React.FC<ChatInterfaceProps> = ({ onCreateTicket }) => {
|
||||||
|
const [messages, setMessages] = useState<ChatMessage[]>([
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
role: 'assistant',
|
||||||
|
content: "Hello! I'm your IT support assistant. I'm here to help you with any technical issues you might be experiencing. What can I help you with today?",
|
||||||
|
timestamp: new Date().toLocaleString()
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
const [input, setInput] = useState('');
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [showTicketForm, setShowTicketForm] = useState(false);
|
||||||
|
const [ticketFormData, setTicketFormData] = useState({ requester: '', email: '' });
|
||||||
|
const [isCreatingTicket, setIsCreatingTicket] = useState(false);
|
||||||
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [chatService] = useState(() => new ChatService());
|
||||||
|
|
||||||
|
const scrollToBottom = () => {
|
||||||
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
scrollToBottom();
|
||||||
|
}, [messages]);
|
||||||
|
|
||||||
|
const handleSend = async () => {
|
||||||
|
if (!input.trim() || isLoading) return;
|
||||||
|
|
||||||
|
const userMessage: ChatMessage = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
role: 'user',
|
||||||
|
content: input,
|
||||||
|
timestamp: new Date().toLocaleString()
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages(prev => [...prev, userMessage]);
|
||||||
|
setInput('');
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await chatService.sendMessage([...messages, userMessage]);
|
||||||
|
|
||||||
|
const assistantMessage: ChatMessage = {
|
||||||
|
id: (Date.now() + 1).toString(),
|
||||||
|
role: 'assistant',
|
||||||
|
content: response,
|
||||||
|
timestamp: new Date().toLocaleString()
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages(prev => [...prev, assistantMessage]);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Chat error:', error);
|
||||||
|
const errorMessage: ChatMessage = {
|
||||||
|
id: (Date.now() + 1).toString(),
|
||||||
|
role: 'assistant',
|
||||||
|
content: "I apologize, but I'm experiencing some technical difficulties. Please try again or create a support ticket if the issue persists.",
|
||||||
|
timestamp: new Date().toLocaleString()
|
||||||
|
};
|
||||||
|
setMessages(prev => [...prev, errorMessage]);
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSend();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateTicketFromChat = async () => {
|
||||||
|
if (!ticketFormData.requester.trim() || !ticketFormData.email.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsCreatingTicket(true);
|
||||||
|
try {
|
||||||
|
const ticket = await chatService.createTicketFromConversation(
|
||||||
|
ticketFormData.requester,
|
||||||
|
ticketFormData.email,
|
||||||
|
messages
|
||||||
|
);
|
||||||
|
|
||||||
|
// Show success message
|
||||||
|
const successMessage: ChatMessage = {
|
||||||
|
id: (Date.now() + 2).toString(),
|
||||||
|
role: 'assistant',
|
||||||
|
content: `Great! I've created a support ticket for you. Your ticket ID is ${ticket.id}. Our ${ticket.department} team will review your request and get back to you soon.`,
|
||||||
|
timestamp: new Date().toLocaleString()
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages(prev => [...prev, successMessage]);
|
||||||
|
setShowTicketForm(false);
|
||||||
|
setTicketFormData({ requester: '', email: '' });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating ticket from chat:', error);
|
||||||
|
const errorMessage: ChatMessage = {
|
||||||
|
id: (Date.now() + 2).toString(),
|
||||||
|
role: 'assistant',
|
||||||
|
content: "I'm sorry, there was an error creating your ticket. Please try again or use the main ticket form.",
|
||||||
|
timestamp: new Date().toLocaleString()
|
||||||
|
};
|
||||||
|
setMessages(prev => [...prev, errorMessage]);
|
||||||
|
} finally {
|
||||||
|
setIsCreatingTicket(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-900 rounded-xl border border-gray-800 h-[600px] flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between p-4 border-b border-gray-800">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg flex items-center justify-center">
|
||||||
|
<Bot className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold text-white">IT Support Chat</h3>
|
||||||
|
<p className="text-sm text-gray-400">Ask me anything about IT issues</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{messages.length > 1 && !showTicketForm && (
|
||||||
|
<button
|
||||||
|
onClick={() => setShowTicketForm(true)}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 hover:scale-105 text-sm"
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
<span>Create Ticket</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Messages */}
|
||||||
|
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||||
|
{messages.map((message) => (
|
||||||
|
<div
|
||||||
|
key={message.id}
|
||||||
|
className={`flex gap-3 ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
|
||||||
|
>
|
||||||
|
{message.role === 'assistant' && (
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<Bot className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={`max-w-[70%] p-3 rounded-lg ${
|
||||||
|
message.role === 'user'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-gray-800 text-gray-100 border border-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="whitespace-pre-wrap leading-relaxed">{message.content}</p>
|
||||||
|
<p className="text-xs opacity-70 mt-2">{message.timestamp}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{message.role === 'user' && (
|
||||||
|
<div className="w-8 h-8 bg-gray-700 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<User className="w-4 h-4 text-gray-300" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex gap-3 justify-start">
|
||||||
|
<div className="w-8 h-8 bg-gradient-to-r from-blue-600 to-purple-600 rounded-full flex items-center justify-center">
|
||||||
|
<Bot className="w-4 h-4 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-800 border border-gray-700 rounded-lg p-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Loader className="w-4 h-4 animate-spin text-blue-400" />
|
||||||
|
<span className="text-gray-400">Thinking...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Ticket Creation Form */}
|
||||||
|
{showTicketForm && (
|
||||||
|
<div className="bg-gray-800 border border-gray-700 rounded-lg p-4">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<UserPlus className="w-5 h-5 text-green-400" />
|
||||||
|
<h4 className="text-white font-medium">Create Support Ticket</h4>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Your full name"
|
||||||
|
value={ticketFormData.requester}
|
||||||
|
onChange={(e) => setTicketFormData(prev => ({ ...prev, requester: e.target.value }))}
|
||||||
|
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
disabled={isCreatingTicket}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Your email address"
|
||||||
|
value={ticketFormData.email}
|
||||||
|
onChange={(e) => setTicketFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||||
|
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
disabled={isCreatingTicket}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick={handleCreateTicketFromChat}
|
||||||
|
disabled={!ticketFormData.requester.trim() || !ticketFormData.email.trim() || isCreatingTicket}
|
||||||
|
className="flex-1 flex items-center justify-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||||
|
>
|
||||||
|
{isCreatingTicket ? (
|
||||||
|
<>
|
||||||
|
<Loader className="w-4 h-4 animate-spin" />
|
||||||
|
<span>Creating...</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
<span>Create Ticket</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => setShowTicketForm(false)}
|
||||||
|
disabled={isCreatingTicket}
|
||||||
|
className="px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div ref={messagesEndRef} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Input */}
|
||||||
|
<div className="p-4 border-t border-gray-800">
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<textarea
|
||||||
|
value={input}
|
||||||
|
onChange={(e) => setInput(e.target.value)}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
placeholder="Type your message here..."
|
||||||
|
className="flex-1 px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
|
||||||
|
rows={1}
|
||||||
|
disabled={isLoading}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
onClick={handleSend}
|
||||||
|
disabled={!input.trim() || isLoading}
|
||||||
|
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
|
||||||
|
>
|
||||||
|
<Send className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
162
src/components/TicketConfirmation.tsx
Normal file
162
src/components/TicketConfirmation.tsx
Normal file
|
|
@ -0,0 +1,162 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { CheckCircle, Volume2, VolumeX, Copy, Check } from 'lucide-react';
|
||||||
|
import { Ticket } from '../types';
|
||||||
|
import { TextToSpeechService } from '../services/speechService';
|
||||||
|
|
||||||
|
interface TicketConfirmationProps {
|
||||||
|
ticket: Ticket;
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TicketConfirmation: React.FC<TicketConfirmationProps> = ({ ticket, onClose }) => {
|
||||||
|
const [isSpeaking, setIsSpeaking] = useState(false);
|
||||||
|
const [isCopied, setIsCopied] = useState(false);
|
||||||
|
const [ttsService] = useState(() => new TextToSpeechService());
|
||||||
|
|
||||||
|
const speechText = `Ticket submitted successfully. Ticket ID: ${ticket.id}. Department: ${ticket.department}. Team: ${ticket.sub_department}. Issue Type: ${ticket.issue_type}. Priority: ${ticket.urgency}. Summary: ${ticket.summary}.`;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Auto-play confirmation
|
||||||
|
ttsService.speak(speechText);
|
||||||
|
setIsSpeaking(true);
|
||||||
|
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
setIsSpeaking(false);
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timer);
|
||||||
|
ttsService.stop();
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleSpeech = () => {
|
||||||
|
if (isSpeaking) {
|
||||||
|
ttsService.stop();
|
||||||
|
setIsSpeaking(false);
|
||||||
|
} else {
|
||||||
|
ttsService.speak(speechText);
|
||||||
|
setIsSpeaking(true);
|
||||||
|
setTimeout(() => setIsSpeaking(false), 5000);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyTicketId = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(ticket.id);
|
||||||
|
setIsCopied(true);
|
||||||
|
setTimeout(() => setIsCopied(false), 2000);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to copy ticket ID:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUrgencyColor = (urgency: string) => {
|
||||||
|
switch (urgency) {
|
||||||
|
case 'Low': return 'text-green-400 bg-green-400/10 border-green-400/20';
|
||||||
|
case 'Medium': return 'text-yellow-400 bg-yellow-400/10 border-yellow-400/20';
|
||||||
|
case 'High': return 'text-orange-400 bg-orange-400/10 border-orange-400/20';
|
||||||
|
case 'Critical': return 'text-red-400 bg-red-400/10 border-red-400/20';
|
||||||
|
default: return 'text-gray-400 bg-gray-400/10 border-gray-400/20';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||||
|
<div className="bg-gray-900 rounded-xl p-6 max-w-md w-full border border-gray-800 shadow-2xl">
|
||||||
|
<div className="text-center mb-6">
|
||||||
|
<div className="w-16 h-16 bg-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<CheckCircle className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl font-bold text-white mb-2">Ticket Submitted!</h2>
|
||||||
|
<p className="text-gray-400">Your support request has been received</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4 mb-6">
|
||||||
|
<div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
||||||
|
<div className="flex items-center justify-between mb-2">
|
||||||
|
<span className="text-sm text-gray-400">Ticket ID</span>
|
||||||
|
<button
|
||||||
|
onClick={copyTicketId}
|
||||||
|
className="flex items-center gap-1 text-blue-400 hover:text-blue-300 transition-colors"
|
||||||
|
>
|
||||||
|
{isCopied ? (
|
||||||
|
<>
|
||||||
|
<Check className="w-4 h-4" />
|
||||||
|
<span className="text-xs">Copied</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Copy className="w-4 h-4" />
|
||||||
|
<span className="text-xs">Copy</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<p className="text-white font-mono text-lg">{ticket.id}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="bg-gray-800 rounded-lg p-3 border border-gray-700">
|
||||||
|
<p className="text-xs text-gray-400 mb-1">Department</p>
|
||||||
|
<p className="text-white font-medium">{ticket.department}</p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-gray-800 rounded-lg p-3 border border-gray-700">
|
||||||
|
<p className="text-xs text-gray-400 mb-1">Team</p>
|
||||||
|
<p className="text-white font-medium">{ticket.sub_department}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-800 rounded-lg p-3 border border-gray-700">
|
||||||
|
<p className="text-xs text-gray-400 mb-1">Issue Type</p>
|
||||||
|
<p className="text-white font-medium">{ticket.issue_type}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between bg-gray-800 rounded-lg p-3 border border-gray-700">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-400 mb-1">Priority</p>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium border ${getUrgencyColor(ticket.urgency)}`}>
|
||||||
|
{ticket.urgency}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-800 rounded-lg p-3 border border-gray-700">
|
||||||
|
<p className="text-xs text-gray-400 mb-1">Summary</p>
|
||||||
|
<p className="text-white text-sm leading-relaxed">{ticket.summary}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<button
|
||||||
|
onClick={toggleSpeech}
|
||||||
|
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all duration-200 ${
|
||||||
|
isSpeaking
|
||||||
|
? 'bg-red-600 hover:bg-red-700 text-white'
|
||||||
|
: 'bg-blue-600 hover:bg-blue-700 text-white'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isSpeaking ? (
|
||||||
|
<>
|
||||||
|
<VolumeX className="w-4 h-4" />
|
||||||
|
<span>Stop</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Volume2 className="w-4 h-4" />
|
||||||
|
<span>Listen</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded-lg transition-all duration-200"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
165
src/components/TicketForm.tsx
Normal file
165
src/components/TicketForm.tsx
Normal file
|
|
@ -0,0 +1,165 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Send, User, Mail, FileText, Loader } from 'lucide-react';
|
||||||
|
import { VoiceRecorder } from './VoiceRecorder';
|
||||||
|
import { TextToSpeechService } from '../services/speechService';
|
||||||
|
import { apiService } from '../services/apiService';
|
||||||
|
import { Ticket } from '../types';
|
||||||
|
|
||||||
|
interface TicketFormProps {
|
||||||
|
onTicketSubmit: (ticket: Ticket) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TicketForm: React.FC<TicketFormProps> = ({ onTicketSubmit }) => {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
requester: '',
|
||||||
|
email: '',
|
||||||
|
content: ''
|
||||||
|
});
|
||||||
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [ttsService] = useState(() => new TextToSpeechService());
|
||||||
|
|
||||||
|
const handleVoiceTranscript = (transcript: string) => {
|
||||||
|
setFormData(prev => ({ ...prev, content: transcript }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if (!formData.requester.trim() || !formData.email.trim() || !formData.content.trim()) {
|
||||||
|
setError('Please fill in all required fields');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsSubmitting(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const ticket = await apiService.submitTicket({
|
||||||
|
requester: formData.requester,
|
||||||
|
email: formData.email,
|
||||||
|
content: formData.content
|
||||||
|
});
|
||||||
|
|
||||||
|
// Convert backend response to frontend Ticket format
|
||||||
|
const formattedTicket: Ticket = {
|
||||||
|
...ticket,
|
||||||
|
status: 'Open' as const,
|
||||||
|
timestamp: new Date(ticket.timestamp).toLocaleString()
|
||||||
|
};
|
||||||
|
|
||||||
|
onTicketSubmit(formattedTicket);
|
||||||
|
|
||||||
|
// Text-to-speech confirmation
|
||||||
|
const speechText = `Ticket submitted successfully. Ticket ID: ${ticket.id}. Department: ${ticket.department}. Priority: ${ticket.urgency}.`;
|
||||||
|
ttsService.speak(speechText);
|
||||||
|
|
||||||
|
// Reset form
|
||||||
|
setFormData({ requester: '', email: '', content: '' });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error submitting ticket:', error);
|
||||||
|
setError(error instanceof Error ? error.message : 'Failed to submit ticket. Please try again.');
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
<div className="bg-gray-900 rounded-xl p-6 shadow-2xl border border-gray-800">
|
||||||
|
<div className="flex items-center gap-3 mb-6">
|
||||||
|
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||||
|
<FileText className="w-5 h-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-semibold text-white">Create New Ticket</h2>
|
||||||
|
<p className="text-gray-400 text-sm">Submit your IT support request</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="mb-6 p-4 bg-red-900/50 border border-red-700 rounded-lg">
|
||||||
|
<p className="text-red-300 text-sm">{error}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||||
|
<User className="w-4 h-4 inline mr-2" />
|
||||||
|
Your Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.requester}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, requester: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||||
|
placeholder="Enter your full name"
|
||||||
|
required
|
||||||
|
disabled={isSubmitting}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||||||
|
<Mail className="w-4 h-4 inline mr-2" />
|
||||||
|
Email Address
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, email: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||||
|
placeholder="your.email@company.com"
|
||||||
|
required
|
||||||
|
disabled={isSubmitting}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-3">
|
||||||
|
Describe Your Issue
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<VoiceRecorder
|
||||||
|
onTranscript={handleVoiceTranscript}
|
||||||
|
disabled={isSubmitting}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="mt-4">
|
||||||
|
<textarea
|
||||||
|
value={formData.content}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, content: e.target.value }))}
|
||||||
|
rows={6}
|
||||||
|
className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 resize-none"
|
||||||
|
placeholder="Type your issue description here or use voice recording above..."
|
||||||
|
required
|
||||||
|
disabled={isSubmitting}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={isSubmitting || !formData.requester.trim() || !formData.email.trim() || !formData.content.trim()}
|
||||||
|
className="w-full flex items-center justify-center gap-3 px-6 py-4 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-lg shadow-blue-600/25"
|
||||||
|
>
|
||||||
|
{isSubmitting ? (
|
||||||
|
<>
|
||||||
|
<Loader className="w-5 h-5 animate-spin" />
|
||||||
|
<span>Processing Ticket...</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Send className="w-5 h-5" />
|
||||||
|
<span>Submit Ticket</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
174
src/components/TicketHistory.tsx
Normal file
174
src/components/TicketHistory.tsx
Normal file
|
|
@ -0,0 +1,174 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Clock, CheckCircle, AlertCircle, Filter, Search, User, Mail } from 'lucide-react';
|
||||||
|
import { Ticket } from '../types';
|
||||||
|
|
||||||
|
interface TicketHistoryProps {
|
||||||
|
tickets: Ticket[];
|
||||||
|
onTicketUpdate: (ticketId: string, updates: Partial<Ticket>) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const TicketHistory: React.FC<TicketHistoryProps> = ({ tickets, onTicketUpdate }) => {
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [statusFilter, setStatusFilter] = useState<string>('all');
|
||||||
|
const [urgencyFilter, setUrgencyFilter] = useState<string>('all');
|
||||||
|
|
||||||
|
const filteredTickets = tickets.filter(ticket => {
|
||||||
|
const matchesSearch =
|
||||||
|
ticket.summary.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
ticket.requester.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
ticket.content.toLowerCase().includes(searchTerm.toLowerCase());
|
||||||
|
|
||||||
|
const matchesStatus = statusFilter === 'all' || ticket.status === statusFilter;
|
||||||
|
const matchesUrgency = urgencyFilter === 'all' || ticket.urgency === urgencyFilter;
|
||||||
|
|
||||||
|
return matchesSearch && matchesStatus && matchesUrgency;
|
||||||
|
});
|
||||||
|
|
||||||
|
const getStatusColor = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'Open': return 'text-blue-400 bg-blue-400/10';
|
||||||
|
case 'In Progress': return 'text-yellow-400 bg-yellow-400/10';
|
||||||
|
case 'Resolved': return 'text-green-400 bg-green-400/10';
|
||||||
|
case 'Closed': return 'text-gray-400 bg-gray-400/10';
|
||||||
|
default: return 'text-gray-400 bg-gray-400/10';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getUrgencyColor = (urgency: string) => {
|
||||||
|
switch (urgency) {
|
||||||
|
case 'Low': return 'text-green-400 bg-green-400/10';
|
||||||
|
case 'Medium': return 'text-yellow-400 bg-yellow-400/10';
|
||||||
|
case 'High': return 'text-orange-400 bg-orange-400/10';
|
||||||
|
case 'Critical': return 'text-red-400 bg-red-400/10';
|
||||||
|
default: return 'text-gray-400 bg-gray-400/10';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const markAsResolved = (ticketId: string) => {
|
||||||
|
onTicketUpdate(ticketId, { status: 'Resolved' });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Filters */}
|
||||||
|
<div className="bg-gray-900 rounded-xl p-6 border border-gray-800">
|
||||||
|
<div className="flex items-center gap-3 mb-4">
|
||||||
|
<Filter className="w-5 h-5 text-blue-400" />
|
||||||
|
<h3 className="text-lg font-semibold text-white">Filter Tickets</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||||
|
<div className="relative">
|
||||||
|
<Search className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Search tickets..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={statusFilter}
|
||||||
|
onChange={(e) => setStatusFilter(e.target.value)}
|
||||||
|
className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="all">All Status</option>
|
||||||
|
<option value="Open">Open</option>
|
||||||
|
<option value="In Progress">In Progress</option>
|
||||||
|
<option value="Resolved">Resolved</option>
|
||||||
|
<option value="Closed">Closed</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={urgencyFilter}
|
||||||
|
onChange={(e) => setUrgencyFilter(e.target.value)}
|
||||||
|
className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="all">All Urgency</option>
|
||||||
|
<option value="Low">Low</option>
|
||||||
|
<option value="Medium">Medium</option>
|
||||||
|
<option value="High">High</option>
|
||||||
|
<option value="Critical">Critical</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tickets List */}
|
||||||
|
<div className="space-y-4">
|
||||||
|
{filteredTickets.length === 0 ? (
|
||||||
|
<div className="bg-gray-900 rounded-xl p-8 text-center border border-gray-800">
|
||||||
|
<AlertCircle className="w-12 h-12 text-gray-500 mx-auto mb-4" />
|
||||||
|
<p className="text-gray-400">No tickets found matching your criteria</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
filteredTickets.map((ticket) => (
|
||||||
|
<div key={ticket.id} className="bg-gray-900 rounded-xl p-6 border border-gray-800 hover:border-gray-700 transition-all duration-200">
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="flex-1">
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<h3 className="text-lg font-semibold text-white">#{ticket.id}</h3>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(ticket.status)}`}>
|
||||||
|
{ticket.status}
|
||||||
|
</span>
|
||||||
|
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getUrgencyColor(ticket.urgency)}`}>
|
||||||
|
{ticket.urgency}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-300 font-medium mb-2">{ticket.summary}</p>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-400">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<User className="w-4 h-4" />
|
||||||
|
<span>{ticket.requester}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Mail className="w-4 h-4" />
|
||||||
|
<span>{ticket.email}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
<span>{ticket.timestamp}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{ticket.status !== 'Resolved' && ticket.status !== 'Closed' && (
|
||||||
|
<button
|
||||||
|
onClick={() => markAsResolved(ticket.id)}
|
||||||
|
className="flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-all duration-200 hover:scale-105"
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-4 h-4" />
|
||||||
|
<span>Resolve</span>
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-800 pt-4">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500 mb-1">Department</p>
|
||||||
|
<p className="text-white font-medium">{ticket.department}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500 mb-1">Team</p>
|
||||||
|
<p className="text-white font-medium">{ticket.sub_department}</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500 mb-1">Issue Type</p>
|
||||||
|
<p className="text-white font-medium">{ticket.issue_type}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-xs text-gray-500 mb-2">Description</p>
|
||||||
|
<p className="text-gray-300 leading-relaxed">{ticket.content}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
109
src/components/VoiceRecorder.tsx
Normal file
109
src/components/VoiceRecorder.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Mic, MicOff, Volume2 } from 'lucide-react';
|
||||||
|
import { SpeechService } from '../services/speechService';
|
||||||
|
|
||||||
|
interface VoiceRecorderProps {
|
||||||
|
onTranscript: (transcript: string) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const VoiceRecorder: React.FC<VoiceRecorderProps> = ({ onTranscript, disabled = false }) => {
|
||||||
|
const [isListening, setIsListening] = useState(false);
|
||||||
|
const [transcript, setTranscript] = useState('');
|
||||||
|
const [isSupported, setIsSupported] = useState(false);
|
||||||
|
const [speechService] = useState(() => new SpeechService());
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setIsSupported(speechService.isSupported());
|
||||||
|
}, [speechService]);
|
||||||
|
|
||||||
|
const startListening = () => {
|
||||||
|
if (!isSupported || disabled) return;
|
||||||
|
|
||||||
|
speechService.startListening(
|
||||||
|
(result) => {
|
||||||
|
setTranscript(result.transcript);
|
||||||
|
if (result.isFinal) {
|
||||||
|
onTranscript(result.transcript);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
console.error('Speech recognition error:', error);
|
||||||
|
setIsListening(false);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setIsListening(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopListening = () => {
|
||||||
|
speechService.stopListening();
|
||||||
|
setIsListening(false);
|
||||||
|
if (transcript) {
|
||||||
|
onTranscript(transcript);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleListening = () => {
|
||||||
|
if (isListening) {
|
||||||
|
stopListening();
|
||||||
|
} else {
|
||||||
|
startListening();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isSupported) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center p-4 bg-gray-800 rounded-lg border border-gray-700">
|
||||||
|
<MicOff className="w-5 h-5 text-gray-500 mr-2" />
|
||||||
|
<span className="text-gray-400 text-sm">Speech recognition not supported in this browser</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<button
|
||||||
|
onClick={toggleListening}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`
|
||||||
|
w-full flex items-center justify-center gap-3 px-6 py-4 rounded-lg font-medium transition-all duration-200
|
||||||
|
${isListening
|
||||||
|
? 'bg-red-600 hover:bg-red-700 text-white shadow-lg shadow-red-600/25'
|
||||||
|
: 'bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-600/25'
|
||||||
|
}
|
||||||
|
${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105'}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{isListening ? (
|
||||||
|
<>
|
||||||
|
<div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
|
||||||
|
<MicOff className="w-5 h-5" />
|
||||||
|
<span>Stop Recording</span>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Mic className="w-5 h-5" />
|
||||||
|
<span>Start Voice Recording</span>
|
||||||
|
<Volume2 className="w-4 h-4 opacity-70" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isListening && (
|
||||||
|
<div className="bg-gray-800 rounded-lg p-4 border border-gray-700">
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<div className="flex gap-1">
|
||||||
|
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
|
||||||
|
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse" style={{ animationDelay: '0.1s' }}></div>
|
||||||
|
<div className="w-2 h-2 bg-red-500 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
|
||||||
|
</div>
|
||||||
|
<span className="text-red-400 text-sm font-medium">Listening...</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-gray-300 text-sm min-h-[1.5rem]">
|
||||||
|
{transcript || 'Speak now...'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
24
src/hooks/useLocalStorage.ts
Normal file
24
src/hooks/useLocalStorage.ts
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
|
||||||
|
const [storedValue, setStoredValue] = useState<T>(() => {
|
||||||
|
try {
|
||||||
|
const item = window.localStorage.getItem(key);
|
||||||
|
return item ? JSON.parse(item) : initialValue;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error reading localStorage key "${key}":`, error);
|
||||||
|
return initialValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const setValue = (value: T) => {
|
||||||
|
try {
|
||||||
|
setStoredValue(value);
|
||||||
|
window.localStorage.setItem(key, JSON.stringify(value));
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`Error setting localStorage key "${key}":`, error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return [storedValue, setValue];
|
||||||
|
}
|
||||||
3
src/index.css
Normal file
3
src/index.css
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
71
src/services/apiService.ts
Normal file
71
src/services/apiService.ts
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
const API_BASE_URL = 'http://localhost:3001/api';
|
||||||
|
|
||||||
|
export class ApiService {
|
||||||
|
private async makeRequest(endpoint: string, options: RequestInit = {}) {
|
||||||
|
const url = `${API_BASE_URL}${endpoint}`;
|
||||||
|
const config: RequestInit = {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
...options.headers,
|
||||||
|
},
|
||||||
|
...options,
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(url, config);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const errorData = await response.json().catch(() => ({}));
|
||||||
|
throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return await response.json();
|
||||||
|
} catch (error) {
|
||||||
|
console.error(`API request failed for ${endpoint}:`, error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async submitTicket(ticketData: {
|
||||||
|
requester: string;
|
||||||
|
email: string;
|
||||||
|
content: string;
|
||||||
|
}) {
|
||||||
|
return this.makeRequest('/submit-ticket', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(ticketData),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async getTickets() {
|
||||||
|
return this.makeRequest('/tickets');
|
||||||
|
}
|
||||||
|
|
||||||
|
async sendChatMessage(messages: Array<{ role: string; content: string }>) {
|
||||||
|
const response = await this.makeRequest('/chat', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ messages }),
|
||||||
|
});
|
||||||
|
return response.response;
|
||||||
|
}
|
||||||
|
|
||||||
|
async createTicketFromChat(data: {
|
||||||
|
requester: string;
|
||||||
|
email: string;
|
||||||
|
conversation: string;
|
||||||
|
}) {
|
||||||
|
return this.makeRequest('/chat/create-ticket', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
async getQuickResponse(issueType: string) {
|
||||||
|
return this.makeRequest('/chat/quick-response', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ issue_type: issueType }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const apiService = new ApiService();
|
||||||
43
src/services/chatService.ts
Normal file
43
src/services/chatService.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
import { ChatMessage } from '../types';
|
||||||
|
import { apiService } from './apiService';
|
||||||
|
|
||||||
|
export class ChatService {
|
||||||
|
async sendMessage(messages: ChatMessage[]): Promise<string> {
|
||||||
|
try {
|
||||||
|
// Convert ChatMessage format to API format
|
||||||
|
const apiMessages = messages.map(msg => ({
|
||||||
|
role: msg.role,
|
||||||
|
content: msg.content
|
||||||
|
}));
|
||||||
|
|
||||||
|
const response = await apiService.sendChatMessage(apiMessages);
|
||||||
|
return response;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Chat service error:', error);
|
||||||
|
throw new Error('Failed to get response from chat service. Please try again or create a support ticket.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async createTicketFromConversation(
|
||||||
|
requester: string,
|
||||||
|
email: string,
|
||||||
|
messages: ChatMessage[]
|
||||||
|
) {
|
||||||
|
try {
|
||||||
|
const conversation = messages
|
||||||
|
.map(msg => `${msg.role === 'user' ? 'User' : 'Assistant'}: ${msg.content}`)
|
||||||
|
.join('\n\n');
|
||||||
|
|
||||||
|
const response = await apiService.createTicketFromChat({
|
||||||
|
requester,
|
||||||
|
email,
|
||||||
|
conversation
|
||||||
|
});
|
||||||
|
|
||||||
|
return response.ticket;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error creating ticket from chat:', error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
96
src/services/speechService.ts
Normal file
96
src/services/speechService.ts
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
import { VoiceRecognitionResult } from '../types';
|
||||||
|
|
||||||
|
export class SpeechService {
|
||||||
|
private recognition: SpeechRecognition | null = null;
|
||||||
|
private isListening = false;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
|
||||||
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
||||||
|
this.recognition = new SpeechRecognition();
|
||||||
|
this.recognition.continuous = true;
|
||||||
|
this.recognition.interimResults = true;
|
||||||
|
this.recognition.lang = 'en-US';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
isSupported(): boolean {
|
||||||
|
return this.recognition !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
startListening(
|
||||||
|
onResult: (result: VoiceRecognitionResult) => void,
|
||||||
|
onError: (error: string) => void
|
||||||
|
): void {
|
||||||
|
if (!this.recognition || this.isListening) return;
|
||||||
|
|
||||||
|
this.recognition.onresult = (event) => {
|
||||||
|
let transcript = '';
|
||||||
|
let confidence = 0;
|
||||||
|
let isFinal = false;
|
||||||
|
|
||||||
|
for (let i = event.resultIndex; i < event.results.length; i++) {
|
||||||
|
const result = event.results[i];
|
||||||
|
transcript += result[0].transcript;
|
||||||
|
confidence = result[0].confidence;
|
||||||
|
isFinal = result.isFinal;
|
||||||
|
}
|
||||||
|
|
||||||
|
onResult({ transcript, confidence, isFinal });
|
||||||
|
};
|
||||||
|
|
||||||
|
this.recognition.onerror = (event) => {
|
||||||
|
onError(`Speech recognition error: ${event.error}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.recognition.onend = () => {
|
||||||
|
this.isListening = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.recognition.start();
|
||||||
|
this.isListening = true;
|
||||||
|
} catch (error) {
|
||||||
|
onError('Failed to start speech recognition');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
stopListening(): void {
|
||||||
|
if (this.recognition && this.isListening) {
|
||||||
|
this.recognition.stop();
|
||||||
|
this.isListening = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getIsListening(): boolean {
|
||||||
|
return this.isListening;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class TextToSpeechService {
|
||||||
|
private synth: SpeechSynthesis;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.synth = window.speechSynthesis;
|
||||||
|
}
|
||||||
|
|
||||||
|
speak(text: string, options: { rate?: number; pitch?: number; volume?: number } = {}): void {
|
||||||
|
if (!this.synth) return;
|
||||||
|
|
||||||
|
// Cancel any ongoing speech
|
||||||
|
this.synth.cancel();
|
||||||
|
|
||||||
|
const utterance = new SpeechSynthesisUtterance(text);
|
||||||
|
utterance.rate = options.rate || 1;
|
||||||
|
utterance.pitch = options.pitch || 1;
|
||||||
|
utterance.volume = options.volume || 1;
|
||||||
|
|
||||||
|
this.synth.speak(utterance);
|
||||||
|
}
|
||||||
|
|
||||||
|
stop(): void {
|
||||||
|
if (this.synth) {
|
||||||
|
this.synth.cancel();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
28
src/services/ticketClassifier.ts
Normal file
28
src/services/ticketClassifier.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import { Classification } from '../types';
|
||||||
|
import { apiService } from './apiService';
|
||||||
|
|
||||||
|
export class ITTicketClassifier {
|
||||||
|
async classifyTicket(ticketContent: string): Promise<Classification> {
|
||||||
|
try {
|
||||||
|
// The classification is now handled by the backend
|
||||||
|
// This method is kept for compatibility but won't be used directly
|
||||||
|
// since the backend handles both classification and ticket creation
|
||||||
|
return {
|
||||||
|
department: 'Processing...',
|
||||||
|
sub_department: 'Processing...',
|
||||||
|
issue_type: 'Processing...',
|
||||||
|
urgency: 'Medium',
|
||||||
|
summary: 'Processing ticket classification...'
|
||||||
|
};
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Classification error:', error);
|
||||||
|
return {
|
||||||
|
department: 'Helpdesk',
|
||||||
|
sub_department: 'User Support',
|
||||||
|
issue_type: 'General Inquiry',
|
||||||
|
urgency: 'Low',
|
||||||
|
summary: 'General support request'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
34
src/types/index.ts
Normal file
34
src/types/index.ts
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
export interface Ticket {
|
||||||
|
id: string;
|
||||||
|
requester: string;
|
||||||
|
email: string;
|
||||||
|
timestamp: string;
|
||||||
|
content: string;
|
||||||
|
status: 'Open' | 'In Progress' | 'Resolved' | 'Closed';
|
||||||
|
department: string;
|
||||||
|
sub_department: string;
|
||||||
|
issue_type: string;
|
||||||
|
urgency: 'Low' | 'Medium' | 'High' | 'Critical';
|
||||||
|
summary: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ChatMessage {
|
||||||
|
id: string;
|
||||||
|
role: 'user' | 'assistant';
|
||||||
|
content: string;
|
||||||
|
timestamp: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Classification {
|
||||||
|
department: string;
|
||||||
|
sub_department: string;
|
||||||
|
issue_type: string;
|
||||||
|
urgency: 'Low' | 'Medium' | 'High' | 'Critical';
|
||||||
|
summary: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VoiceRecognitionResult {
|
||||||
|
transcript: string;
|
||||||
|
confidence: number;
|
||||||
|
isFinal: boolean;
|
||||||
|
}
|
||||||
43
src/types/speech.d.ts
vendored
Normal file
43
src/types/speech.d.ts
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
interface SpeechRecognition extends EventTarget {
|
||||||
|
continuous: boolean;
|
||||||
|
interimResults: boolean;
|
||||||
|
lang: string;
|
||||||
|
onresult: (event: SpeechRecognitionEvent) => void;
|
||||||
|
onerror: (event: SpeechRecognitionErrorEvent) => void;
|
||||||
|
onend: () => void;
|
||||||
|
start(): void;
|
||||||
|
stop(): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SpeechRecognitionEvent {
|
||||||
|
resultIndex: number;
|
||||||
|
results: SpeechRecognitionResultList;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SpeechRecognitionResultList {
|
||||||
|
length: number;
|
||||||
|
item(index: number): SpeechRecognitionResult;
|
||||||
|
[index: number]: SpeechRecognitionResult;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SpeechRecognitionResult {
|
||||||
|
length: number;
|
||||||
|
item(index: number): SpeechRecognitionAlternative;
|
||||||
|
[index: number]: SpeechRecognitionAlternative;
|
||||||
|
isFinal: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SpeechRecognitionAlternative {
|
||||||
|
transcript: string;
|
||||||
|
confidence: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SpeechRecognitionErrorEvent {
|
||||||
|
error: string;
|
||||||
|
message: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Window {
|
||||||
|
SpeechRecognition: typeof SpeechRecognition;
|
||||||
|
webkitSpeechRecognition: typeof SpeechRecognition;
|
||||||
|
}
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
24
tsconfig.app.json
Normal file
24
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
22
tsconfig.node.json
Normal file
22
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
10
vite.config.ts
Normal file
10
vite.config.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
optimizeDeps: {
|
||||||
|
exclude: ['lucide-react'],
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue