diff --git a/app/components/Chatbot/index.tsx b/app/components/Chatbot/index.tsx index 9412a470..f6a84e76 100644 --- a/app/components/Chatbot/index.tsx +++ b/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) => {
handleChange(e.target.value)} onKeyDown={(e) => { @@ -254,7 +255,7 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => { }) return ( -
+
{history.length === 0 ? ( ) : undefined} @@ -269,6 +270,14 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => { /> ) : undefined} + +
+

+ Caution! + This is an early prototype. Don’t automatically trust what it says, and make sure to + follow its sources. +

+
) } diff --git a/app/components/Chatbot/widgit.css b/app/components/Chatbot/widgit.css index a54b8512..fd8453bf 100644 --- a/app/components/Chatbot/widgit.css +++ b/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-16); diff --git a/app/components/Nav/index.tsx b/app/components/Nav/index.tsx index 0d9bab72..2ce3efa5 100644 --- a/app/components/Nav/index.tsx +++ b/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" /> + } + text="Stampy chatbot" + />
    • diff --git a/package-lock.json b/package-lock.json index 7957a467..a64d0412 100644 --- a/package-lock.json +++ b/package-lock.json @@ -51,7 +51,7 @@ "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.0.0", + "eslint-plugin-unused-imports": "^3.1.0", "jest": "^29.7.0", "jest-environment-miniflare": "^2.14.2", "npm-run-all": "^4.1.5", @@ -11921,9 +11921,9 @@ } }, "node_modules/eslint-plugin-unused-imports": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.0.0.tgz", - "integrity": "sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.1.0.tgz", + "integrity": "sha512-9l1YFCzXKkw1qtAru1RWUtG2EVDZY0a0eChKXcL+EZ5jitG7qxdctu4RnvhOJHv4xfmUf7h+JJPINlVpGhZMrw==", "dev": true, "dependencies": { "eslint-rule-composer": "^0.3.0" @@ -11932,8 +11932,8 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, "peerDependencies": { - "@typescript-eslint/eslint-plugin": "^6.0.0", - "eslint": "^8.0.0" + "@typescript-eslint/eslint-plugin": "6 - 7", + "eslint": "8" }, "peerDependenciesMeta": { "@typescript-eslint/eslint-plugin": { @@ -31765,9 +31765,9 @@ } }, "eslint-plugin-unused-imports": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.0.0.tgz", - "integrity": "sha512-sduiswLJfZHeeBJ+MQaG+xYzSWdRXoSw61DpU13mzWumCkR0ufD0HmO4kdNokjrkluMHpj/7PJeN35pgbhW3kw==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.1.0.tgz", + "integrity": "sha512-9l1YFCzXKkw1qtAru1RWUtG2EVDZY0a0eChKXcL+EZ5jitG7qxdctu4RnvhOJHv4xfmUf7h+JJPINlVpGhZMrw==", "dev": true, "requires": { "eslint-rule-composer": "^0.3.0" diff --git a/package.json b/package.json index c6562682..26162510 100644 --- a/package.json +++ b/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" -} \ No newline at end of file +}