Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Stampy redesign 591 #602

Merged
merged 8 commits into from
May 1, 2024
Merged

Stampy redesign 591 #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
369e397
minor styling ChatBot
buddy-web3 Mar 28, 2024
6c76396
Merge remote-tracking branch 'origin/stampy-redesign' into stampy-red…
buddy-web3 Apr 8, 2024
964979c
Merge remote-tracking branch 'origin/stampy-redesign' into stampy-red…
buddy-web3 Apr 30, 2024
38ee3e5
tickets: #591 #590
buddy-web3 Apr 30, 2024
686213f
weird lint error
buddy-web3 Apr 30, 2024
50aadba
weird lint error
buddy-web3 Apr 30, 2024
7a92553
weird lint error
buddy-web3 Apr 30, 2024
956c50b
Merge branch 'stampy-redesign' into stampy-redesign-591
buddy-web3 May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions app/components/Chatbot/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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) => {
Expand Down Expand Up @@ -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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this should take up 10 columns
image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you want to leave this to me when I do css that's totally fine

{history.length === 0 ? (
<SplashScreen questions={questions} onQuestion={onQuestion} />
) : undefined}
Expand All @@ -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>
)
}
Expand Down
27 changes: 27 additions & 0 deletions app/components/Chatbot/widgit.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,33 @@
}
}

.height-70 {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh interesting. For now on we could do .height-70vh so we know the units!

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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll want to define this and reference it as a variable, plus put this class in the same place as the other color classes in root.css

}

.settings-container {
position: absolute;
bottom: var(--spacing-16);
Expand Down
7 changes: 7 additions & 0 deletions app/components/Nav/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the global nav right? Could we make it say "AI Safety chatbot" instead? :)

/>
<li className="top-menu-item">
<div className="top-menu-divider"></div>
</li>
Expand Down
18 changes: 9 additions & 9 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

36 changes: 18 additions & 18 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
Expand All @@ -84,4 +84,4 @@
"storybook": "storybook dev -p 6006"
},
"main": "build/index.js"
}
}
Loading