dmitry.galkin/chatbot-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update examples and improve stability (#271)

Browse source
This commit is contained in:
Jeremy 2024-03-19 01:35:03 +03:00 • committed by GitHub
parent 25e4128e25
commit 70ed5c4f47
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 118 additions and 101 deletions
Download patch file Download diff file Expand all files Collapse all files

74
components/stocks/stocks.tsx
View file

@ -15,45 +15,53 @@ export function Stocks({ props: stocks }: { props: Stock[] }) {
const { submitUserMessage } = useActions()
return (
<div className="mb-4 flex flex-col gap-2 overflow-y-scroll pb-4 text-sm sm:flex-row">
{stocks.map(stock => (
<button
key={stock.symbol}
className="flex cursor-pointer flex-row gap-2 rounded-lg bg-zinc-800 p-2 text-left hover:bg-zinc-700 sm:w-52"
onClick={async () => {
const response = await submitUserMessage(`View ${stock.symbol}`)
setMessages(currentMessages => [...currentMessages, response])
}}
>
<div
className={`text-xl ${
stock.delta > 0 ? 'text-green-600' : 'text-red-600'
} flex w-11 flex-row justify-center rounded-md bg-white/10 p-2`}
<div>
<div className="mb-4 flex flex-col gap-2 overflow-y-scroll pb-4 text-sm sm:flex-row">
{stocks.map(stock => (
<button
key={stock.symbol}
className="flex cursor-pointer flex-row gap-2 rounded-lg bg-zinc-800 p-2 text-left hover:bg-zinc-700 sm:w-52"
onClick={async () => {
const response = await submitUserMessage(`View ${stock.symbol}`)
setMessages(currentMessages => [...currentMessages, response])
}}
>
{stock.delta > 0 ? '↑' : '↓'}
</div>
<div className="flex flex-col">
<div className="bold uppercase text-zinc-300">{stock.symbol}</div>
<div className="text-base text-zinc-500">${stock.price}</div>
</div>
<div className="ml-auto flex flex-col">
<div
className={`${
className={`text-xl ${
stock.delta > 0 ? 'text-green-600' : 'text-red-600'
} bold text-right uppercase`}
} flex w-11 flex-row justify-center rounded-md bg-white/10 p-2`}
>
{` ${((stock.delta / stock.price) * 100).toFixed(2)}%`}
{stock.delta > 0 ? '↑' : '↓'}
</div>
<div
className={`${
stock.delta > 0 ? 'text-green-700' : 'text-red-700'
} text-right text-base`}
>
{stock.delta}
<div className="flex flex-col">
<div className="bold uppercase text-zinc-300">{stock.symbol}</div>
<div className="text-base text-zinc-500">
${stock.price.toExponential(1)}
</div>
</div>
</div>
</button>
))}
<div className="ml-auto flex flex-col">
<div
className={`${
stock.delta > 0 ? 'text-green-600' : 'text-red-600'
} bold text-right uppercase`}
>
{` ${((stock.delta / stock.price) * 100).toExponential(1)}%`}
</div>
<div
className={`${
stock.delta > 0 ? 'text-green-700' : 'text-red-700'
} text-right text-base`}
>
{stock.delta.toExponential(1)}
</div>
</div>
</button>
))}
</div>
<div className="p-4 text-center text-sm text-zinc-500">
Note: Data and latency are simulated for illustrative purposes and
should not be considered as financial advice.
</div>
</div>
)
}