Merge pull request #602 from StampyAI/stampy-redesign-591

Stampy redesign 591

app/components/Chatbot/index.tsx

@@ -68,10 +68,11 @@ type QuestionInputProps = {
 }
 const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
   const [question, setQuestion] = useState(initial || '')
-
+  const [placeholder, setPlaceholder] = useState('Ask Stampy a question...')
   const handleAsk = (val: string) => {
     onAsk && onAsk(val)
     setQuestion('')
+    setPlaceholder('Message Stampy')
   }
 
   const handleChange = (val: string) => {
@@ -83,8 +84,8 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
     <div className="widget-ask flex-container">
       <input
         type="text"
-        className="full-width bordered secondary"
-        placeholder="Ask Stampy a question..."
+        className="full-width bordered secondary right-icon"
+        placeholder={placeholder}
         value={question}
         onChange={(e) => handleChange(e.target.value)}
         onKeyDown={(e) => {
@@ -254,7 +255,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
   })
 
   return (
-    <div className="centered col-9 padding-bottom-128">
+    <div className="centered col-9 height-70">
       {history.length === 0 ? (
         <SplashScreen questions={questions} onQuestion={onQuestion} />
       ) : undefined}
@@ -269,6 +270,14 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
         />
       ) : undefined}
       <QuestionInput onAsk={onQuestion} />
+
+      <div className={'warning-floating'}>
+        <p className={'xs'}>
+          <span className={'red xs-bold'}>Caution! </span>
+          This is an early prototype. Don’t automatically trust what it says, and make sure to
+          follow its sources.
+        </p>
+      </div>
     </div>
   )
 }

app/components/Chatbot/widgit.css

@@ -21,6 +21,33 @@
   }
 }
 
+.height-70 {
+  height: 70vh;
+  overflow-x: hidden;
+}
+.widget-ask {
+  position: sticky;
+  bottom: 0;
+}
+.pointer {
+  position: absolute;
+  right: 0;
+  margin: 4px;
+}
+.right-icon {
+  padding-right: var(--spacing-56);
+}
+.warning-floating {
+  position: fixed;
+  right: 7vw;
+  z-index: 100;
+  bottom: 5vw;
+  width: 11vw;
+}
+.red {
+  color: #d40000;
+}
+
 .settings-container {
   position: absolute;
   bottom: var(--spacing-32);

app/components/Nav/index.tsx

@@ -2,6 +2,7 @@ import {Link} from '@remix-run/react'
 import {MenuItem} from '~/components/Menu'
 import OpenBookIcon from '~/components/icons-generated/OpenBook'
 import AISafetyIcon from '~/components/icons-generated/Aisafety'
+import BotIcon from '~/components/icons-generated/Bot'
 import ArticlesDropdown from '~/components/ArticlesDropdown'
 import type {TOCItem} from '~/routes/questions.toc'
 import type {Tag} from '~/server-utils/stampy'
@@ -28,6 +29,12 @@ export const Nav = ({toc, categories}: NavProps) => {
             id="showArticles"
           />
           <ArticlesDropdown toc={toc} categories={categories || []} />
+          <MenuItem
+            primary={true}
+            link="https://chat.aisafety.info"
+            icon={<BotIcon />}
+            text="Stampy chatbot"
+          />
           <li className="top-menu-item">
             <div className="top-menu-divider"></div>
           </li>

package.json

@@ -5,8 +5,8 @@
   "dependencies": {
     "@remix-run/cloudflare": "^2.6.0",
     "@remix-run/cloudflare-workers": "^2.6.0",
-    "@remix-run/react": "^2.6.0",
     "@remix-run/css-bundle": "^1.19.3",
+    "@remix-run/react": "^2.6.0",
     "copy-to-clipboard": "^3.3.3",
     "isbot": "^4",
     "lodash": "^4.17.21",
@@ -21,6 +21,15 @@
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240129.0",
     "@remix-run/dev": "^2.6.0",
+    "@storybook/addon-designs": "^7.0.9",
+    "@storybook/addon-essentials": "^7.6.8",
+    "@storybook/addon-interactions": "^7.6.8",
+    "@storybook/addon-links": "^7.6.8",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.8",
+    "@storybook/react": "^7.6.8",
+    "@storybook/react-vite": "^7.6.8",
+    "@storybook/test": "^7.6.8",
     "@svgr/cli": "^8.1.0",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.202",
@@ -30,35 +39,26 @@
     "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "chromatic": "^10.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-unused-imports": "^3.1.0",
     "jest": "^29.7.0",
     "jest-environment-miniflare": "^2.14.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",
     "rimraf": "^5.0.5",
+    "storybook": "^7.6.8",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3",
-    "wrangler": "^3.24.0",
-    "@storybook/addon-designs": "^7.0.9",
-    "@storybook/addon-essentials": "^7.6.8",
-    "@storybook/addon-interactions": "^7.6.8",
-    "@storybook/addon-links": "^7.6.8",
-    "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.8",
-    "@storybook/react": "^7.6.8",
-    "@storybook/react-vite": "^7.6.8",
-    "@storybook/test": "^7.6.8",
-    "@vitejs/plugin-react": "^4.2.1",
-    "chromatic": "^10.2.2",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "eslint-plugin-storybook": "^0.6.15",
-    "storybook": "^7.6.8",
     "vite": "^5.0.8",
-    "eslint-plugin-unused-imports": "^3.0.0"
+    "wrangler": "^3.24.0"
   },
   "engines": {
     "node": ">=18"
@@ -84,4 +84,4 @@
     "storybook": "storybook dev -p 6006"
   },
   "main": "build/index.js"
-}
+}