Use sample of preselected articles

app/components/Chatbot/index.tsx

@@ -1,50 +1,19 @@
 import {useEffect, useRef, useState} from 'react'
 import {useFetcher, useNavigate} from '@remix-run/react'
+import ExclamationIcon from '../icons-generated/Exclamation'
 import IconStampyLarge from '~/components/icons-generated/StampyLarge'
 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'
 import {questionUrl} from '~/routesMapper'
 import {Question} from '~/server-utils/stampy'
 import {useSearch} from '~/hooks/useSearch'
 import Input from '~/components/Input'
-import {Exclamation} from '../icons-generated'
-
-// to be replaced with actual pool questions
-const poolQuestions = [
-  {text: 'Do people seriously worry about existential risk from AI?', pageid: '6953'},
-  {text: 'Is AI safety about systems becoming malevolent or conscious?', pageid: '6194'},
-  {text: 'When do experts think human-level AI will be created?', pageid: '5633'},
-  {text: 'Why is AI alignment a hard problem?', pageid: '8163'},
-  {
-    text: 'Why can’t we just “put the AI in a box” so that it can’t influence the outside world?',
-    pageid: '6176',
-  },
-  {
-    text: 'What are the differences between AGI, transformative AI, and superintelligence?',
-    pageid: '5864',
-  },
-  {text: 'What are large language models?', pageid: '5864'},
-  {text: "Why can't we just turn the AI off if it starts to misbehave?", pageid: '3119'},
-  {text: 'What is instrumental convergence?', pageid: '897I'},
-  {text: "What is Goodhart's law?", pageid: '8185'},
-  {text: 'What is the orthogonality thesis?', pageid: '6568'},
-  {text: 'How powerful would a superintelligence become?', pageid: '7755'},
-  {text: 'Will AI be able to think faster than humans?', pageid: '8E41'},
-  {text: "Isn't the real concern misuse?", pageid: '9B85'},
-  {text: 'Are AIs conscious?', pageid: '8V5J'},
-  {
-    text: 'What are the differences between a singularity, an intelligence explosion, and a hard takeoff?',
-    pageid: '8IHO',
-  },
-  {text: 'What is an intelligence explosion?', pageid: '6306'},
-  {text: 'How might AGI kill people?', pageid: '5943'},
-  {text: 'What is a "warning shot"?', pageid: '7748'},
-]
 
 const MIN_SIMILARITY = 0.85
 
