Skip to content

chore: mobile friendly dojo #230

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

Merged
ranst91 merged 2 commits into from
Jul 30, 2025
Merged

chore: mobile friendly dojo #230

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f5b1a51
chore: fit dojo sidebar and chat width for mobile view
ranst91 Jul 25, 2025
902447f
chore: fit individual demos for mobile
ranst91 Jul 29, 2025
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
2 changes: 1 addition & 1 deletion typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const Chat = () => {

return (
<div className="flex justify-center items-center h-full w-full" style={{ background }}>
<div className="w-8/10 h-8/10 rounded-lg">
<div className="h-full w-full md:w-8/10 md:h-8/10 rounded-lg">
<CopilotChat
className="h-full rounded-2xl"
labels={{ initial: "Hi, I'm an agent. Want to chat?" }}
Expand Down
2 changes: 1 addition & 1 deletion typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_generative_ui/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ const Chat = () => {

return (
<div className="flex justify-center items-center h-full w-full">
<div className="w-8/10 h-8/10 rounded-lg">
<div className="h-full w-full md:w-8/10 md:h-8/10 rounded-lg">
<CopilotChat
className="h-full rounded-2xl"
labels={{
Expand Down
2 changes: 1 addition & 1 deletion typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,7 +326,7 @@ const Chat = ({ integrationId }: { integrationId: string }) => {

return (
<div className="flex justify-center items-center h-full w-full">
<div className="w-8/10 h-8/10 rounded-lg">
<div className="h-full w-full md:w-8/10 md:h-8/10 rounded-lg">
<CopilotChat
className="h-full rounded-2xl"
labels={{
Expand Down
120 changes: 109 additions & 11 deletions typescript-sdk/apps/dojo/src/app/[integrationId]/feature/predictive_state_updates/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { useEffect, useState } from "react";
import { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import { CopilotChat, CopilotSidebar } from "@copilotkit/react-ui";
import { useMobileView } from "@/utils/use-mobile-view";
import { useMobileChat } from "@/utils/use-mobile-chat";

const extensions = [StarterKit];

Expand All @@ -22,6 +24,19 @@ interface PredictiveStateUpdatesProps {

export default function PredictiveStateUpdates({ params }: PredictiveStateUpdatesProps) {
const { integrationId } = React.use(params);
const { isMobile } = useMobileView();
const defaultChatHeight = 50
const {
isChatOpen,
setChatHeight,
setIsChatOpen,
isDragging,
chatHeight,
handleDragStart
} = useMobileChat(defaultChatHeight)
const chatTitle = 'AI Document Editor'
const chatDescription = 'Ask me to create or edit a document'
const initialLabel = 'Hi 👋 How can I help with your document?'

return (
<CopilotKit
Expand All @@ -39,16 +54,99 @@ export default function PredictiveStateUpdates({ params }: PredictiveStateUpdate
} as React.CSSProperties
}
>
<CopilotSidebar
defaultOpen={true}
labels={{
title: "AI Document Editor",
initial: "Hi 👋 How can I help with your document?",
}}
clickOutsideToClose={false}
>
<DocumentEditor />
</CopilotSidebar>
{isMobile ? (
<>
{/* Chat Toggle Button */}
<div className="fixed bottom-0 left-0 right-0 z-50">
<div className="bg-gradient-to-t from-white via-white to-transparent h-6"></div>
<div
className="bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg"
onClick={() => {
if (!isChatOpen) {
setChatHeight(defaultChatHeight); // Reset to good default when opening
}
setIsChatOpen(!isChatOpen);
}}
>
<div className="flex items-center gap-3">
<div>
<div className="font-medium text-gray-900">{chatTitle}</div>
<div className="text-sm text-gray-500">{chatDescription}</div>
</div>
</div>
<div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
</svg>
</div>
</div>
</div>

{/* Pull-Up Chat Container */}
<div
className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${
isChatOpen ? 'translate-y-0' : 'translate-y-full'
} ${isDragging ? 'transition-none' : ''}`}
style={{
height: `${chatHeight}vh`,
paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding
}}
>
{/* Drag Handle Bar */}
<div
className="flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing"
onMouseDown={handleDragStart}
>
<div className="w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors"></div>
</div>

{/* Chat Header */}
<div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<h3 className="font-semibold text-gray-900">{chatTitle}</h3>
</div>
<button
onClick={() => setIsChatOpen(false)}
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
>
<svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>

{/* Chat Content - Flexible container for messages and input */}
<div className="flex-1 flex flex-col min-h-0 overflow-hidden pb-16">
<CopilotChat
className="h-full flex flex-col"
labels={{
initial: initialLabel,
}}
/>
</div>
</div>

{/* Backdrop */}
{isChatOpen && (
<div
className="fixed inset-0 z-30"
onClick={() => setIsChatOpen(false)}
/>
)}
</>
) : (
<CopilotSidebar
defaultOpen={true}
labels={{
title: chatTitle,
initial: initialLabel,
}}
clickOutsideToClose={false}
/>
)}
<DocumentEditor />
</div>
</CopilotKit>
);
Expand Down
118 changes: 109 additions & 9 deletions typescript-sdk/apps/dojo/src/app/[integrationId]/feature/shared_state/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
"use client";
import { CopilotKit, useCoAgent, useCopilotChat } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import { CopilotChat, CopilotSidebar } from "@copilotkit/react-ui";
import React, { useState, useEffect, useRef } from "react";
import { Role, TextMessage } from "@copilotkit/runtime-client-gql";
import "@copilotkit/react-ui/styles.css";
import "./style.css";
import { useMobileView } from "@/utils/use-mobile-view";
import { useMobileChat } from "@/utils/use-mobile-chat";

interface SharedStateProps {
params: Promise<{
Expand All @@ -14,6 +16,20 @@ interface SharedStateProps {

export default function SharedState({ params }: SharedStateProps) {
const { integrationId } = React.use(params);
const { isMobile } = useMobileView();
const defaultChatHeight = 50
const {
isChatOpen,
setChatHeight,
setIsChatOpen,
isDragging,
chatHeight,
handleDragStart
} = useMobileChat(defaultChatHeight)

const chatTitle = 'AI Recipe Assistant'
const chatDescription = 'Ask me to craft recipes'
const initialLabel = 'Hi 👋 How can I help with your recipe?'

return (
<CopilotKit
Expand All @@ -34,14 +50,98 @@ export default function SharedState({ params }: SharedStateProps) {
}
>
<Recipe />
<CopilotSidebar
defaultOpen={true}
labels={{
title: "AI Recipe Assistant",
initial: "Hi 👋 How can I help with your recipe?",
}}
clickOutsideToClose={false}
/>
{isMobile ? (
<>
{/* Chat Toggle Button */}
<div className="fixed bottom-0 left-0 right-0 z-50">
<div className="bg-gradient-to-t from-white via-white to-transparent h-6"></div>
<div
className="bg-white border-t border-gray-200 px-4 py-3 flex items-center justify-between cursor-pointer shadow-lg"
onClick={() => {
if (!isChatOpen) {
setChatHeight(defaultChatHeight); // Reset to good default when opening
}
setIsChatOpen(!isChatOpen);
}}
>
<div className="flex items-center gap-3">
<div>
<div className="font-medium text-gray-900">{chatTitle}</div>
<div className="text-sm text-gray-500">{chatDescription}</div>
</div>
</div>
<div className={`transform transition-transform duration-300 ${isChatOpen ? 'rotate-180' : ''}`}>
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
</svg>
</div>
</div>
</div>

{/* Pull-Up Chat Container */}
<div
className={`fixed inset-x-0 bottom-0 z-40 bg-white rounded-t-2xl shadow-[0px_0px_20px_0px_rgba(0,0,0,0.15)] transform transition-all duration-300 ease-in-out flex flex-col ${
isChatOpen ? 'translate-y-0' : 'translate-y-full'
} ${isDragging ? 'transition-none' : ''}`}
style={{
height: `${chatHeight}vh`,
paddingBottom: 'env(safe-area-inset-bottom)' // Handle iPhone bottom padding
}}
>
{/* Drag Handle Bar */}
<div
className="flex justify-center pt-3 pb-2 flex-shrink-0 cursor-grab active:cursor-grabbing"
onMouseDown={handleDragStart}
>
<div className="w-12 h-1 bg-gray-400 rounded-full hover:bg-gray-500 transition-colors"></div>
</div>

{/* Chat Header */}
<div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<h3 className="font-semibold text-gray-900">{chatTitle}</h3>
</div>
<button
onClick={() => setIsChatOpen(false)}
className="p-2 hover:bg-gray-100 rounded-full transition-colors"
>
<svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>

{/* Chat Content - Flexible container for messages and input */}
<div className="flex-1 flex flex-col min-h-0 overflow-hidden pb-16">
<CopilotChat
className="h-full flex flex-col"
labels={{
initial: initialLabel,
}}
/>
</div>
</div>

{/* Backdrop */}
{isChatOpen && (
<div
className="fixed inset-0 z-30"
onClick={() => setIsChatOpen(false)}
/>
)}
</>
) : (
<CopilotSidebar
defaultOpen={true}
labels={{
title: chatTitle,
initial: initialLabel,
}}
clickOutsideToClose={false}
/>
)}
</div>
</CopilotKit>
);
Expand Down
Loading