Repository: expo/expo
File: docs/ui/components/AskPageAI/AskPageAIChatHeader.tsx (TypeScript)

Code before:
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-2">
          <span
            className={mergeClasses(
              'inline-flex size-8 items-center justify-center rounded-full bg-palette-white shadow-xs'
            )}
            style={headerAccentBackground}>
            <Star06Icon className="icon-sm text-palette-white" />
          </span>
          <span className="text-sm font-medium leading-tight text-palette-white">
            Expo AI Assistant
          </span>
        </div>
        <div className="flex items-center gap-1">
          <Button
            type="button"
            aria-label="Provide positive feedback"
            theme="quaternary"
            size="xs"
            className="px-2 !text-palette-white hover:!text-palette-white focus:!text-palette-white"
            style={{
              ...closeButtonThemeOverrides,
              ...(isUpvoted ? activeFeedbackBackground : {}),
            }}
            aria-pressed={isUpvoted}
            disabled={!feedbackTarget?.isFeedbackSubmissionEnabled}
            onClick={() => {
              onFeedback('upvote');
            }}>
            <ThumbsUpIcon
              className={mergeClasses(
                'icon-xs',
                isUpvoted ? 'text-icon-success' : 'text-palette-white'
              )}
            />
          </Button>
          <Button
            type="button"
            aria-label="Provide negative feedback"
            theme="quaternary"
            size="xs"
            className="px-2 !text-palette-white hover:!text-palette-white focus:!text-palette-white"
            style={{
              ...closeButtonThemeOverrides,
              ...(isDownvoted ? activeFeedbackBackground : {}),
            }}
            aria-pressed={isDownvoted}
            disabled={!feedbackTarget?.isFeedbackSubmissionEnabled}
            onClick={() => {
              onFeedback('downvote');
            }}>

Review comment (suggestion):
Wondering if the disabled state also include the disable cursor? There isn't a lot of visual indication between disabled & not disabled so it was hard to tell why the buttons weren't active.

Alternatively, maybe let's not show the buttons if they're not clickable?

Or - and this is definitely out of scope of this PR, could it be per question instead of per chat? 🤔 

Code after:
            <Button
              type="button"
              aria-label={isExpanded ? 'Restore Ask AI assistant size' : 'Expand Ask AI assistant'}
              theme="quaternary"
              size="xs"
              className="px-2 !text-palette-white hover:!text-palette-white focus:!text-palette-white"
              style={closeButtonThemeOverrides}
              aria-pressed={isExpanded}
              onClick={onToggleExpand}>
              {isExpanded ? (
                <Minimize02Icon className="icon-xs text-palette-white" />
              ) : (
                <Maximize02Icon className="icon-xs text-palette-white" />
              )}
            </Button>
          ) : null}
          <Button
            type="button"
            aria-label="Reset conversation"
            theme="quaternary"
            size="xs"
            className="px-2 !text-palette-white hover:!text-palette-white focus:!text-palette-white"
            style={closeButtonThemeOverrides}
            onClick={onReset}>
            <RefreshCcw02Icon className="icon-xs text-palette-white" />
          </Button>
          <Button
            aria-label="Close Ask AI assistant"
            theme="quaternary"
            size="xs"
            className="px-2 !text-palette-white hover:!text-palette-white focus:!text-palette-white"
            style={closeButtonThemeOverrides}
            onClick={onClose}>
            <XIcon className="icon-xs text-palette-white" />
          </Button>
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <FOOTNOTE className="text-palette-white">
          Ask a question about{' '}
          <span className="font-semibold">
            {contextScope === 'page' ? displayContextLabel : 'the Expo docs'}
          </span>
          .
        </FOOTNOTE>
        {contextScope === 'global' && onSwitchToPageContext ? (
          <Button
            type="button"
            theme="quaternary"
            size="xs"
            className="inline-flex items-center self-start px-2 py-1.5 !text-palette-white hover:!text-palette-white focus:!text-palette-white"