Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WIP] Showing the Think process for Deep Seek R1 in Cody UI #6896

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[WIP] Showing the Think process for Deep Seek R1 in Cody UI #6896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ae89419
feat: add support for <think> tags in ChatMessageContent
abeatrix Jan 28, 2025
be2347c
Adding a fix for think rendering
arafatkatze Jan 31, 2025
da034b9
Aesthetic
arafatkatze Jan 31, 2025
abcae2b
Aesthetic
arafatkatze Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 130 additions & 1 deletion vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,47 @@
className?: string
}

interface StreamingContent {
displayContent: string
thinkContent: string
hasThinkTag: boolean
isThinking: boolean
}

const extractThinkContent = (content: string): StreamingContent => {
const thinkRegex = /<think>([\s\S]*?)<\/think>/g
const thinkMatches = [...content.matchAll(thinkRegex)]

// Check if content has an unclosed think tag
const hasOpenThinkTag = content.includes('<think>') &&
(content.lastIndexOf('<think>') > content.lastIndexOf('</think>'))

// Collect all think content, including partial content from unclosed tag
let thinkContent = thinkMatches
.map(match => match[1].trim())
.filter(Boolean)
.join('\n\n')

if (hasOpenThinkTag) {
const lastThinkContent = content.slice(content.lastIndexOf('<think>') + 7)
thinkContent = thinkContent ? `${thinkContent}\n\n${lastThinkContent}` : lastThinkContent
}

// Remove complete think tags from display content
let displayContent = content.replace(thinkRegex, '')
// Remove any unclosed think tag and its content
if (hasOpenThinkTag) {
displayContent = displayContent.slice(0, displayContent.lastIndexOf('<think>'))
}

return {
displayContent,
thinkContent,
hasThinkTag: thinkMatches.length > 0 || hasOpenThinkTag,
isThinking: hasOpenThinkTag
}
}

/**
* A component presenting the content of a chat message.
*/
Expand Down Expand Up @@ -204,10 +245,98 @@
smartApplyStates,
])

const { displayContent, thinkContent, hasThinkTag, isThinking } = useMemo(
() => extractThinkContent(displayMarkdown),
[displayMarkdown]
)

return (
<div ref={rootRef} data-testid="chat-message-content">
{hasThinkTag && (
<details
open
className={clsx(
"tw-container tw-mb-4",
"tw-border tw-border-gray-600/15 dark:tw-border-gray-500/20",
Copy link
Contributor Author

@arafatkatze arafatkatze Jan 31, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will fix all the CSS in proper files separately AFTER the design has been approved.

"tw-rounded-lg tw-overflow-hidden",
"tw-bg-gray-50/50 dark:tw-bg-gray-900/50",
"tw-backdrop-blur-sm tw-shadow-sm"
)}
>
<summary className={clsx(
"tw-flex tw-items-center tw-justify-between",
"tw-px-4 tw-py-3",
"tw-bg-gray-100/70 dark:tw-bg-gray-800/70",
"tw-cursor-pointer hover:tw-bg-gray-200/70 dark:hover:tw-bg-gray-700/70",
"tw-select-none tw-transition-all"
)}>
<div className="tw-flex tw-items-center tw-gap-2">
<div className="tw-flex tw-items-center tw-justify-center tw-w-5 tw-h-5">
<svg
className={clsx(
"tw-w-4 tw-h-4 tw-text-blue-500/80 dark:tw-text-blue-400/80",
isThinking && "tw-animate-pulse"
)}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>

Check failure on line 284 in vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

View workflow job for this annotation

GitHub Actions / build 

Alternative text title element cannot be empty
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707"
/>
</svg>
</div>
<span className="tw-text-sm tw-font-medium tw-text-gray-700 dark:tw-text-gray-200">
{isThinking ? "Thinking..." : "Thought Process"}
</span>
</div>
<div className="tw-flex tw-items-center tw-gap-2">
<div className={clsx(
"tw-flex tw-items-center tw-justify-center",
"tw-w-6 tw-h-6 tw-rounded-md",
"tw-bg-gray-200/50 dark:tw-bg-gray-700/50",
"tw-text-gray-500 dark:tw-text-gray-400",
"group-hover:tw-bg-gray-300/50 dark:group-hover:tw-bg-gray-600/50",
"tw-transition-colors"
)}>
<svg
className="tw-w-4 tw-h-4 tw-transition-transform details-toggle"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
>

Check failure on line 311 in vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

View workflow job for this annotation

GitHub Actions / build 

Alternative text title element cannot be empty
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
</div>
</summary>
<div className={clsx(
"tw-px-4 tw-py-3",
"tw-border-t tw-border-gray-200/30 dark:tw-border-gray-700/30",
"tw-bg-gray-50/30 dark:tw-bg-gray-900/30"
)}>
<MarkdownFromCody
className={clsx(
"tw-text-sm tw-text-gray-600 dark:tw-text-gray-300",
"tw-prose dark:tw-prose-invert tw-max-w-none",
"tw-leading-relaxed"
)}
>
{thinkContent}
</MarkdownFromCody>
</div>
</details>
)}
<MarkdownFromCody className={clsx(styles.content, className)}>
{displayMarkdown}
{displayContent}
</MarkdownFromCody>
</div>
)
Expand Down
1 change: 1 addition & 0 deletions vscode/webviews/components/MarkdownFromCody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const ALLOWED_ELEMENTS = [
'h5',
'h6',
'br',
'think',
]

function defaultUrlProcessor(url: string): string {
Expand Down
Loading