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

arafatkatze · 2025-01-31T08:55:27Z

Originally a PR from @abeatrix on having a thinktag UX.

This PR adds a simple hack to support rendering tags in the ChatMessageContent component. The content is displayed in a collapsible details element, allowing users to view the AI's internal thought process.
The MarkdownFromCody component is also updated to allow the element.

Test plan

Run SG instance locally and switch to branch fake-think-tag
Run cody with this branch in the debugger and choose sonnet model with the local SG instance(NOTE: Since the model is not actually released this is a fake hack)
Ask Cody "Tell me a long story"
Verify that tags are properly extracted and displayed in the ChatMessageContent component

Ensure that the collapsible details element functions as expected, allowing users to view the think content
Confirm that the MarkdownFromCody component correctly renders the element

This PR adds support for rendering <think> tags in the ChatMessageContent component. The <think> content is displayed in a collapsible details element, allowing users to view the AI's internal thought process. The MarkdownFromCody component is also updated to allow the <think> element.

arafatkatze · 2025-01-31T08:56:59Z

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

+                    open 
+                    className={clsx(
+                        "tw-container tw-mb-4",
+                        "tw-border tw-border-gray-600/15 dark:tw-border-gray-500/20",


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

PriNova · 2025-01-31T09:50:33Z

@arafatkatze If you need some inspirations how I implemented it, have a look at https://github.com/PriNova/cody/blob/dev/vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx
But to be honest, it is not somehow optimized.

I used special thinking tags to separate them from the model response for future changes.
The thinking tags I handled in the model response stream handler.
I don't know if this is the right choice, but it somehow works.

arafatkatze · 2025-02-03T14:12:47Z

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.module.css

@@ -217,3 +217,140 @@ body[data-vscode-theme-kind='vscode-light'] .content pre > code {
    color: var(--vscode-descriptionForeground);
    margin-left: auto;
 }
+
+/* Think Container Styles */
+.thinkContainer {


@taiyab I don't actually know much about how CSS works and this code was mostly LLM generated so

How about this? @abeatrix tests this code on functionality and verifies if this does what it claims to do. We can merge this in for now but down the line when you do a much proper cleanup and merger for agentic/normal chat you can take care of this too.

Any reason we want to do this in a stylesheet instead of using tailwind?

abeatrix

Left some comments in line. I think it'd be easier if you could change the merge into branch for this PR from main to the bee/think-tag branch so we can see what the changes are between this branch and the original branch, and then merge them together before we can ask design or product for the final review.

abeatrix · 2025-02-03T20:18:33Z

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

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


Suggested change

const thinkRegex = /<think>([\s\S]*?)<\/think>/g

const thinkRegex = /^<think>([\s\S]*?)<\/think>/g

Do we want to make sure only the tags at the beginning are being considered? I know I wrote the original regex but haven't really tested it throughoutly 😆

Also, do we want to consider "thinking" in additional to "think" for other provider? For example, Anthropic suggested using "" tags for CoT https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/chain-of-thought#how-to-prompt-for-thinking

abeatrix · 2025-02-03T20:42:56Z

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

+        displayContent,
+        thinkContent,
+        hasThinkTag: thinkMatches.length > 0 || hasOpenThinkTag,
+        isThinking: hasOpenThinkTag,


Suggested change

isThinking: hasOpenThinkTag,

If hasThinkTag is false it already means isThinking is true? Alternatively we can rename hasThinkTag to isThinking if you think that's more clear, but I don't think we will need both.

abeatrix · 2025-02-03T20:44:09Z

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

+    displayContent: string
+    thinkContent: string
+    hasThinkTag: boolean
+    isThinking: boolean


Suggested change

isThinking: boolean

abeatrix · 2025-02-03T20:47:34Z

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.module.css

@@ -217,3 +217,140 @@ body[data-vscode-theme-kind='vscode-light'] .content pre > code {
    color: var(--vscode-descriptionForeground);
    margin-left: auto;
 }
+
+/* Think Container Styles */
+.thinkContainer {


Any reason we want to do this in a stylesheet instead of using tailwind?

abeatrix

The code runs as described, but left a few comments about the styling and improvements we can make:

abeatrix · 2025-02-03T21:21:36Z

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.module.css

+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 0.375rem;
+    background-color: rgba(229, 231, 235, 0.5);


Suggested change

background-color: rgba(229, 231, 235, 0.5);

Do we need a background color for it?

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.module.css

…ule.css Co-authored-by: Beatrix <[email protected]>

abeatrix and others added 4 commits January 28, 2025 22:48

Adding a fix for think rendering

be2347c

Aesthetic

da034b9

Aesthetic

abcae2b

arafatkatze requested a review from abeatrix January 31, 2025 08:55

arafatkatze commented Jan 31, 2025

View reviewed changes

rename

31c8103

arafatkatze commented Feb 3, 2025

View reviewed changes

arafatkatze changed the title ~~[WIP] Showing the Think process for Deep Seek R1 in Cody UI~~ Showing the Think process for Deep Seek R1 in Cody UI Feb 3, 2025

arafatkatze requested review from a team and removed request for abeatrix February 3, 2025 15:43

abeatrix reviewed Feb 3, 2025

View reviewed changes

abeatrix requested changes Feb 3, 2025

View reviewed changes

Update vscode/webviews/chat/ChatMessageContent/ChatMessageContent.mod…

a04c8ae

…ule.css Co-authored-by: Beatrix <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

arafatkatze commented Jan 31, 2025 •

edited

Loading

arafatkatze Jan 31, 2025 •

edited

Loading

PriNova commented Jan 31, 2025 •

edited

Loading

arafatkatze Feb 3, 2025

abeatrix Feb 3, 2025

abeatrix left a comment

abeatrix Feb 3, 2025

abeatrix Feb 3, 2025

abeatrix Feb 3, 2025

abeatrix Feb 3, 2025

abeatrix Feb 3, 2025

abeatrix left a comment

abeatrix Feb 3, 2025

	const thinkRegex = /<think>([\s\S]*?)<\/think>/g
	const thinkRegex = /^<think>([\s\S]*?)<\/think>/g

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

Are you sure you want to change the base?

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

Conversation

arafatkatze commented Jan 31, 2025 • edited Loading

Test plan

arafatkatze Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

PriNova commented Jan 31, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abeatrix left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

abeatrix left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

arafatkatze commented Jan 31, 2025 •

edited

Loading

arafatkatze Jan 31, 2025 •

edited

Loading

PriNova commented Jan 31, 2025 •

edited

Loading