d8dfun/claudecodeui
1
0
Fork 0
mirror of https://github.com/siteboon/claudecodeui.git synced 2025-12-14 21:09:31 +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

68
src/components/ChatInterface.jsx
View File

@@ -118,7 +118,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
<div className="w-full"> <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="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 justify-between mb-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -423,41 +423,18 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
try { try {
const input = JSON.parse(message.toolInput); const input = JSON.parse(message.toolInput);
if (input.file_path) { if (input.file_path) {
// Extract filename
const filename = input.file_path.split('/').pop(); 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 ( return (
<details className="mt-2" open={autoExpandTools}> <div className="mt-2 text-sm text-blue-700 dark:text-blue-300">
<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"> Read{' '}
<svg className="w-4 h-4 transition-transform details-chevron" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <button
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> onClick={() => onFileOpen && onFileOpen(input.file_path)}
</svg> className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline font-mono"
<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" /> {filename}
</svg> </button>
<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> </div>
)}
</details>
); );
} }
} catch (e) { } catch (e) {
@@ -882,6 +859,33 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
</div> </div>
</div> </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"> <div className="text-sm text-gray-700 dark:text-gray-300">
{message.type === 'assistant' ? ( {message.type === 'assistant' ? (