Open Coding Society Chatbot - repurposed PNEC chatbot structure. #1349
Open
svaka2000 wants to merge 12 commits into
Open
Open Coding Society Chatbot - repurposed PNEC chatbot structure. #1349svaka2000 wants to merge 12 commits into
svaka2000 wants to merge 12 commits into
Conversation
- Floating chatbot widget injected on every page via the shared minima base layout, with a page.disable_ocs_bot opt-out for pages that shouldn't show it. - Answers questions about courses, lessons, and projects, and navigates users to the right page via validated [[GO:/path]] action chips backed by a curated index of real, verified site permalinks (so it never produces a broken link). - Powered by the existing Flask Groq proxy (/api/groq/chat); the API key stays server-side and is never exposed to the browser. - Per-user conversation history in localStorage, namespaced by the signed-in OCS user (via /api/id), with graceful optional server-side sync. - Multi-conversation rail (new/switch/search/delete), markdown + code rendering with copy buttons, typewriter streaming, starter suggestions, follow-up chips, and settings (answer style, model). Dark, responsive, accessible design.
- Rebuilt the visual system to a layered 'code-dark glass' look (backdrop-blur panel, subtle brand glow, depth via shadows/inner highlights) instead of flat. - Replaced all emoji icons with crisp monoline SVGs (bot/user avatars and the starter-suggestion tiles) for a more premium, consistent feel. - Distinct message hierarchy: assistant on a soft glass surface, user on the brand gradient; navigation chips are now green 'go' affordances. - Inter typography, refined composer/settings/rail, hover chevrons on suggestions, thinner scrollbars, and tightened spacing/contrast. - Preserved all behavior, IDs, accessibility, responsive + reduced-motion.
- Navigation chips honor an optional window.OCS_BOT_CONFIG.navTarget: '_self' (default — same-tab, correct for the real same-origin site) or '_blank' (new tab). Lets local previews that serve unbuilt Jekyll source open links against the live site instead of dead-ending on a 404. - Production behavior unchanged (defaults to same-tab internal navigation).
- Adopt the PNEC Helper Bot layout: a unified avatar-left message thread (avatar + body + bubble grid) instead of left/right chat bubbles, so short messages no longer clip and the thread reads cleanly like an AI assistant. - Compact, refined sizing (384x600 panel, 0.9rem bubbles, 16px radius), DM Sans, centered welcome hero with a trust-tips row, and pinned grid rows for a stable layout (welcome and transcript are mutually-exclusive scroll regions). - Fix: #ocsb-welcome/#ocsb-messages set display, which beat the [hidden] UA rule and made them overlap — added explicit [hidden] display:none. - Rebranded PNEC green to the OCS blue; nav chips use the brand accent.
Opening the rail used to keep the docked panel at a fixed 384px and steal 184px from the chat column (squishing it to ~200px), so the main content overflowed and clipped on the right. The rail now WIDENS the panel to min(580px, 100vw - 44px) — the chat keeps ~394px — and all panel widths are clamped to the viewport so the panel can never run off-screen.
- Gentle auto-open: the assistant opens itself on a visitor's first visit (rate-limited to once per 7 days, never on phones, respects settings). - User-facing select/deselect: a 'Show the assistant' switch in Settings hides the launcher on this device (persisted); Cmd/Ctrl+K brings it back. Plus an 'Open automatically' toggle. (Per-page disable_ocs_bot opt-out still exists.) - Signed-in users get more: personalized greeting, per-account saved chats (namespaced by uid via /api/id), and — for teachers/admins — staff-only starter prompts and teacher/analytics nav targets. - Re-render starter prompts after sign-in is detected (were stuck on guest set).
svaka2000
changed the title
svaka2000
changed the title
… layout The widget used to be included in the shared base layout, which most pages use, but pages on other layouts (like the gamified /home) skipped it. Now the loader lives in custom-head.html (included on every page via minima's head) and the script injects its own markup into the body, so the assistant appears on every page regardless of layout. Moved the widget markup from the Jekyll include into assets/js/ocs-bot/widget.js and removed the include + the base-layout block. Per-page disable_ocs_bot opt-out still works.
The 'Ask OCS' launcher is fixed to the bottom-right corner, the same spot as
the OCS feedback ('Issue') button (#feedback-btn), so it sat on top of it. The
launcher now detects a fixed button sharing that corner and stacks itself just
above it (re-checking on resize). On pages without that button it stays in the
default corner.
Removed the 'Real OCS links' and 'Fast Groq AI' tips. Turned the 'Saved when signed in' note into a prominent gradient call-to-action that links to login, placed right under the greeting so it is easy to see, and hidden for users who are already signed in.
…atbot (Slack wired but dormant) The assistant now figures out a student's course (CSP, CSA, or CSSE) from their account and gives course-correct practice: real Java FRQs for CSA, exam-style MCQs and Create-PT prompts for CSP, and project help for CSSE (which has no AP exam). It also follows confidentiality rules so it never shares other students' grades, rosters, or secrets, with an output scrubber as a backstop. It can also read the class Slack (#announcements, #general, #coding) and look things up on its own with a [[SLACK: query]] token, but that stays off until the backend and bot token exist (SLACK_ENABLED is false by default), so nothing on the live site changes until an admin turns it on. New modules: collegeboard.js, guardrails.js, identity.js, slack.js. Wired through prompt.js, index.js, api.js, config.js, and suggestions.js.
svaka2000
changed the title
…d per-page
The search page now has a bright "Ask AI" button that opens the OCS Learning Guide. Instead of just listing pages like the normal search, it builds a step by step learning path through real site pages (basics to advanced), and for beginners it runs a quick clickable survey to figure out their level and goal first. It reuses the chatbot's Groq endpoint and page index and adds two tools the model can emit: [[ASK:]] for a survey and [[STEP:]] for a path step (both validated against the real page index so a step can never link to a fake URL).
Also made the floating chatbot conditional per page instead of force-loaded on every page: it loads when a page sets ocs_bot: true, or it inherits the site default from _config.yml (currently true). The search page opts out with ocs_bot: false since it has the dedicated hub.
New: assets/js/ocs-search/{protocol,searchprompt,searchhub}.js and assets/css/ocs-search.css. Also touches custom-head.html, _config.yml, navigation/search.md, and the search layout.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request adds the OCS Assistant, an AI chat helper that pops up on every page of the site so students can ask questions and get navigated to the right place and the bot can also answer college board questions and help students practice for the ap exam if they are in CSA or CSP or study and learn if they are in CSSE.
The chatbot can do many things including creating code for you which is one of the basic functions of groq.
The chatbot knows all the material on Open coding Society extremely well and can help students taking CSSE, APCSP, and APCSA.
Making the PNEC helper bot is what inspired me to create one for opencoding society because the organization thought it was a really useful feature for people to use.
I also made a selector in its settings if people dont want to see the chatbot pop-up everytime they open the website then they can just select not to see it.
Fortunately I didn't have to make any changes on flask and all of the work for the chatbot stayed on frontend using the existing groq api key I found in the code.
What it does / why it helps:
How I made it:
assets/js/ocs-bot/file and also no framework because it self injects so it works on every layout I used claude AI to help me do this/api/groq/chat, so the key stays on the server and I didnt add a new one. It doesnt clash with the other AI on that endpoint because its a stateless proxy, each request brings its own messages and model, so they just share the key and never step on each other or conflict./api/idfor the saved chats and course featuresI tested it multiple times on as many pages as I could and It works on my end and answers questions well.
Let me know If I should change anything at all or if there is no need for a chatbot on open coding society at all then that makes ssense, becuase this could also be a risky committ.
Thanks! , Samarth Vaka - Period 4