d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-13 21:59:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update ChatInterface

Browse Source
This commit is contained in:
simos
2025-07-13 20:34:04 +00:00
parent ba077fdf62
commit b808ca1b68
1 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/ChatInterface.jsx
View File

@@ -118,7 +118,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
<div className="w-full">
{message.isToolUse ? (
{message.isToolUse && message.toolName !== 'Read' ? (
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-2 sm:p-3 mb-2">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-2">
@@ -423,41 +423,18 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
try {
const input = JSON.parse(message.toolInput);
if (input.file_path) {
// Extract filename
const filename = input.file_path.split('/').pop();
const pathParts = input.file_path.split('/');
const directoryPath = pathParts.slice(0, -1).join('/');
// Simple heuristic to show only relevant path parts
// Show the last 2-3 directory parts before the filename
const relevantParts = pathParts.slice(-4, -1); // Get up to 3 directories before filename
const relativePath = relevantParts.length > 0 ? relevantParts.join('/') + '/' : '';
return (
<details className="mt-2" open={autoExpandTools}>
<summary className="text-sm text-blue-700 dark:text-blue-300 cursor-pointer hover:text-blue-800 dark:hover:text-blue-200 flex items-center gap-1">
<svg className="w-4 h-4 transition-transform details-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
</svg>
<svg className="w-4 h-4 text-blue-600 dark:text-blue-400 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span className="text-gray-600 dark:text-gray-400 font-mono text-xs">{relativePath}</span>
<span className="font-semibold text-blue-700 dark:text-blue-300 font-mono">{filename}</span>
</summary>
{showRawParameters && (
<div className="mt-3">
<details className="mt-2">
<summary className="text-xs text-blue-600 dark:text-blue-400 cursor-pointer hover:text-blue-700 dark:hover:text-blue-300">
View raw parameters
</summary>
<pre className="mt-2 text-xs bg-blue-100 dark:bg-blue-800/30 p-2 rounded whitespace-pre-wrap break-words overflow-hidden text-blue-900 dark:text-blue-100">
{message.toolInput}
</pre>
</details>
</div>
)}
</details>
<div className="mt-2 text-sm text-blue-700 dark:text-blue-300">
Read{' '}
<button
onClick={() => onFileOpen && onFileOpen(input.file_path)}
className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline font-mono"
>
{filename}
</button>
</div>
);
}
} catch (e) {
@@ -882,6 +859,33 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
</div>
</div>
</div>
) : message.isToolUse && message.toolName === 'Read' ? (
// Simple Read tool indicator
(() => {
try {
const input = JSON.parse(message.toolInput);
if (input.file_path) {
const filename = input.file_path.split('/').pop();
return (
<div className="bg-blue-50 dark:bg-blue-900/20 border-l-2 border-blue-300 dark:border-blue-600 pl-3 py-1 mb-2 text-sm text-blue-700 dark:text-blue-300">
📖 Read{' '}
<button
onClick={() => onFileOpen && onFileOpen(input.file_path)}
className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline font-mono"
>
{filename}
</button>
</div>
);
}
} catch (e) {
return (
<div className="bg-blue-50 dark:bg-blue-900/20 border-l-2 border-blue-300 dark:border-blue-600 pl-3 py-1 mb-2 text-sm text-blue-700 dark:text-blue-300">
📖 Read file
</div>
);
}
})()
) : (
<div className="text-sm text-gray-700 dark:text-gray-300">
{message.type === 'assistant' ? (