@@ -118,20 +87,16 @@ const QuestionInput = ({
       {fixed && <div className="white-space"></div>}
 
       <div className="mobile-only grey padding-top-8">
-        <Exclamation /> <span>Stampy can be inaccurate. Always verify its sources.</span>
+        <ExclamationIcon /> <span>Stampy can be inaccurate. Always verify its sources.</span>
       </div>
     </div>
   )
 }
 
 export const WidgetStampy = ({className}: {className?: string}) => {
   const [question, setQuestion] = useState('')
+  const {selected: questions} = useOnSiteQuestions()
   const navigate = useNavigate()
-  const questions = [
-    'What is AI Safety?',
-    'How would the AI even get out in the world?',
-    'Do people seriously worry about existential risk from AI?',
-  ]
 
   const stampyUrl = (question: string) => `/chat/?question=${question.trim()}`
   return (
@@ -145,10 +110,10 @@ export const WidgetStampy = ({className}: {className?: string}) => {
         <IconStampySmall />
         <div className="sample-messages rounded">
           <div className="padding-bottom-24">Try asking me...</div>
-          {questions.map((question, i) => (
+          {questions.map(({title}, i) => (
             <div key={i} className="padding-bottom-16">
-              <Button className="secondary-alt-large" action={stampyUrl(question)}>
-                {question}
+              <Button className="secondary-alt-large" action={stampyUrl(title)}>
+                {title}
               </Button>
             </div>
           ))}
@@ -176,10 +141,14 @@ type FollowupsProps = {
   className?: string
 }
 const Followups = ({title, followups, onSelect, className}: FollowupsProps) => {
+  const {randomQuestions} = useOnSiteQuestions()
   const items =
     (followups?.length || 0) >= 3
       ? followups
-      : [...(followups || []), ...poolQuestions.sort(() => Math.random() - 0.5)].slice(0, 3)
+      : [
+          ...(followups || []),
+          ...randomQuestions().map(({title, pageid}) => ({text: title, pageid})),
+        ].slice(0, 3)
   return (
     <>
       {title && <div className={'padding-bottom-24 grey' + (className || '')}>{title}</div>}
@@ -221,11 +190,11 @@ const SplashScreen = ({
 
 type ChatbotProps = {
   question?: string
-  questions?: Followup[]
   settings?: ChatSettings
 }
-export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
+export const Chatbot = ({question, settings}: ChatbotProps) => {
   const [followups, setFollowups] = useState<Followup[]>()
+  const {selected: questions} = useOnSiteQuestions()
 
   const [sessionId] = useState(crypto.randomUUID())
   const [history, setHistory] = useState([] as Entry[])
@@ -342,7 +311,10 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   return (
     <div className="centered col-10 height-70">
       {history.length === 0 ? (
-        <SplashScreen questions={questions} onSelection={showArticleByID} />
+        <SplashScreen
+          questions={questions.map(({title, pageid}) => ({pageid, text: title}))}
+          onSelection={showArticleByID}
+        />
       ) : undefined}
       {history.map((item, i) => (
         <ChatEntry key={`chat-entry-${i}`} {...item} no={i} />

app/hooks/useOnSiteQuestions.ts

@@ -0,0 +1,44 @@
+import {Question} from '~/server-utils/stampy'
+import {useOnSiteQuestions as getQuestions} from './useCachedObjects'
+import {useEffect, useState} from 'react'
+
+const topQuestions = [
+  '6953', // Do people seriously worry about existential risk from AI? debugger eval code:1:26
+  '6194', // Is AI safety about systems becoming malevolent or conscious? debugger eval code:1:26
+  '5633', // When do experts think human-level AI will be created? debugger eval code:1:26
+  '8163', // Why is AI alignment a hard problem? debugger eval code:1:26
+  '6176', // Why can’t we just “put the AI in a box” so that it can’t influence the outside world? debugger eval code:1:26
+  '5864', // What are the differences between AGI, transformative AI, and superintelligence? debugger eval code:1:26
+  '5864', // What are large language models? debugger eval code:1:26
+  '3119', // Why can't we just turn the AI off if it starts to misbehave? debugger eval code:1:26
+  '897I', // What is instrumental convergence? debugger eval code:1:26
+  '8185', // What is Goodhart's law? debugger eval code:1:26
+  '6568', // What is the orthogonality thesis? debugger eval code:1:26
+  '7755', // How powerful would a superintelligence become? debugger eval code:1:26
+  '8E41', // Will AI be able to think faster than humans? debugger eval code:1:26
+  '9B85', // Isn't the real concern misuse? debugger eval code:1:26
+  '8V5J', // Are AIs conscious? debugger eval code:1:26
+  '8IHO', // What are the differences between a singularity, an intelligence explosion, and a hard takeoff? debugger eval code:1:26
+  '6306', // What is an intelligence explosion? debugger eval code:1:26
+  '5943', // How might AGI kill people? debugger eval code:1:26
+  '7748', // What is a "warning shot"?
+]
+
+const useOnSiteQuestions = () => {
+  const onSite = getQuestions()
+  const [selected, setSelected] = useState([] as Question[])
+
+  const top = onSite.items?.filter((i) => topQuestions.includes(i.pageid))
+  const randomQuestions = (n?: number) =>
+    top?.sort(() => 0.5 - Math.random()).slice(0, n || 3) || []
+
+  useEffect(() => {
+    if (!selected?.length) {
+      setSelected(randomQuestions())
+    }
+    // eslint-disable-next-line
+  }, [onSite.items])
+
+  return {...onSite, topQuestions: top, selected, randomQuestions}
+}
+export default useOnSiteQuestions

app/hooks/useSearch.tsx

@@ -1,6 +1,6 @@
 import {useState, useEffect, useRef} from 'react'
 import {Question} from '~/server-utils/stampy'
-import {useOnSiteQuestions} from './useCachedObjects'
+import useOnSiteQuestions from './useOnSiteQuestions'
 
 const NUM_RESULTS = 8
 

app/routes/chat.tsx

@@ -35,15 +35,7 @@ export default function App() {
   return (
     <Page noFooter>
       <div className="page-body full-height padding-top-32">
-        <Chatbot
-          question={question}
-          questions={[
-            {text: 'What is AI Safety?', pageid: '8486'},
-            {text: 'How would the AI even get out in the world?', pageid: '8222'},
-            {text: 'Do people seriously worry about existential risk from AI?', pageid: '6953'},
-          ]}
-          settings={chatSettings}
-        />
+        <Chatbot question={question} settings={chatSettings} />
         <div className="settings-container" ref={clickDetectorRef}>
           {showSettings && (
             <div className="settings bordered flex-container">

app/routes/questions.$questionId.$.tsx

@@ -12,9 +12,10 @@ import {ArticlesNav} from '~/components/ArticlesNav/ArticleNav'
 import {QuestionStatus, loadQuestionDetail} from '~/server-utils/stampy'
 import useToC from '~/hooks/useToC'
 import useGlossary from '~/hooks/useGlossary'
+import useOnSiteQuestions from '~/hooks/useOnSiteQuestions'
+import {useTags} from '~/hooks/useCachedObjects'
 import type {Question, Tag} from '~/server-utils/stampy'
 import {reloadInBackgroundIfNeeded} from '~/server-utils/kv-cache'
-import {useOnSiteQuestions, useTags} from '~/hooks/useCachedObjects'
 
 export const LINK_WITHOUT_DETAILS_CLS = 'link-without-details'