All files / src/components/features/admin/support/CannedResponses ResponseList.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

/**
 * ResponseList - List display of canned responses
 */

import React from 'react';
import { CannedResponse } from '@/types/support';
import { Icon } from '@/components/ui/icons';

export interface ResponseListProps {
  /** List of responses */
  responses: CannedResponse[];
  /** Loading state */
  loading: boolean;
  /** Edit handler */
  onEdit: (id: string) => void;
  /** Delete handler */
  onDelete: (id: string) => void;
}

export default function ResponseList({
  responses,
  loading,
  onEdit,
  onDelete}: ResponseListProps) {
  if (loading) {
    return (
      <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
        <div className="animate-spin h-8 w-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto" />
        <p className="text-gray-500 mt-4">Loading responses...</p>
      </div>
    );
  }

  if (responses.length === 0) {
    return (
      <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
        <Icon name="chat-bubble" size={48} className="text-gray-400 mx-auto mb-4" />
        <p className="text-gray-500">No canned responses yet</p>
        <p className="text-sm text-gray-400 mt-1">
          Create your first response to save time when replying to tickets
        </p>
      </div>
    );
  }

  // Group by category
  const grouped = responses.reduce((acc, response) => {
    const category = response.category || 'Uncategorized';
    if (!acc[category]) {
      acc[category] = [];
    }
    acc[category].push(response);
    return acc;
  }, {} as Record<string, CannedResponse[]>);

  return (
    <div className="space-y-6">
      {Object.entries(grouped).map(([category, items]) => (
        <div key={category}>
          <h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-3">
            {category}
          </h3>
          <div className="bg-white rounded-lg border border-gray-200 divide-y divide-gray-200">
            {items.map((response) => (
              <div key={response.id} className="p-4 hover:bg-gray-50">
                <div className="flex items-start justify-between gap-4">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                      <h4 className="font-medium text-gray-900">{response.title}</h4>
                      {response.shortcut && (
                        <span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded font-mono">
                          /{response.shortcut}
                        </span>
                      )}
                    </div>
                    <p className="text-sm text-gray-600 mt-1 line-clamp-2">
                      {response.content}
                    </p>
                    {response.tags && response.tags.length > 0 && (
                      <div className="flex flex-wrap gap-1 mt-2">
                        {response.tags.map((tag) => (
                          <span
                            key={tag}
                            className="text-xs bg-blue-50 text-blue-600 px-1.5 py-0.5 rounded"
                          >
                            {tag}
                          </span>
                        ))}
                      </div>
                    )}
                  </div>
                  <div className="flex items-center gap-1">
                    <button
                      type="button"
                      onClick={() => onEdit(response.id)}
                      className="p-2 text-gray-400 hover:text-blue-600 rounded-lg hover:bg-blue-50"
                      title="Edit"
                    >
                      <Icon name="edit" size={20} />
                    </button>
                    <button
                      type="button"
                      onClick={() => onDelete(response.id)}
                      className="p-2 text-gray-400 hover:text-red-600 rounded-lg hover:bg-red-50"
                      title="Delete"
                    >
                      <Icon name="trash" size={20} />
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}