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

general CSS changes for chatbot #618

Merged
merged 3 commits into from
May 3, 2024
Merged

general CSS changes for chatbot #618

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8fff3dc
general CSS changes for chatbot
melissasamworth May 3, 2024
c2e6c1b
Merge branch 'stampy-redesign' into melissa-3
mruwnik May 3, 2024
26325d0
Merge branch 'stampy-redesign' into melissa-3
mruwnik May 3, 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
9 changes: 9 additions & 0 deletions app/assets/icons/bot-small.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions app/assets/icons/personincircle.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 15 additions & 18 deletions app/components/Chatbot/ChatEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,19 @@ import {ComponentType} from 'react'
import {Link} from '@remix-run/react'
import MarkdownIt from 'markdown-it'
import QuestionMarkIcon from '~/components/icons-generated/QuestionMark'
import BotIcon from '~/components/icons-generated/Bot'
import LinkIcon from '~/components/icons-generated/LinkOut'
import PersonIcon from '~/components/icons-generated/Person'
import StampyIcon from '~/components/icons-generated/Stampy'
import Contents from '~/components/Article/Contents'
import Feedback from '~/components/Feedback'
import useGlossary from '~/hooks/useGlossary'
import './chat_entry.css'
import type {Entry, AssistantEntry, StampyEntry, Citation, ErrorMessage} from '~/hooks/useChat'

// icons
import IconBotSmall from '~/components/icons-generated/BotSmall'
import LinkIcon from '~/components/icons-generated/LinkOut'
import PersonIcon from '~/components/icons-generated/Person'
import StampyIcon from '~/components/icons-generated/Stampy'
import PersonInCircleIcon from '~/components/icons-generated/PersonInCircle'

const MAX_REFERENCES = 10

