Feedback updated, ButtonSecondary added

.gitignore

@@ -11,3 +11,4 @@
 wrangler.toml
 *.sqlite
 .wrangler
+pnpm-lock.yaml

app/components/Article/article.css

@@ -161,10 +161,6 @@ article .footer-comtainer {
   margin-bottom: var(--spacing-24);
 }
 
-article .footer-comtainer > * {
-  margin: var(--spacing-8, 8px);
-}
-
 article a.see-more:not(.visible) + div.see-more-contents {
   display: none;
 }

app/components/Article/index.tsx

@@ -4,7 +4,8 @@ import KeepGoing from '~/components/Article/KeepGoing'
 import CopyIcon from '~/components/icons-generated/Copy'
 import EditIcon from '~/components/icons-generated/Pencil'
 import Button, {CompositeButton} from '~/components/Button'
-import Feedback from '~/components/Feedback'
+import ButtonSecondary, {ButtonSecondaryWrapper} from '../ButtonSecondary'
+import Feedback, {logFeedback} from '~/components/Feedback'
 import {tagUrl} from '~/routesMapper'
 import type {Glossary, Question, Banner as BannerType} from '~/server-utils/stampy'
 import Contents from './Contents'
@@ -22,21 +23,34 @@ const ArticleFooter = (question: Question) => {
 
   return (
     !isLoading(question) && (
-      <div className="footer-comtainer padding-bottom-40">
+      <div className="footer-comtainer padding-bottom-40 space-x-4">
         {date && <div className="grey"> {`Updated ${date}`}</div>}
-        <div className="flex-double">
-          <Button
-            className="secondary"
+        <ButtonSecondaryWrapper>
+          <ButtonSecondary
             action={question.answerEditLink || ''}
-            tooltip="Suggest changes in Google Docs"
+            tooltip="Google Doc"
             props={{target: '_blank', rel: 'noopener noreferrer'}}
           >
-            <EditIcon className="no-fill" />
-          </Button>
-        </div>
-        <span>Was this page helpful?</span>
-
-        <Feedback pageid={question.pageid} labels />
+            <EditIcon />
+          </ButtonSecondary>
+        </ButtonSecondaryWrapper>
+        <Feedback
+          showForm
+          formClassName="left-[845px]"
+          pageid={question.pageid}
+          onSubmit={async (message: string, option?: string) =>
+            logFeedback({
+              message,
+              option,
+              type: 'bot',
+              question: question.title || '',
+              answer: question.text || '',
+            })
+          }
+          options={['Unclear', 'Too wordy', 'Confusing', 'Incorrect', 'Other']}
+          upHint="This page was helpful"
+          downHint="This page was unhelpful"
+        />
       </div>
     )
   )

app/components/ButtonSecondary/button_secondary.css

@@ -0,0 +1,15 @@
+.button-secondary .tool-tip {
+  opacity: 0;
+}
+
+.button-secondary:hover .tool-tip {
+  opacity: 1;
+}
+
+.thumb path {
+  stroke: #788492;
+}
+
+.active path {
+  stroke: var(--colors-teal-600);
+}

app/components/ButtonSecondary/index.tsx

@@ -0,0 +1,81 @@
+import {ReactNode} from 'react'
+import {Link} from '@remix-run/react'
+import './button_secondary.css'
+
+type ButtonProps = {
+  action?: string | (() => void)
+  children?: ReactNode
+  className?: string
+  tooltip?: string
+  active?: boolean
+  disabled?: boolean
+  props?: {[k: string]: any}
+}
+const ButtonSecondary = ({
+  children,
+  action,
+  tooltip,
+  className,
+  active = false,
+  disabled = false,
+  props,
+}: ButtonProps) => {
+  if (typeof action === 'string') {
+    return (
+      <Link
+        to={action}
+        className={
+          'button-secondary relative leading-7 p-1 rounded-[6px] ' +
+          (active ? 'bg-[#EDFAF9] active' : disabled ? '' : 'hover:bg-[#F9FAFC]') +
+          (className ? ' ' + className : '')
+        }
+        onClick={(e) => {
+          if (disabled) {
+            e.preventDefault()
+          }
+        }}
+        {...props}
+      >
+        {children}
+        {tooltip && !disabled && (
+          <p className="tool-tip absolute top-[-42px] left-1/2 transform -translate-x-1/2 bg-[#1B2B3E] text-[14px] text-[#f2f2f2] py-[5px] px-[15px] rounded-[8px] whitespace-nowrap pointer-events-none">
+            {tooltip}
+          </p>
+        )}
+      </Link>
+    )
+  }
+  return (
+    <button
+      className={
+        'button-secondary relative leading-7 p-1 rounded-[6px] ' +
+        (active ? 'bg-[#EDFAF9] active' : disabled ? '' : 'hover:bg-[#F9FAFC]') +
+        (className ? ' ' + className : '')
+      }
+      onClick={action}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+      {tooltip && !disabled && (
+        <p className="tool-tip absolute top-[-42px] left-1/2 transform -translate-x-1/2 bg-[#1B2B3E] text-[14px] text-[#f2f2f2] py-[5px] px-[15px] rounded-[8px] whitespace-nowrap pointer-events-none">
+          {tooltip}
+        </p>
+      )}
+    </button>
+  )
+}
+
+export interface ButtonSecondaryWrapperProps {
+  children: ReactNode
+  className?: string
+}
+export const ButtonSecondaryWrapper = ({children, className}: ButtonSecondaryWrapperProps) => (
+  <div
+    className={`flex border-[var(--colors-cool-grey-200)] border-[1px] rounded-[6px] space-x-[4px] p-[7px] justify-center items-center size-min ${className || ''}`}
+  >
+    {children}
+  </div>
+)
+
+export default ButtonSecondary

app/components/Feedback/Form.tsx

@@ -6,20 +6,21 @@ import './feedback.css'
 export type FeedbackFormProps = {
   onSubmit?: (msg: string, option?: string) => Promise<any>
   onClose?: () => void
+  className?: string
   options?: string[]
 }
-const FeedbackForm = ({onSubmit, onClose, options}: FeedbackFormProps) => {
+const FeedbackForm = ({onSubmit, onClose, options, className}: FeedbackFormProps) => {
   const [selected, setSelected] = useState<string>()
   const [message, setMessage] = useState('')
   const [enabledSubmit, setEnabledSubmit] = useState(!options)
   const [numClicks, setNumClicks] = useState(0)
   const clickCheckerRef = useOutsideOnClick(onClose)
 
   useEffect(() => {
-    // Hide the form after 10 seconds if the user hasn't interacted with it
+    // Hide the form after 15 seconds if the user hasn't interacted with it
     const timeoutId = setInterval(() => {
       onClose && onClose()
-    }, 10000)
+    }, 15000)
 
     // Clear the timeout to prevent it from running if the component unmounts
     return () => clearInterval(timeoutId)
@@ -39,9 +40,12 @@ const FeedbackForm = ({onSubmit, onClose, options}: FeedbackFormProps) => {
     <div
       ref={clickCheckerRef}
       onClick={() => setNumClicks((current) => current + 1)}
-      className="fcol-5 feedback-form bordered"
+      className={
+        'flex flex-col feedback-form bordered !fixed top-[50px] left-[calc(13.333vw+85px)] w-[384px] ' +
+        (className ?? '')
+      }
     >
-      <span className="black small padding-bottom-32">What was the problem?</span>
+      <span className="black small pb-8">What was the problem?</span>
       {options?.map((option) => (
         <Button
           key={option}

app/components/Feedback/feedback.css

@@ -28,7 +28,6 @@
   padding: var(--spacing-12);
   margin: var(--spacing-40) 0;
   box-sizing: content-box;
-  background: pink;
 }
 .feedback-text.no-options {
   margin: var(--spacing-16) 0;
@@ -38,6 +37,11 @@
   opacity: 1;
 }
 
+.thanks {
+  opacity: 0;
+  transition: opacity 0.25s ease-in-out; /* Transition effect */
+}
+
 .composite-button > .feedback-form {
   position: absolute;
   transform: translate(-9vw, var(--spacing-56));

app/components/Feedback/index.tsx

@@ -1,9 +1,9 @@
-import {useEffect, useState} from 'react'
-import {CompositeButton} from '~/components/Button'
+import {useEffect, useState, useRef} from 'react'
 import {Action, ActionType} from '~/routes/questions.actions'
 import './feedback.css'
 import FeedbackForm from './Form'
 import type {Citation} from '~/hooks/useChat'
+import {ButtonSecondaryWrapper} from '../ButtonSecondary'
 
 type FeedbackType = {
   option?: string
@@ -29,8 +29,9 @@ type FeedbackProps = {
   labels?: boolean
   upHint?: string
   downHint?: string
+  formClassName?: string
   options?: string[]
-  onSubmit?: (message: string, option?: string) => Promise<any>
+  onSubmit: (message: string, option?: string) => Promise<any>
 }
 const Feedback = ({
   pageid,
@@ -39,48 +40,69 @@ const Feedback = ({
   upHint,
   downHint,
   options,
+  formClassName,
   onSubmit,
 }: FeedbackProps) => {
-  const [showFeedback, setShowFeedback] = useState(false)
+  const [showThanks, setShowThanks] = useState(false)
   const [showFeedbackForm, setShowFeedbackForm] = useState(false)
+  const [vote, setVote]: any = useState(undefined)
+
+  const thanksRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    const timeout = setInterval(() => setShowFeedback(false), 6000)
-    return () => clearInterval(timeout)
-  }, [showFeedback])
+    if (showThanks && thanksRef.current) {
+      thanksRef.current.style.opacity = '1'
+      setTimeout(() => {
+        if (thanksRef.current) thanksRef.current.style.opacity = '0'
+      }, 6000)
+    }
+  }, [showThanks])
 
   return (
-    <div className="feedback relative">
-      <CompositeButton className="flex-container">
+    <div className="flex items-center">
+      <ButtonSecondaryWrapper>
         <Action
           pageid={pageid}
           showText={!!labels}
           actionType={ActionType.HELPFUL}
+          active={vote === 'helpful'}
+          dissabled={!!vote}
           hint={upHint}
-          onClick={() => setShowFeedback(true)}
+          onClick={() => {
+            setVote('helpful')
+            setShowThanks(true)
+          }}
         />
         <Action
           pageid={pageid}
           showText={!!labels}
           hint={downHint}
           actionType={ActionType.UNHELPFUL}
+          active={vote === 'unhelpful'}
+          dissabled={!!vote}
           onClick={() => {
-            setShowFeedback(!showForm)
+            setVote('unhelpful')
+            setShowThanks(!showForm)
             setShowFeedbackForm(!!showForm)
           }}
         />
-      </CompositeButton>
+      </ButtonSecondaryWrapper>
 
-      {showFeedback && <div className="thanks">Thanks for your feedback!</div>}
+      <div ref={thanksRef} className="thanks ml-2 opacity-0 pointer-events-none">
+        Thank you for your feedback!
+      </div>
 
       {showFeedbackForm && (
         <FeedbackForm
-          onSubmit={onSubmit}
+          onSubmit={(att) => {
+            setShowThanks(true)
+            return onSubmit(att)
+          }}
           onClose={() => {
-            setShowFeedback(true)
             setShowFeedbackForm(false)
           }}
           options={options}
+          className={formClassName}
         />
       )}
     </div>

app/root.css

@@ -1,4 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway&display=swap');
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
 
 :root {
   /* colors */