Prepare one box UI for Cody Web usage #5552
Conversation
| @@ -328,8 +328,8 @@ const TranscriptInteraction: FC<TranscriptInteractionProps> = memo(props => { | |||
| contextAlternatives={humanMessage.contextAlternatives} | |||
| model={assistantMessage?.model} | |||
| isForFirstMessage={humanMessage.index === 0} | |||
| showSnippets={experimentalOneBoxEnabled && humanMessage.intent === 'search'} | |||
There was a problem hiding this comment.
Show snippets only for search intent results (for now)
| @@ -46,7 +46,7 @@ | |||
| z-index: 1; | |||
|
|
|||
| border-bottom: 1px solid var(--cody-chat-code-border-color); | |||
| background-color: var(--vscode-titleBar-inactiveBackground); | |||
| background-color: var(--cody-chat-code-header-background); | |||
There was a problem hiding this comment.
My mistake, forgot to use a more specific design token for code blocks header
| @@ -103,7 +103,7 @@ export const CodeExcerpt: FC<Props> = props => { | |||
| }, [highlightRanges, startLine, endLine, tableContainerElement, table]) | |||
|
|
|||
| return ( | |||
| <Code className={clsx(styles.codeExcerpt, className)}> | |||
| <Code className={clsx(styles.codeExcerpt, className)} data-code-excerpt={true}> | |||
There was a problem hiding this comment.
This is needed to target it from Sourcegraph App via CSS selector (to avoid some web app styling for code tags)
| @@ -40,7 +40,7 @@ const AccordionContent = React.forwardRef< | |||
| >(({ className, children, ...props }, ref) => ( | |||
| <AccordionPrimitive.Content | |||
| ref={ref} | |||
| className="tw-overflow-hidden tw-transition-all data-[state=closed]:tw-animate-accordion-up data-[state=open]:tw-animate-accordion-down" | |||
There was a problem hiding this comment.
Search Code blocks should have sticky headers but with overflowed container sticky position simply doesn't work, I don't know the exact reasons why we need this overflow, I checked and animation and accordion UI still works without it, will be happy to revert if someone has any concerns about it
| @@ -1,3 +1,5 @@ | |||
| @import url('../../vscode/.storybook/static/vscode-themes/dark-modern.css'); | |||
There was a problem hiding this comment.
Include dark theme styles only for Cody Web demo
| @@ -171,7 +171,6 @@ export const ContextCell: FunctionComponent<{ | |||
| <FileContextItem | |||
| item={item} | |||
| showSnippets={showSnippets} | |||
| defaultOpen={defaultOpen} | |||
There was a problem hiding this comment.
I would still keep both the args. Both do not every time we show snippets, we need them to be opened by default, and we might experiment with this UX in the near future.
But its fine, we can add it later if required. Non blocking.
This PR
Test plan