const AnswerInfo = ({
Expand All @@ -24,7 +27,7 @@ const AnswerInfo = ({
if (!answerType || !hint) return null
return (
<span className="info">
{answerType === 'human' ? <PersonIcon /> : <BotIcon />}
{answerType === 'human' ? <PersonIcon /> : <IconBotSmall />}
<span className="small grey">
{answerType === 'human' ? 'Human-written' : 'Bot-generated'} response
</span>
Expand All @@ -41,7 +44,7 @@ type TitleProps = {
hint?: string
}
const Title = ({title, Icon, answerType, hint}: TitleProps) => (
<div className="flex-container title">
<div className="flex-container title padding-bottom-16">
<Icon />
<span className="default-bold flex-double">{title}</span>
<AnswerInfo answerType={answerType} hint={hint} />
Expand All @@ -50,18 +53,12 @@ const Title = ({title, Icon, answerType, hint}: TitleProps) => (

const UserQuery = ({content}: Entry) => (
<div>
<Title title="You" Icon={PersonIcon} />
<div>{content}</div>
<Title title="You" Icon={PersonInCircleIcon} />
<div className="padding-left-56 large-reading">{content}</div>
</div>
)

const ReferenceSummary = ({
title,
authors,
source,
url,
titleClass,
}: Citation & {titleClass?: string}) => {
const ReferenceSummary = ({title, authors, source, url}: Citation & {titleClass?: string}) => {
const referenceSources = {
arxiv: 'Scientific paper',
blogs: 'Blogpost',
Expand All @@ -86,7 +83,7 @@ const ReferenceSummary = ({

return (
<div>
<div className={`title ${titleClass}`}>{title}</div>
<div className="title">{title}</div>
<div>
<Authors authors={authors} />
<span>{' · '}</span>
Expand Down Expand Up @@ -171,7 +168,7 @@ const ChatbotReply = ({phase, content, citationsMap}: AssistantEntry) => {
<div>
<Title title="Stampy" Icon={StampyIcon} answerType="bot" hint="Generated by an AI model" />
<PhaseState />
<div className="padding-bottom-24">
<div className="padding-bottom-56 padding-left-56 large-reading">
{content?.split(/(\[\d+\])|(\n)/).map((chunk, i) => {
if (chunk?.match(/(\[\d+\])/)) {
const refId = chunk.slice(1, chunk.length - 1)
Expand All @@ -187,7 +184,7 @@ const ChatbotReply = ({phase, content, citationsMap}: AssistantEntry) => {
{citations && citations.length > 0 && (
<>
<hr />
<div className="padding-top-32">{citations?.slice(0, MAX_REFERENCES).map(Reference)}</div>
<div className="padding-top-56">{citations?.slice(0, MAX_REFERENCES).map(Reference)}</div>
</>
)}
{['followups', 'done'].includes(phase || '') ? (
Expand Down
10 changes: 7 additions & 3 deletions app/components/Chatbot/chat_entry.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,12 @@ article.stampy {
.chat-entry .title {
display: flex;
gap: var(--spacing-16);
align-items: center;
}

.chat-entry .info {
display: flex;
gap: var(--spacing-6);
gap: var(--spacing-8);
align-items: center;
}

Expand All @@ -33,7 +34,9 @@ article.stampy {
}

.chat-entry .reference-link {
font-size: smaller;
font-size: 12px;
line-height: 12px;
font-weight: 500;
vertical-align: super;
padding: 2px 4px;
margin-left: 2px;
Expand Down Expand Up @@ -102,8 +105,9 @@ article.stampy {
.reference .reference-num {
width: var(--spacing-32);
height: var(--spacing-32);
border-radius: 6px;
border-radius: var(--border-radius);
text-align: center;
line-height: 32px;
}

.reference .source-link {
Expand Down
22 changes: 13 additions & 9 deletions app/components/Chatbot/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ type QuestionInputProps = {
}
const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
const [question, setQuestion] = useState(initial || '')
const [_placeholder, setPlaceholder] = useState('Ask Stampy a question...')
const [placeholder, setPlaceholder] = useState('Ask Stampy a question...')
const handleAsk = (val: string) => {
onAsk && onAsk(val)
setQuestion('')
Expand All @@ -128,7 +128,7 @@ const QuestionInput = ({initial, onChange, onAsk}: QuestionInputProps) => {
return (
<div className="widget-ask flex-container">
<Input
placeholder={_placeholder}
placeHolder={placeholder}
className="large col-10"
value={question}
onChange={(e) => handleChange(e.target.value)}
Expand Down Expand Up @@ -314,13 +314,17 @@ export const Chatbot = ({question, questions, settings}: ChatbotProps) => {
{history.map((item, i) => (
<ChatEntry key={`chat-entry-${i}`} {...item} />
))}
{followups ? (
<Followups
title="Continue the conversation"
followups={followups}
onSelect={showFollowup}
/>
) : undefined}

<div className="padding-bottom-56">
{followups ? (
<Followups
title="Continue the conversation"
followups={followups}
onSelect={showFollowup}
/>
) : undefined}
</div>

<QuestionInput onAsk={onQuestion} />

<div className={'warning-floating'}>
Expand Down
19 changes: 19 additions & 0 deletions app/components/icons-generated/BotSmall.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type {SVGProps} from 'react'
const SvgBotSmall = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
<path
stroke="#788492"
strokeLinecap="square"
strokeLinejoin="round"
d="M2 4.5a.5.5 0 0 0-.5.5v8a.5.5 0 0 0 .5.5h12a.5.5 0 0 0 .5-.5V5a.5.5 0 0 0-.5-.5z"
/>
<path stroke="#788492" strokeLinecap="round" d="M5.5 7.5v1M10.5 7.5v1" />
<path
fill="#788492"
d="m5.146 4.354.354.353L6.207 4l-.353-.354zm-.792-2.208a.5.5 0 1 0-.708.708zm1.5 1.5-1.5-1.5-.708.708 1.5 1.5zM10.854 4.354l-.354.353L9.793 4l.353-.354zm.792-2.208a.5.5 0 0 1 .708.708zm-1.5 1.5 1.5-1.5.708.708-1.5 1.5z"
/>
<circle cx={12} cy={2.5} r={1} fill="#788492" />
<circle cx={4} cy={2.5} r={1} fill="#788492" />
</svg>
)
export default SvgBotSmall
13 changes: 13 additions & 0 deletions app/components/icons-generated/PersonInCircle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type {SVGProps} from 'react'
const PersonInCircle = (props: SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width={40} height={40} fill="none" {...props}>
<circle cx={20} cy={20} r={20} fill="#EDFAF9" />
<path
fill="#1D9089"
fillRule="evenodd"
d="M23 16a3 3 0 1 1-6 0 3 3 0 0 1 6 0m-1 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0M25 27a1 1 0 0 0 1-1 6 6 0 0 0-12 0 1 1 0 0 0 1 1zm-5-6a5 5 0 0 0-5 5h10q0-.515-.1-1a5 5 0 0 0-4.9-4"
clipRule="evenodd"
/>
</svg>
)
export default PersonInCircle
2 changes: 2 additions & 0 deletions app/components/icons-generated/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ export {default as ArrowRight} from './ArrowRight'
export {default as ArrowUpRight} from './ArrowUpRight'
export {default as Arrow} from './Arrow'
export {default as BookCircle} from './BookCircle'
export {default as BotSmall} from './BotSmall'
export {default as Bot} from './Bot'
export {default as BottomEclipse} from './BottomEclipse'
export {default as BoxArrow} from './BoxArrow'
Expand Down Expand Up @@ -39,6 +40,7 @@ export {default as Paper} from './Paper'
export {default as Pencil} from './Pencil'
export {default as People} from './People'
export {default as Person} from './Person'
export {default as Personincircle} from './PersonInCircle'
export {default as PlaneSend} from './PlaneSend'
export {default as QuestionMark} from './QuestionMark'
export {default as Search} from './Search'
Expand Down
82 changes: 58 additions & 24 deletions app/root.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,99 +192,133 @@ h2 {
}

.padding-bottom-4 {
padding-bottom: var(--spacing-4);
padding-bottom: var(--spacing-4) !important;
}

.padding-bottom-8 {
padding-bottom: var(--spacing-8);
padding-bottom: var(--spacing-8) !important;
}

.padding-bottom-16 {
padding-bottom: var(--spacing-16);
padding-bottom: var(--spacing-16) !important;
}

.padding-bottom-24 {
padding-bottom: var(--spacing-24);
padding-bottom: var(--spacing-24) !important;
}

.padding-bottom-32 {
padding-bottom: var(--spacing-32);
padding-bottom: var(--spacing-32) !important;
}

.padding-bottom-40 {
padding-bottom: var(--spacing-40);
padding-bottom: var(--spacing-40) !important;
}

.padding-bottom-56 {
padding-bottom: var(--spacing-56);
padding-bottom: var(--spacing-56) !important;
}

.padding-bottom-80 {
padding-bottom: var(--spacing-80);
padding-bottom: var(--spacing-80) !important;
}

.padding-bottom-104 {
padding-bottom: var(--spacing-104);
padding-bottom: var(--spacing-104) !important;
}

.padding-bottom-128 {
padding-bottom: var(--spacing-128);
padding-bottom: var(--spacing-128) !important;
}

.padding-bottom-192 {
padding-bottom: var(--spacing-192);
padding-bottom: var(--spacing-192) !important;
}

.padding-bottom-288 {
padding-bottom: var(--spacing-288);
padding-bottom: var(--spacing-288) !important;
}

.padding-top-4 {
padding-top: var(--spacing-4);
padding-top: var(--spacing-4) !important;
}

.padding-top-8 {
padding-top: var(--spacing-8);
padding-top: var(--spacing-8) !important;
}

.padding-top-16 {
padding-top: var(--spacing-16);
padding-top: var(--spacing-16) !important;
}

.padding-top-24 {
padding-top: var(--spacing-24);
padding-top: var(--spacing-24) !important;
}

.padding-top-32 {
padding-top: var(--spacing-32);
padding-top: var(--spacing-32) !important;
}

.padding-top-40 {
padding-top: var(--spacing-40);
padding-top: var(--spacing-40) !important;
}

.padding-top-56 {
padding-top: var(--spacing-56);
padding-top: var(--spacing-56) !important;
}

.padding-top-80 {
padding-top: var(--spacing-80);
padding-top: var(--spacing-80) !important;
}

.padding-top-104 {
padding-top: var(--spacing-104);
padding-top: var(--spacing-104) !important;
}

.padding-top-128 {
padding-top: var(--spacing-128);
padding-top: var(--spacing-128) !important;
}

.padding-top-192 {
padding-top: var(--spacing-192);
padding-top: var(--spacing-192) !important;
}

.padding-top-288 {
padding-top: var(--spacing-288);
padding-top: var(--spacing-288) !important;
}

/* padding left */

.padding-left-4 {
padding-left: var(--spacing-4) !important;
}

.padding-left-8 {
padding-left: var(--spacing-8) !important;
}

.padding-left-16 {
padding-left: var(--spacing-16) !important;
}

.padding-left-24 {
padding-left: var(--spacing-24) !important;
}

.padding-left-32 {
padding-left: var(--spacing-32) !important;
}

.padding-left-40 {
padding-left: var(--spacing-40) !important;
}

.padding-left-56 {
padding-left: var(--spacing-56) !important;
}

.padding-left-80 {
padding-left: var(--spacing-80) !important;
}

/* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */
Expand Down
Loading
Loading