Add setting for enabling/disabling cody chat syntax highlighting (#8185)

## Changes

This PR allows users to disable chat code highlighting using
`cody.chatCodeSyntaxHighlightingEnabled` user setting.
This may be useful e.g. for testing purposes, as we recently discovered
that in some environments syntax highlighting seems to be causing a
memory leak when multiple code snippets are streamed.

## Test plan

1. Run `pnpm dev:standalone`
2. Open http://localhost:5777/ and ask cody to give you a short java
code snippet.
3. Make sure code **is highlighted**
4. In your user settings at
https://sourcegraph.sourcegraph.com/users/{username}/settings add the
following setting:

```
{
  "cody.chatCodeSyntaxHighlightingEnabled": false
}
```

5. Refresh http://localhost:5777/ and ask cody to give you a short java
code snippet again.
6. Make sure code **is NOT highlighted**

Author: pkukielka

lib/shared/src/sourcegraph-api/clientConfig.test.ts

@@ -10,6 +10,7 @@ import { graphqlClient } from './graphql/client'
 
 const CLIENT_CONFIG_FIXTURE: CodyClientConfig = {
     chatEnabled: true,
+    chatCodeHighlightingEnabled: true,
     autoCompleteEnabled: true,
     customCommandsEnabled: true,
     attributionEnabled: false,
@@ -300,6 +301,7 @@ describe('ClientConfigSingleton', () => {
         const fixture2: CodyClientConfig = {
             ...CLIENT_CONFIG_FIXTURE,
             chatEnabled: !CLIENT_CONFIG_FIXTURE.chatEnabled,
+            chatCodeHighlightingEnabled: CLIENT_CONFIG_FIXTURE.chatCodeHighlightingEnabled,
         }
         fetchHTTPMock.mockResolvedValue(fixture2)
         authStatusSubject.next({ ...AUTH_STATUS_FIXTURE_AUTHED, endpoint: 'https://other.example.com' })

lib/shared/src/sourcegraph-api/clientConfig.ts

@@ -39,6 +39,9 @@ export interface CodyClientConfig {
     // Whether the site admin allows this user to make use of the Cody chat feature.
     chatEnabled: boolean
 
+    // Whether code snippets in the Cody chat should be highlighted.
+    chatCodeHighlightingEnabled?: boolean
+
     // Whether the site admin allows this user to make use of the Cody autocomplete feature.
     autoCompleteEnabled: boolean
 
@@ -95,6 +98,7 @@ export const dummyClientConfigForTest: CodyClientConfig = {
     siteVersion: undefined,
     omniBoxEnabled: false,
     codeSearchEnabled: false,
+    chatCodeHighlightingEnabled: true,
 }
 
 /**
@@ -248,6 +252,9 @@ export class ClientConfigSingleton {
                                 message: notice?.message ?? '',
                             })
                         )
+
+                        config.chatCodeHighlightingEnabled =
+                            viewerSettings?.['cody.chatCodeSyntaxHighlightingEnabled'] ?? true
                     }
 
                     return config

vscode/webviews/App.tsx

@@ -219,6 +219,7 @@ export const App: React.FunctionComponent<{ vscodeAPI: VSCodeWrapper }> = ({ vsc
                     errorMessages={errorMessages}
                     setErrorMessages={setErrorMessages}
                     chatEnabled={clientConfig?.chatEnabled ?? true}
+                    chatCodeHighlightingEnabled={clientConfig?.chatCodeHighlightingEnabled ?? true}
                     instanceNotices={clientConfig?.notices ?? []}
                     messageInProgress={messageInProgress}
                     transcript={transcript}

vscode/webviews/Chat.story.tsx

@@ -25,6 +25,7 @@ const meta: Meta<typeof Chat> = {
         transcript: FIXTURE_TRANSCRIPT.simple2,
         messageInProgress: null,
         chatEnabled: true,
+        chatCodeHighlightingEnabled: true,
         vscodeAPI: {
             postMessage: () => {},
             onMessage: () => () => {},

vscode/webviews/Chat.tsx

@@ -23,6 +23,7 @@ import { useUserAccountInfo } from './utils/useConfig'
 
 interface ChatboxProps {
     chatEnabled: boolean
+    chatCodeHighlightingEnabled: boolean
     messageInProgress: ChatMessage | null
     transcript: ChatMessage[]
     tokenUsage?:
@@ -49,6 +50,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
     models,
     vscodeAPI,
     chatEnabled = true,
+    chatCodeHighlightingEnabled = true,
     guardrails,
     showWelcomeMessage = true,
     showIDESnippetActions = true,
@@ -217,6 +219,7 @@ export const Chat: React.FunctionComponent<React.PropsWithChildren<ChatboxProps>
                 smartApply={smartApply}
                 userInfo={userInfo}
                 chatEnabled={chatEnabled}
+                chatCodeHighlightingEnabled={chatCodeHighlightingEnabled}
                 postMessage={postMessage}
                 guardrails={guardrails}
             />

vscode/webviews/CodyPanel.tsx

@@ -40,6 +40,7 @@ interface CodyPanelProps {
     }
     errorMessages: string[]
     chatEnabled: boolean
+    chatCodeHighlightingEnabled: boolean
     instanceNotices: CodyNotice[]
     messageInProgress: ChatMessage | null
     transcript: ChatMessage[]
@@ -70,6 +71,7 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
     errorMessages,
     setErrorMessages,
     chatEnabled,
+    chatCodeHighlightingEnabled,
     instanceNotices,
     messageInProgress,
     transcript,
@@ -159,6 +161,7 @@ export const CodyPanel: FunctionComponent<CodyPanelProps> = ({
                     {view === View.Chat && (
                         <Chat
                             chatEnabled={chatEnabled}
+                            chatCodeHighlightingEnabled={chatCodeHighlightingEnabled}
                             messageInProgress={messageInProgress}
                             transcript={transcript}
                             tokenUsage={tokenUsage}

vscode/webviews/chat/ChatMessageContent/ChatMessageContent.tsx

@@ -45,6 +45,7 @@ interface ChatMessageContentProps {
     setThoughtProcessOpened?: (open: boolean) => void
 
     guardrails: Guardrails
+    chatCodeHighlightingEnabled?: boolean
     className?: string
 }
 
@@ -61,6 +62,7 @@ export const ChatMessageContent: React.FunctionComponent<ChatMessageContentProps
         onRegenerate,
         regeneratingCodeBlocks,
         guardrails,
+        chatCodeHighlightingEnabled,
         className,
         smartApply,
         isThoughtProcessOpened,
@@ -122,6 +124,7 @@ export const ChatMessageContent: React.FunctionComponent<ChatMessageContentProps
                     smartApply={smartApply}
                     className={clsx(styles.content, className)}
                     hasEditIntent={humanMessage?.intent === 'edit'}
+                    chatCodeHighlightingEnabled={chatCodeHighlightingEnabled}
                 />
             </div>
         )

vscode/webviews/chat/Transcript.story.tsx

@@ -41,6 +41,7 @@ const meta: Meta<typeof Transcript> = {
         userInfo: FIXTURE_USER_ACCOUNT_INFO,
         postMessage: () => {},
         chatEnabled: true,
+        chatCodeHighlightingEnabled: true,
         models: FIXTURE_MODELS,
         setActiveChatContext: () => {},
         guardrails: new MockNoGuardrails(),

vscode/webviews/chat/Transcript.test.tsx

@@ -14,6 +14,7 @@ const PROPS: Omit<ComponentProps<typeof Transcript>, 'transcript'> = {
     insertButtonOnSubmit: () => {},
     userInfo: FIXTURE_USER_ACCOUNT_INFO,
     chatEnabled: true,
+    chatCodeHighlightingEnabled: true,
     postMessage: () => {},
     models: FIXTURE_MODELS,
     setActiveChatContext: () => {},

vscode/webviews/chat/Transcript.tsx

@@ -53,6 +53,7 @@ interface TranscriptProps {
     activeChatContext?: Context
     setActiveChatContext: (context: Context | undefined) => void
     chatEnabled: boolean
+    chatCodeHighlightingEnabled: boolean
     transcript: ChatMessage[]
     tokenUsage?:
         | {
@@ -95,6 +96,7 @@ export const Transcript: FC<TranscriptProps> = props => {
         activeChatContext,
         setActiveChatContext,
         chatEnabled,
+        chatCodeHighlightingEnabled,
         transcript,
         tokenUsage,
         models,
@@ -219,6 +221,7 @@ export const Transcript: FC<TranscriptProps> = props => {
                     tokenUsage={tokenUsage}
                     models={models}
                     chatEnabled={chatEnabled}
+                    chatCodeHighlightingEnabled={chatCodeHighlightingEnabled}
                     userInfo={userInfo}
                     guardrails={guardrails}
                     postMessage={postMessage}
@@ -250,6 +253,7 @@ export const Transcript: FC<TranscriptProps> = props => {
             tokenUsage,
             models,
             chatEnabled,
+            chatCodeHighlightingEnabled,
             userInfo,
             guardrails,
             postMessage,
@@ -400,6 +404,7 @@ const TranscriptInteraction: FC<TranscriptInteractionProps> = memo(props => {
         priorAssistantMessageIsLoading,
         userInfo,
         chatEnabled,
+        chatCodeHighlightingEnabled,
         postMessage,
         guardrails,
         insertButtonOnSubmit,
@@ -771,6 +776,7 @@ const TranscriptInteraction: FC<TranscriptInteractionProps> = memo(props => {
                         userInfo={userInfo}
                         models={models}
                         chatEnabled={chatEnabled}
+                        chatCodeHighlightingEnabled={chatCodeHighlightingEnabled}
                         message={assistantMessage}
                         copyButtonOnSubmit={copyButtonOnSubmit}
                         insertButtonOnSubmit={insertButtonOnSubmit}