Mobile issues fixed, bugs fixed, improved search

app/components/Article/Contents.tsx

@@ -142,7 +142,7 @@ const insertGlossary = (pageid: string, glossary: Glossary) => {
         `glossary-${entry.term}-${randomId}`,
         `<div class="glossary-popup flex-container black small">
               <div class="contents ${image ? '' : 'full-width'}">
-                   <div class="small-bold">${entry.term}</div>
+                   <div class="small-bold text-no-wrap">${entry.term}</div>
                    <div class="definition small">${entry.contents}</div>
                    ${link || ''}
               </div>

app/components/Article/article.css

@@ -115,6 +115,8 @@ article .footnote-ref {
 }
 
 article .glossary-popup {
+  border-radius: var(--border-radius);
+  overflow: hidden;
   height: 304px;
 }
 
@@ -136,7 +138,6 @@ article .definition {
 }
 article .link-popup .glossary-popup > img {
   width: 100%;
-  height: 303px;
   border-top-right-radius: var(--border-radius);
   border-bottom-right-radius: var(--border-radius);
 }

app/components/Button/index.tsx

@@ -1,5 +1,4 @@
 import {ReactNode} from 'react'
-import {Link} from '@remix-run/react'
 import './button.css'
 import useIsMobile from '~/hooks/isMobile'
 
@@ -35,8 +34,8 @@ const Button = ({
     .join(' ')
   if (typeof action === 'string') {
     return (
-      <Link
-        to={action}
+      <a
+        href={action}
         className={classes}
         onClick={(e) => {
           if (disabled) {
@@ -47,7 +46,7 @@ const Button = ({
       >
         {children}
         {tooltip && !disabled && !mobile && <p className="tool-tip xs z-index-1">{tooltip}</p>}
-      </Link>
+      </a>
     )
   }
   return (

app/components/Chatbot/ChatEntry.tsx

@@ -51,7 +51,7 @@ type TitleProps = {
   hint?: string
 }
 const Title = ({title, Icon, answerType, hint}: TitleProps) => (
-  <div className="title-container padding-bottom-16">
+  <div className="title-container padding-bottom-8">
     <Icon width="40" height="40" />
     <div className="title-inner-container">
       <span className="default-bold">{title}</span>
@@ -63,7 +63,7 @@ const Title = ({title, Icon, answerType, hint}: TitleProps) => (
 const UserQuery = ({content}: Entry) => (
   <div>
     <Title title="You" Icon={PersonInCircleIcon} />
-    <div className="padding-left-56 large-reading">{content}</div>
+    <div className="padding-left-56-rigid large-reading">{content}</div>
   </div>
 )
 
@@ -96,9 +96,13 @@ const ReferenceSummary = ({
     )
   }
 
+  function convertAscii(str: string) {
+    return str.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec))
+  }
+
   return (
     <div>
-      <div className={`black padding-bottom-8 ${titleClass}`}>{title}</div>
+      <div className={`black padding-bottom-8 ${titleClass}`}>{convertAscii(title)}</div>
       <div className="small">
         <Authors authors={authors} />
         <span>{'  ·  '}</span>
@@ -217,7 +221,7 @@ const ChatbotReply = ({
         hint="Generated by an AI model"
       />
       <PhaseState />
-      <div className="padding-bottom-56 padding-left-56 large-reading">
+      <div className="padding-bottom-56 padding-left-56-rigid large-reading">
         {content?.split(/(\[\d+\])|(\n)/).map((chunk, i) => {
           if (chunk?.match(/(\[\d+\])/)) {
             const refId = chunk.slice(1, chunk.length - 1)
@@ -239,6 +243,7 @@ const ChatbotReply = ({
       {['followups', 'done'].includes(phase || '') ? (
         <Feedback
           showForm
+          className={citations && citations.length > 0 ? '' : 'padding-left-56-rigid'}
           pageid="chatbot"
           upHint="This response was helpful"
           downHint="This response was unhelpful"
@@ -280,6 +285,7 @@ const StampyArticle = ({pageid, content, title, no}: StampyEntry & {no: number})
           />
         </article>
         <Feedback
+          className="padding-left-56-rigid"
           showForm
           pageid={pageid}
           upHint="This response was helpful"

app/components/Chatbot/chat_entry.css

@@ -3,7 +3,7 @@ article.stampy {
   padding: var(--spacing-40);
   border-radius: var(--spacing-6);
   max-width: unset;
-  margin-left: var(--spacing-56);
+  margin-left: 56px;
   margin-bottom: var(--spacing-24);
   border-radius: var(--border-radius);
 }
@@ -172,6 +172,10 @@ article.stampy {
   overflow: hidden;
 }
 
+.padding-left-56-rigid {
+  padding-left: 56px;
+}
+
 @media (min-width: 780px) {
   .reference-popup {
     display: inline-block;

app/components/Chatbot/index.tsx

@@ -6,7 +6,6 @@ import IconStampySmall from '~/components/icons-generated/StampySmall'
 import SendIcon from '~/components/icons-generated/PlaneSend'
 import Button from '~/components/Button'
 import {queryLLM, Entry, AssistantEntry, StampyEntry, Followup, ChatSettings} from '~/hooks/useChat'
-import useOutsideOnClick from '~/hooks/useOnOutsideClick'
 import useOnSiteQuestions from '~/hooks/useOnSiteQuestions'
 import ChatEntry from './ChatEntry'
 import './widgit.css'
@@ -36,7 +35,6 @@ const QuestionInput = ({
 }: QuestionInputProps) => {
   const [question, setQuestion] = useState(initial || '')
   const {results, search, clear} = useSearch(1)
-  const clickDetectorRef = useOutsideOnClick(() => handleChange(''))
   const mobile = useIsMobile()
 
   const handleAsk = (val: string) => {
@@ -63,7 +61,6 @@ const QuestionInput = ({
         'widget-ask ' +
         (fixed ? `fixed z-index-1 ${mobile ? 'mobile-chat-width' : 'col-10'}` : 'col-9')
       }
-      ref={clickDetectorRef}
     >
       {results.length > 0 ? (
         <Button

app/components/Feedback/index.tsx

@@ -29,6 +29,7 @@ type FeedbackProps = {
   labels?: boolean
   upHint?: string
   downHint?: string
+  className?: string
   formClassName?: string
   options?: string[]
   onSubmit: (message: string, option?: string) => Promise<any>
@@ -40,6 +41,7 @@ const Feedback = ({
   upHint,
   downHint,
   options,
+  className = '',
   formClassName,
   onSubmit,
 }: FeedbackProps) => {
@@ -53,7 +55,7 @@ const Feedback = ({
   }, [showThanks])
 
   return (
-    <div className="feedback">
+    <div className={`feedback ${className}`}>
       <CompositeButton secondary>
         <Action
           pageid={pageid}

app/components/Nav/Mobile/index.tsx

@@ -71,7 +71,7 @@ const Menu = ({state, setState}: MenuProps) => {
             action={() => setState('articles')}
           />
         )}
-        {isMenu && <MenuItem label="Stampy chatbot" Icon={BotIcon} action="/chat" />}
+        {isMenu && <MenuItem label="AI Safety Chatbot" Icon={BotIcon} action="/chat/" />}
       </header>
     )
   )

app/components/Nav/Mobile/navMobile.css

@@ -41,10 +41,6 @@
     width: 100%;
   }
 
-  .container-search-results {
-    width: calc(100% - 48px);
-  }
-
   .articles-mobile .articles-dropdown-container {
     visibility: visible;
     flex-direction: column;

app/components/SearchResults/Dropdown.tsx

@@ -33,14 +33,14 @@ export const SearchResults = ({
   const noResults = results.length === 0
   if (noResults) {
     return (
-      <div className="full-width container-search-results bordered col-5">
+      <div className="full-width container-search-results bordered">
         <div className="search-result">No results found</div>
       </div>
     )
   }
 
   return (
-    <div className="container-search-results bordered col-5" onClick={onSelect}>
+    <div className="container-search-results bordered" onClick={onSelect}>
       {results.map((result, i) => (
         <Link key={i} className="search-result" to={result.url}>
           <Paper />

app/components/SearchResults/dropdown.css

@@ -1,7 +1,10 @@
 .container-search-results {
   position: absolute;
   z-index: 2;
-  height: 100%;
+  left: 0;
+  width: 100%;
+  overflow: auto;
+  height: 450px;
 }
 
 .search-result {

app/components/search.tsx

@@ -34,7 +34,11 @@ export default function Search({limitFromUrl, className}: Props) {
   const handleChange = debounce(searchFn, 100)
 
   return (
-    <div className={className} onFocus={() => setShowResults(true)} ref={clickDetectorRef}>
+    <div
+      className={`relative ${className}`}
+      onFocus={() => setShowResults(true)}
+      ref={clickDetectorRef}
+    >
       <SearchInput expandable onChange={handleChange} />
       <div className={`search-loader ${isPendingSearch ? 'loader' : ''}`}> </div>
       {isPendingSearch && results.length == 0 && (

app/root.css

@@ -459,6 +459,10 @@ svg {
   text-align: center;
 }
 
+.text-no-wrap {
+  white-space: nowrap;
+}
+
 .flex-container {
   display: flex;
 }
@@ -635,7 +639,7 @@ svg {
   .background > * {
     margin: 198px auto;
     background-color: var(--colors-white);
-    width: 80%;
+    width: 85%;
   }
 } /* end mobile */
 p,

app/routes/chat.tsx

@@ -26,17 +26,21 @@ export default function App() {
     )
   }, [params])
 
-  const ModeButton = ({name, mode}: {name: string; mode: Mode}) => (
-    <Button
-      className={chatSettings.mode === mode ? 'secondary-selected' : 'secondary'}
-      action={() => {
-        setShowSettings(false)
-        setChatSettings({...chatSettings, mode})
-      }}
-    >
-      {name}
-    </Button>
-  )
+  const ModeButton = ({name, mode}: {name: string; mode: Mode}) => {
+    return (
+      <Button
+        className={chatSettings.mode === mode ? 'secondary-selected' : 'secondary'}
+        action={() => {
+          if (chatSettings.mode !== mode) {
+            setTimeout(() => setShowSettings(false), 300)
+            setChatSettings({...chatSettings, mode})
+          }
+        }}
+      >
+        {name}
+      </Button>
+    )
+  }
 
   return (
     <Page noFooter>

app/routes/questions.actions.tsx

@@ -137,12 +137,12 @@ export const Action = ({
     if (actionTaken && setVoted) setVoted(true)
     if (loadActionTaken() || actionTaken) {
       try {
-        localStorage.setItem(actionId, actionTaken.toString())
+        if (pageid !== 'chatbot') localStorage.setItem(actionId, actionTaken.toString())
       } catch (e) {
         // This will happen when local storage is disabled
       }
     }
-  }, [actionTaken, loadActionTaken, actionId, setVoted])
+  }, [actionTaken, loadActionTaken, actionId, setVoted, pageid])
 
   const handleAction = async (e: MouseEvent<HTMLElement>) => {
     e.preventDefault()