shadcn.io is not affiliated with official shadcn/ui
Weather Bot Chat Block for Vue
A bot chat that answers a city with a forecast card: large temperature, condition, high and low, humidity, wind arrow and a twelve-bar hourly strip, with a unit group that converts every number.
Installation
Overview
Show a forecast bot with this weather bot chat for Vue with Ark UI. A narrow window of fixed height holds the thread between you and the Weatherwick bot, marked with a Badge that says Bot. The forecast card shows the temperature large with a condition glyph and word, the high and low, the humidity, the wind (an arrow turned to where it blows and a speed) and an hourly strip of twelve bars whose heights follow the temperatures, with the hour under each. The Toggle Group in the top bar switches °C and °F and converts every number on every card, wind speed included. The city buttons above the composer (Lisbon, Oslo, Quito, Perth) ask for a forecast, and Lisbon is in the log when the page opens. The composer's Shine Button is the only colored control. This is not a map; the map category has weather alerts.
FAQ
What stays in the page, and how do I make it real?
The four forecasts are typed samples in CITIES, labelled "Sample" on each card, and the bot's replies come from a short script keyed on the city names. Nothing is looked up. To wire it for real, fetch the forecast from your weather service in the reply for a city and fill the same fields; the conversion and the strip are computed from them.
What does the unit group convert?
Every temperature (now, high, low and the twelve hours) and the wind speed: °C goes with km/h and °F goes with mph. The typed data is kept in °C and km/h, and the numbers are rounded when converted, so switching back always returns the original.
How are the bars drawn?
Each bar's height is worked out from its temperature between the day's lowest and highest hour, from a quarter to the full height of the box, so the shape is the curve of the day. The current hour is the solid bar and the rest are lighter, with no color scale. The hours and readings are in text for a screen reader.
Which way does the wind arrow point?
Where the wind blows to, which is opposite to the compass point it comes from. The compass letters (such as NW) say where it comes from, in text beside the speed. The arrow does not mirror in right-to-left languages.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, each forecast is an article with a heading, the high, low, humidity and wind are a description list, the strip is a list that reads each hour and its temperature, and the unit group is a labelled set of toggle buttons.