Skip to content

Commit 069d92e

Browse files
jpr5jpr5
committed
docs: add multi-turn matching section to homepage
1 parent 48456ba commit 069d92e

1 file changed

Lines changed: 212 additions & 5 deletions

File tree

‎docs/index.html‎

Lines changed: 212 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -756,6 +756,119 @@
756756
border-top: 2px solid #22d3ee;
757757
}
758758

759+
/* ─── Section: Multi-Turn Matching ─────────────────────────────── */
760+
.section-matching {
761+
padding: 4.5rem 0;
762+
position: relative;
763+
background: linear-gradient(
764+
180deg,
765+
var(--bg-deep) 0%,
766+
#0f1628 30%,
767+
#0f1628 70%,
768+
var(--bg-deep) 100%
769+
);
770+
}
771+
.section-matching .container {
772+
position: relative;
773+
z-index: 1;
774+
}
775+
.section-matching h2 {
776+
font-size: clamp(1.8rem, 4vw, 2.8rem);
777+
font-weight: 700;
778+
letter-spacing: -0.02em;
779+
text-align: center;
780+
margin-bottom: 1rem;
781+
}
782+
.matching-sub {
783+
text-align: center;
784+
color: var(--text-secondary);
785+
font-size: 1.05rem;
786+
max-width: 640px;
787+
margin: 0 auto 3.5rem;
788+
line-height: 1.7;
789+
}
790+
.matching-criteria {
791+
display: grid;
792+
grid-template-columns: 1fr 1fr 1fr;
793+
gap: 2rem;
794+
max-width: 900px;
795+
margin: 3rem auto 0;
796+
position: relative;
797+
}
798+
.matching-criteria::before {
799+
content: "";
800+
position: absolute;
801+
top: 28px;
802+
left: calc(16.67% + 1rem);
803+
right: calc(16.67% + 1rem);
804+
height: 2px;
805+
background: var(--border);
806+
}
807+
.criteria-item {
808+
text-align: center;
809+
position: relative;
810+
}
811+
.criteria-item-label {
812+
width: 56px;
813+
height: 56px;
814+
border-radius: 50%;
815+
background: var(--bg-card);
816+
border: 2px solid var(--accent);
817+
display: flex;
818+
align-items: center;
819+
justify-content: center;
820+
font-family: var(--font-mono);
821+
font-size: 0.75rem;
822+
font-weight: 700;
823+
color: var(--accent);
824+
margin: 0 auto 1.25rem;
825+
position: relative;
826+
z-index: 1;
827+
}
828+
.criteria-item h3 {
829+
font-family: var(--font-mono);
830+
font-size: 0.95rem;
831+
font-weight: 600;
832+
margin-bottom: 0.5rem;
833+
}
834+
.criteria-item p {
835+
font-size: 0.875rem;
836+
color: var(--text-secondary);
837+
line-height: 1.6;
838+
}
839+
.how-it-works-list {
840+
list-style: none;
841+
padding: 0;
842+
margin: 0;
843+
}
844+
.how-it-works-list li {
845+
padding: 0.75rem 0;
846+
border-bottom: 1px solid var(--border);
847+
font-size: 0.9rem;
848+
line-height: 1.6;
849+
}
850+
.how-it-works-list li:last-child {
851+
border-bottom: none;
852+
}
853+
.how-it-works-list code {
854+
font-family: var(--font-mono);
855+
font-size: 0.85rem;
856+
color: var(--accent);
857+
background: rgba(0, 255, 136, 0.08);
858+
padding: 0.15rem 0.4rem;
859+
border-radius: 4px;
860+
}
861+
862+
@media (max-width: 768px) {
863+
.matching-criteria {
864+
grid-template-columns: 1fr;
865+
gap: 2.5rem;
866+
}
867+
.matching-criteria::before {
868+
display: none;
869+
}
870+
}
871+
759872
/* ─── Section: Suite Reveal ──────────────────────────────────── */
760873
.section-suite {
761874
padding: 4.5rem 0;
@@ -1259,9 +1372,8 @@ <h1>
12591372
<div class="run-or">or</div>
12601373
<div class="run-cmd">
12611374
<span class="prompt-sign">$</span>
1262-
<code
1263-
>docker run -v $(pwd)/fixtures:/fixtures -p 4010:4010 ghcr.io/copilotkit/aimock</code
1264-
>
1375+
<!-- prettier-ignore -->
1376+
<code>docker run -v $(pwd)/fixtures:/fixtures -p 4010:4010 ghcr.io/copilotkit/aimock -h 0.0.0.0 -f /fixtures</code>
12651377
<button class="copy-btn" onclick="copyCmd(this)">Copy</button>
12661378
</div>
12671379
</div>
@@ -1381,7 +1493,102 @@ <h3>Replay</h3>
13811493
</div>
13821494
</section>
13831495

1384-
<!-- ─── Section 3: Transition ────────────────────────────────── -->
1496+
<!-- ─── Section 3: Multi-Turn Matching ─────────────────────────── -->
1497+
<section class="section-matching" id="matching">
1498+
<div class="container">
1499+
<h2 class="fade-in">Match by conversation state, not counters</h2>
1500+
<p class="matching-sub fade-in" style="transition-delay: 0.1s">
1501+
Multi-turn AI flows &mdash; human-in-the-loop, subagents, tool use &mdash; need different
1502+
responses at different conversation stages. <code>turnIndex</code> and
1503+
<code>hasToolResult</code> match based on what&rsquo;s already in the request. No mutable
1504+
server-side state, safe for concurrent and shared instances.
1505+
</p>
1506+
1507+
<div class="demo-grid fade-in" style="transition-delay: 0.2s">
1508+
<!-- Left: fixtures.json -->
1509+
<div class="demo-panel">
1510+
<div class="demo-titlebar">
1511+
<div class="dots"><span></span><span></span><span></span></div>
1512+
<span class="title">fixtures.json</span>
1513+
</div>
1514+
<div class="demo-body">
1515+
<pre><span class="syn-bracket">{</span>
1516+
<span class="syn-key">"fixtures"</span><span class="syn-bracket">:</span> <span class="syn-bracket">[</span>
1517+
<span class="syn-bracket">{</span>
1518+
<span class="syn-key">"match"</span><span class="syn-bracket">:</span> <span class="syn-bracket">{</span>
1519+
<span class="syn-key">"userMessage"</span><span class="syn-bracket">:</span> <span class="syn-str">"plan a trip"</span><span class="syn-bracket">,</span>
1520+
<span class="syn-key">"turnIndex"</span><span class="syn-bracket">:</span> <span class="syn-num">0</span>
1521+
<span class="syn-bracket">},</span>
1522+
<span class="syn-key">"response"</span><span class="syn-bracket">:</span> <span class="syn-bracket">{</span>
1523+
<span class="syn-key">"toolCalls"</span><span class="syn-bracket">:</span> <span class="syn-bracket">[{</span> <span class="syn-key">"name"</span><span class="syn-bracket">:</span> <span class="syn-str">"generate_steps"</span> <span class="syn-bracket">}]</span>
1524+
<span class="syn-bracket">}</span>
1525+
<span class="syn-bracket">},</span>
1526+
<span class="syn-bracket">{</span>
1527+
<span class="syn-key">"match"</span><span class="syn-bracket">:</span> <span class="syn-bracket">{</span>
1528+
<span class="syn-key">"userMessage"</span><span class="syn-bracket">:</span> <span class="syn-str">"plan a trip"</span><span class="syn-bracket">,</span>
1529+
<span class="syn-key">"turnIndex"</span><span class="syn-bracket">:</span> <span class="syn-num">1</span>
1530+
<span class="syn-bracket">},</span>
1531+
<span class="syn-key">"response"</span><span class="syn-bracket">:</span> <span class="syn-bracket">{</span>
1532+
<span class="syn-key">"content"</span><span class="syn-bracket">:</span> <span class="syn-str">"Great choices! Your trip is booked."</span>
1533+
<span class="syn-bracket">}</span>
1534+
<span class="syn-bracket">}</span>
1535+
<span class="syn-bracket">]</span>
1536+
<span class="syn-bracket">}</span></pre>
1537+
</div>
1538+
</div>
1539+
1540+
<!-- Right: how it works -->
1541+
<div class="demo-panel">
1542+
<div class="demo-titlebar">
1543+
<div class="dots"><span></span><span></span><span></span></div>
1544+
<span class="title">how it works</span>
1545+
</div>
1546+
<div class="demo-body">
1547+
<ul class="how-it-works-list">
1548+
<li>
1549+
<strong>Turn 0</strong> &mdash; no assistant messages yet &rarr; returns tool call
1550+
(<code>generate_steps</code>)
1551+
</li>
1552+
<li>
1553+
<strong>Turn 1</strong> &mdash; one assistant message in history &rarr; returns
1554+
final answer
1555+
</li>
1556+
<li>
1557+
<strong>Stateless</strong> &mdash; works with 100 concurrent clients, no shared
1558+
counters
1559+
</li>
1560+
</ul>
1561+
</div>
1562+
</div>
1563+
</div>
1564+
1565+
<div class="matching-criteria fade-in" style="transition-delay: 0.3s">
1566+
<div class="criteria-item">
1567+
<div class="criteria-item-label">0,1,2</div>
1568+
<h3>turnIndex</h3>
1569+
<p>
1570+
Count of assistant messages in the request. Increases with each conversational turn.
1571+
</p>
1572+
</div>
1573+
<div class="criteria-item">
1574+
<div class="criteria-item-label">T/F</div>
1575+
<h3>hasToolResult</h3>
1576+
<p>
1577+
Does the request contain tool results? Distinguishes pre- and post-tool-call turns.
1578+
</p>
1579+
</div>
1580+
<div class="criteria-item">
1581+
<div class="criteria-item-label">n++</div>
1582+
<h3>sequenceIndex</h3>
1583+
<p>
1584+
Server-side counter for repeated identical requests. Use when stateless criteria
1585+
don&rsquo;t apply.
1586+
</p>
1587+
</div>
1588+
</div>
1589+
</div>
1590+
</section>
1591+
13851592
<!-- ─── Section 4: The Full Suite ────────────────────────────── -->
13861593
<section class="section-suite" id="suite">
13871594
<div class="container">
@@ -1470,7 +1677,7 @@ <h2 class="fade-in">
14701677
<div class="demo-body">
14711678
<pre><span class="t-green">$</span> npx @copilotkit/aimock --config aimock.json
14721679

1473-
<span class="t-blue">&#9889;</span> aimock v1.0.0
1680+
<span class="t-blue">&#9889;</span> aimock v1.16.0
14741681

14751682
<span class="t-green">&#10003;</span> LLM <span class="t-dim">mounted at</span> /v1/chat/completions
14761683
<span class="t-green">&#10003;</span> LLM <span class="t-dim">mounted at</span> /v1/messages

0 commit comments

Comments
 (0)