add reason to conversation as well

This commit is contained in:
Ramnique Singh 2025-08-10 06:21:37 +05:30
parent 5a36653af1
commit 23d88aa7c0
12 changed files with 102 additions and 86 deletions

View file

@ -9,68 +9,7 @@ import { Turn } from "@/src/entities/models/turn";
import { z } from "zod";
import Link from "next/link";
import { MessageDisplay } from "../../../../lib/components/message-display";
function TurnReason({ reason }: { reason: z.infer<typeof Turn>['reason'] }) {
const getReasonDisplay = () => {
switch (reason.type) {
case 'chat':
return { label: 'CHAT', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' };
case 'api':
return { label: 'API', color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' };
case 'job':
return { label: `JOB: ${reason.jobId}`, color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300' };
default:
return { label: 'UNKNOWN', color: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300' };
}
};
const { label, color } = getReasonDisplay();
return (
<span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-mono font-medium ${color}`}>
{label}
</span>
);
}
function TurnReasonWithLink({ reason, projectId }: { reason: z.infer<typeof Turn>['reason']; projectId: string }) {
const getReasonDisplay = () => {
switch (reason.type) {
case 'chat':
return { label: 'CHAT', color: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300' };
case 'api':
return { label: 'API', color: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' };
case 'job':
return {
label: `JOB: ${reason.jobId}`,
color: 'bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300',
isJob: true,
jobId: reason.jobId
};
default:
return { label: 'UNKNOWN', color: 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300' };
}
};
const { label, color, isJob, jobId } = getReasonDisplay();
if (isJob && jobId) {
return (
<Link
href={`/projects/${projectId}/jobs/${jobId}`}
className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-mono font-medium ${color} hover:opacity-80 transition-opacity`}
>
{label}
</Link>
);
}
return (
<span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-mono font-medium ${color}`}>
{label}
</span>
);
}
import { ReasonBadge } from "../../../../lib/components/reason-badge";
function TurnContainer({ turn, index, projectId }: { turn: z.infer<typeof Turn>; index: number; projectId: string }) {
return (
@ -82,7 +21,7 @@ function TurnContainer({ turn, index, projectId }: { turn: z.infer<typeof Turn>;
<span className="text-sm font-mono font-semibold text-gray-700 dark:text-gray-300">
TURN #{index + 1}
</span>
<TurnReasonWithLink reason={turn.reason} projectId={projectId} />
<ReasonBadge reason={turn.reason} projectId={projectId} />
</div>
<div className="text-xs text-gray-500 dark:text-gray-500">
{new Date(turn.createdAt).toLocaleTimeString()}
@ -199,6 +138,12 @@ export function ConversationView({ projectId, conversationId }: { projectId: str
{conversation.isLiveWorkflow ? 'Yes' : 'No'}
</span>
</div>
<div>
<span className="font-semibold text-gray-700 dark:text-gray-300">Reason:</span>
<span className="ml-2">
<ReasonBadge reason={conversation.reason} projectId={projectId} />
</span>
</div>
</div>
</div>

View file

@ -8,6 +8,7 @@ import { listConversations } from "@/app/actions/conversation_actions";
import { z } from "zod";
import { ListedConversationItem } from "@/src/application/repositories/conversations.repository.interface";
import { isToday, isThisWeek, isThisMonth } from "@/lib/utils/date";
import { ReasonBadge } from "@/app/lib/components/reason-badge";
type ListedItem = z.infer<typeof ListedConversationItem>;
@ -101,26 +102,30 @@ export function ConversationsList({ projectId }: { projectId: string }) {
<thead className="bg-gray-50 dark:bg-gray-800/50">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Conversation</th>
<th className="w-[30%] px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Created</th>
<th className="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Reason</th>
<th className="w-[25%] px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Created</th>
</tr>
</thead>
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
{group.map((c) => (
<tr key={c.id} className="hover:bg-gray-50 dark:hover:bg-gray-750 transition-colors">
<td className="px-6 py-4 text-left">
<Link
href={`/projects/${projectId}/conversations/${c.id}`}
size="lg"
isBlock
className="text-sm text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 truncate block"
>
{c.id}
</Link>
</td>
<td className="px-6 py-4 text-left text-sm text-gray-600 dark:text-gray-300">
{new Date(c.createdAt).toLocaleString()}
</td>
</tr>
<tr key={c.id} className="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<td className="px-6 py-4 text-left">
<Link
href={`/projects/${projectId}/conversations/${c.id}`}
size="lg"
isBlock
className="text-sm text-gray-900 dark:text-gray-100 hover:text-blue-600 dark:hover:text-blue-400 truncate block"
>
{c.id}
</Link>
</td>
<td className="px-6 py-4 text-left">
<ReasonBadge reason={c.reason} projectId={projectId} />
</td>
<td className="px-6 py-4 text-left text-sm text-gray-600 dark:text-gray-300">
{new Date(c.createdAt).toLocaleString()}
</td>
</tr>
))}
</tbody>
</table>