Showing the Think process for Deep Seek R1 in Cody UI #6896
+239
−1
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
|
|
@@ -39,6 +39,47 @@ interface ChatMessageContentProps { | |||||
| className?: string | ||||||
| } | ||||||
|
|
||||||
| interface StreamingContent { | ||||||
| displayContent: string | ||||||
| thinkContent: string | ||||||
| hasThinkTag: boolean | ||||||
| isThinking: boolean | ||||||
|
There was a problem hiding this comment.
Suggested change
|
||||||
| } | ||||||
|
|
||||||
| const extractThinkContent = (content: string): StreamingContent => { | ||||||
| const thinkRegex = /<think>([\s\S]*?)<\/think>/g | ||||||
|
There was a problem hiding this comment.
Suggested change
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 😆 There was a problem hiding this comment. 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 |
||||||
| 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, | ||||||
|
There was a problem hiding this comment.
Suggested change
If hasThinkTag is false it already means isThinking is true? Alternatively we can rename |
||||||
| } | ||||||
| } | ||||||
|
|
||||||
| /** | ||||||
| * A component presenting the content of a chat message. | ||||||
| */ | ||||||
|
|
@@ -204,10 +245,69 @@ export const ChatMessageContent: React.FunctionComponent<ChatMessageContentProps | |||||
| smartApplyStates, | ||||||
| ]) | ||||||
|
|
||||||
| const { displayContent, thinkContent, hasThinkTag, isThinking } = useMemo( | ||||||
| () => extractThinkContent(displayMarkdown), | ||||||
| [displayMarkdown] | ||||||
| ) | ||||||
|
|
||||||
| return ( | ||||||
| <div ref={rootRef} data-testid="chat-message-content"> | ||||||
| {hasThinkTag && ( | ||||||
| <details open className={styles.thinkContainer}> | ||||||
| <summary className={styles.thinkSummary}> | ||||||
| <div className={styles.thinkTitleContainer}> | ||||||
| <div className={styles.thinkIconContainer}> | ||||||
| <svg | ||||||
| className={clsx(styles.thinkIcon, isThinking && styles.thinking)} | ||||||
| viewBox="0 0 24 24" | ||||||
| fill="none" | ||||||
| stroke="currentColor" | ||||||
| strokeWidth="2" | ||||||
| role="img" | ||||||
| aria-label="Thinking indicator" | ||||||
| > | ||||||
| <title>Thinking indicator</title> | ||||||
| <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={styles.thinkTitle}> | ||||||
| {isThinking ? 'Thinking...' : 'Thought Process'} | ||||||
| </span> | ||||||
| </div> | ||||||
| <div className={styles.thinkToggleContainer}> | ||||||
| <div className={styles.thinkToggleButton}> | ||||||
| <svg | ||||||
| className={styles.thinkToggleIcon} | ||||||
| viewBox="0 0 24 24" | ||||||
| fill="none" | ||||||
| stroke="currentColor" | ||||||
| strokeWidth="2" | ||||||
| role="img" | ||||||
| aria-label="Toggle thought process" | ||||||
| > | ||||||
| <title>Toggle thought process</title> | ||||||
| <path | ||||||
| strokeLinecap="round" | ||||||
| strokeLinejoin="round" | ||||||
| d="M19 9l-7 7-7-7" | ||||||
| /> | ||||||
| </svg> | ||||||
| </div> | ||||||
| </div> | ||||||
| </summary> | ||||||
| <div className={styles.thinkContent}> | ||||||
| <MarkdownFromCody className={styles.thinkMarkdown}> | ||||||
| {thinkContent} | ||||||
| </MarkdownFromCody> | ||||||
| </div> | ||||||
| </details> | ||||||
| )} | ||||||
| <MarkdownFromCody className={clsx(styles.content, className)}> | ||||||
| {displayContent} | ||||||
| </MarkdownFromCody> | ||||||
| </div> | ||||||
| ) | ||||||
|
|
||||||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -53,6 +53,7 @@ const ALLOWED_ELEMENTS = [ | |
| 'h5', | ||
| 'h6', | ||
| 'br', | ||
| 'think', | ||
| ] | ||
|
|
||
| function defaultUrlProcessor(url: string): string { | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Any reason we want to do this in a stylesheet instead of using tailwind?