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

Code before:
  isExpanded,
  onToggleExpand,
  onSwitchToPageContext,
  onReset,
  onClose,
  feedbackTarget,
  onFeedback,
}: AskPageAIChatHeaderProps) {
  const closeButtonThemeOverrides = useMemo(
    () =>
      ({
        '--expo-theme-button-quaternary-hover': 'rgba(255,255,255,0.12)',
        '--expo-theme-button-quaternary-text': '#ffffff',
        '--expo-theme-button-quaternary-icon': '#ffffff',
      }) as CSSProperties,
    []
  );

  const headerAccentBackground = useMemo(() => ({ backgroundColor: 'rgba(255,255,255,0.1)' }), []);

  const activeFeedbackBackground = useMemo(
    () => ({ backgroundColor: 'rgba(255,255,255,0.12)' }),
    []
  );

  const isUpvoted = feedbackTarget?.reaction === 'upvote';
  const isDownvoted = feedbackTarget?.reaction === 'downvote';

  return (
    <div className="flex flex-col gap-3 border-b border-default bg-palette-black px-4 py-2.5 text-palette-white">
      <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={{

Review comment (suggestion):
Once you upvote or downvote, it's not possible to reset - I was expecting clicking the selected button again to "reset" my vote, but it doesn't seem that's possible. Could it be? (Not a big deal if not, just what I was expecting as a user so I'm curious)

Code after:
}: AskPageAIChatHeaderProps) {
  const closeButtonThemeOverrides = useMemo(
    () =>
      ({
        '--expo-theme-button-quaternary-hover': 'rgba(255,255,255,0.12)',
        '--expo-theme-button-quaternary-text': '#ffffff',
        '--expo-theme-button-quaternary-icon': '#ffffff',
      }) as CSSProperties,
    []
  );

  const headerAccentBackground = useMemo(() => ({ backgroundColor: 'rgba(255,255,255,0.1)' }), []);

  return (
    <div className="flex flex-col gap-3 border-b border-default bg-palette-black px-4 py-2.5 text-palette-white">
      <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">
          {onToggleExpand ? (
            <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"