https://wattenberger.com/_app/immutable/nodes/13.89648486.js

1import{S as Ea,i as Aa,s as Pa,k as r,a as f,e as $a,l,m as h,h as t,c as u,n as d,K as xa,b as o,E as a,I as Ia,q as n,r as i,u as Sa,y as I,D as Ta,z,A as E,g as A,d as P,B as S}from"../chunks/index.627d0bdc.js";import"../chunks/store.c9fa3a73.js";import"../chunks/index.bd8c6917.js";import{S as Wa}from"../chunks/SubPageNav.e0424d17.js";function za(x){let p,w;return{c(){p=r("div"),w=n(x[1]),this.h()},l(g){p=l(g,"DIV",{class:!0});var b=h(p);w=i(b,x[1]),b.forEach(t),this.h()},h(){d(p,"class","mx-auto text-sm font-mono text-slate-600 mb-20")},m(g,b){o(g,p,b),a(p,w)},p(g,b){b&2&&Sa(w,g[1])},d(g){g&&t(p)}}}function Ba(x){let p,w,g,b,$,k,v=x[1]&&za(x);return{c(){p=r("div"),w=r("img"),$=f(),v&&v.c(),k=$a(),this.h()},l(m){p=l(m,"DIV",{class:!0});var _=h(p);w=l(_,"IMG",{class:!0,src:!0,alt:!0}),_.forEach(t),$=u(m),v&&v.l(m),k=$a(),this.h()},h(){d(w,"class","w-full"),xa(w.src,g=`/thoughts/this-is-not-a-rant-about-chatbots/${x[0]}.png`)||d(w,"src",g),d(w,"alt",x[1]),d(p,"class",b="grid-wide border shadow-lg rounded-3xl my-10 overflow-hidden "+x[2])},m(m,_){o(m,p,_),a(p,w),o(m,$,_),v&&v.m(m,_),o(m,k,_)},p(m,[_]){_&1&&!xa(w.src,g=`/thoughts/this-is-not-a-rant-about-chatbots/${m[0]}.png`)&&d(w,"src",g),_&2&&d(w,"alt",m[1]),_&4&&b!==(b="grid-wide border shadow-lg rounded-3xl my-10 overflow-hidden "+m[2])&&d(p,"class",b),m[1]?v?v.p(m,_):(v=za(m),v.c(),v.m(k.parentNode,k)):v&&(v.d(1),v=null)},i:Ia,o:Ia,d(m){m&&t(p),m&&t($),v&&v.d(m),m&&t(k)}}}function qa(x,p,w){let{name:g}=p,{alt:b}=p,{class:$=""}=p;return x.$$set=k=>{"name"in k&&w(0,g=k.name),"alt"in k&&w(1,b=k.alt),"class"in k&&w(2,$=k.class)},[g,b,$]}class T extends Ea{constructor(p){super(),Aa(this,p,qa,Ba,Pa,{name:0,alt:1,class:2})}}function La(x){let p,w,g,b,$,k,v,m,_,ee,et,tt,_e,te,at,$e,F,xe,W,st,H,ot,nt,Ie,V,ze,ae,it,Ee,B,rt,se,lt,ht,Ae,q,ft,J,ut,mt,Pe,N,Se,U,pt,Te,C,We,L,dt,G,ct,wt,Be,O,qe,oe,gt,Le,R,je,j,vt,pe,Yt="svelte/animate",yt,bt,Me,ne,kt,De,ie,_t,Fe,re,$t,He,le,xt,Ve,he,It,Je,c,fe,zt,Et,Y,At,K,Pt,St,Tt,Q,Wt,de,Bt,qt,ce,Lt,jt,M,we,X,Mt,ge,Z,Dt,ve,Ft,Ht,ye,Vt,Jt,be,Nt,Ut,ue,Ct,Ne,D,Gt,me,Ot,Rt,ke;return document.title=p=Ze,g=new Wa({}),F=new T({props:{name:"condensation-chat",alt:"",class:"max-w-[40em] mx-auto"}}),V=new T({props:{name:"condensation-table",alt:"",class:"max-w-[40em] mx-auto"}}),N=new T({props:{name:"svelte-chat-1",alt:"",class:"max-w-[40em] mx-auto mb-2 !rounded-0"}}),C=new T({props:{name:"svelte-chat-2",alt:"",class:"max-w-[40em] mx-auto -mt-5"}}),O=new T({props:{name:"svelte-docs-1",alt:"",class:"max-w-[40em] mx-auto"}}),R=new T({props:{name:"svelte-docs-2",alt:"",class:"max-w-[40em] mx-auto"}}),Q=new T({props:{name:"tweet-1",alt:"",class:"max-w-[26em] mx-auto"}}),X=new T({props:{name:"tweet-2",alt:""}}),Z=new T({props:{name:"tweet-3",alt:""}}),{c(){w=f(),I(g.$$.fragment),b=f(),$=r("h1"),k=n(Ze),v=f(),m=r("p"),_=n("When we talk about adding context to AI-enhanced interfaces, we’re usually focused on feeding LLMs the right information. Writing the best prompts, connecting to data stores, that kind of thing. But "),ee=r("strong"),et=n("what about providing context to us, the human users"),tt=n("?"),_e=f(),te=r("p"),at=n("Let's look at the typical back-and-forth with a chatbot: you ask something, it responds, and so on. Say you’ve heard about a fun new concept called condensation and you want to learn more about it."),$e=f(),I(F.$$.fragment),xe=f(),W=r("p"),st=n("This is a great answer! We've learned what condensation is, when it happens, and even got an example. What would be wonderful, though, is showing common frameworks that this knowledge is usually presented with. If we look at the "),H=r("a"),ot=n("Wikipedia entry for condensation"),nt=n(", we see this lovely table:"),Ie=f(),I(V.$$.fragment),ze=f(),ae=r("p"),it=n("Looking at this table, I can quickly see what the phases are, what the other transitions are called, and even that the transition between phases is different depending on its direction. And on top of that, I can very easily continue down the rabbit hole by clicking on any of the links in the table to learn more about other phase transitions. Whereas asking follow-up questions to a chatbot can feel like searching a dark room by pointing a flashlight and turning it on for a second at a time."),Ee=f(),B=r("p"),rt=n("Note that I'm not necessarily saying that the Wikipedia entry is "),se=r("em"),lt=n("better"),ht=n(" than the chatbot response. But it would be helpful to have some of the surrounding context for the chatbot response that isn't strictly information about condensation."),Ae=f(),q=r("p"),ft=n("Here's another example that sticks out to me: let's say I'm building a website with the "),J=r("a"),ut=n("Svelte framework"),mt=n(" and I want an image to fade in. I can ask my friend ChatGPT for help:"),Pe=f(),I(N.$$.fragment),Se=f(),U=r("div"),pt=n("..."),Te=f(),I(C.$$.fragment),We=f(),L=r("p"),dt=n("This answer is perfectly helpful and can get me on my way. But looking at the "),G=r("a"),ct=n("Svelte documentation"),wt=n(" gives me a great idea of other types of transitions, without making me explicitly look for them:"),Be=f(),I(O.$$.fragment),qe=f(),oe=r("p"),gt=n("And zooming out a bit, I can see other important Svelte concepts."),Le=f(),I(R.$$.fragment),je=f(),j=r("p"),vt=n("I might see that there's also a "),pe=r("code"),yt=n(Yt),bt=n(" module and learn about that for future reference. Unknown unknowns are hard to stumble on when you're only given the information you explicitly ask for."),Me=f(),ne=r("p"),kt=n("It feels important that these two examples (the phase change table and the Svelte documentation to

1pics) show structured data that isn't presented as raw text. This gives room for related concept that feel more lightweight: easy to ignore or scan quickly."),De=f(),ie=r("h2"),_t=n("What about outside of chat?"),Fe=f(),re=r("p"),$t=n('The same gap pops up in many demos of task-oriented AI applications. For example: ordering a pizza. You ask for a pizza, and presto, "Pizza ordered."'),He=f(),le=r("p"),xt=n("But often I want to know what kinds of pizza places are available or the range of pizza prices. Is this pizza the best deal, the highest rated, or maybe some combination of the two? Showing where the chosen pizza falls in a distribution of price or ratings would go a long way to making me feel oriented."),Ve=f(),he=r("p"),It=n("This is a silly example, but I would love to see as much context baked into LLM-generated responses as possible."),Je=f(),c=r("div"),fe=r("p"),zt=n("Join me, for a minute, in the ✨ AI-free zone ✨."),Et=f(),Y=r("p"),At=n(`John Burn-Murdoch
2is a wonderful reporter at the Financial Times who writes these hugely interesting Tweet threads walking through a concept, backing up points with basic charts. Let's take `),K=r("a"),Pt=n("this thread on American inequality"),St=n(" as an example:"),Tt=f(),I(Q.$$.fragment),Wt=f(),de=r("p"),Bt=n('He starts with two facts: "The richest Americans are the richest in the world" and "Food poverty is more severe in America than in any other developed country". But a tweet with just those two facts would fall quite flat. Backing up these points with charts really paint a fuller picture. For example, I can quickly see that Switzerland is the next richest country, although the US has almost 50% more median disposable household income for the top 10%. And there are only 15 other countries that make even one third of what the US does.'),qt=f(),ce=r("p"),Lt=n("The Tweet thread goes on, building a very rich picture just using simple charts."),jt=f(),M=r("div"),we=r("div"),I(X.$$.fragment),Mt=f(),ge=r("div"),I(Z.$$.fragment),Dt=f(),ve=r("p"),Ft=n("Honestly, wanting to document the beauty of JBM's tweets is a large reason why I wanted to write these thoughts down. It's a great illustration of how filling in some of the surrounding, not-explicitly-related context can really make a difference in understanding."),Ht=f(),ye=r("p"),Vt=n("I often find myself drawing parallels between these AI interactions and data visualization, emphasizing the need to fill in the blanks with more context. Adding context isn’t just about making things fancy — it’s about meeting the growing expectations of users in this AI-driven era."),Jt=f(),be=r("p"),Nt=n("So, where do we go from here? We need solutions. Imagine interfaces that understand what you need before you ask. It’s about presenting information in a way that makes sense right off the bat. But there are challenges to tackle, like privacy and not overwhelming users with too much info."),Ut=f(),ue=r("p"),Ct=n("Okay, back to talking about AI."),Ne=f(),D=r("p"),Gt=n("The point I'm trying to make here is really just a small one: "),me=r("strong"),Ot=n("couching AI-generated responses in larger frameworks and related context leads to much richer, stronger understanding"),Rt=n(". Whether it's adding structured data to chatbot responses, showing related concepts, or showing a visualization of the larger picture, adding context goes a long way to orient the user."),this.h()},l(e){Ta("svelte-1az6e94",document.head).forEach(t),w=u(e),z(g.$$.fragment,e),b=u(e),$=l(e,"H1",{class:!0});var Kt=h($);k=i(Kt,Ze),Kt.forEach(t),v=u(e),m=l(e,"P",{class:!0});var Ue=h(m);_=i(Ue,"When we talk about adding context to AI-enhanced interfaces, we’re usually focused on feeding LLMs the right information. Writing the best prompts, connecting to data stores, that kind of thing. But "),ee=l(Ue,"STRONG",{class:!0});var Qt=h(ee);et=i(Qt,"what about providing context to us, the human users"),Qt.forEach(t),tt=i(Ue,"?"),Ue.forEach(t),_e=u(e),te=l(e,"P",{});var Xt=h(te);at=i(Xt,"Let's look at the typical back-and-forth with a chatbot: you ask something, it responds, and so on. Say you’ve heard about a fun new concept called condensation and you want to learn more about it."),Xt.forEach(t),$e=u(e),z(F.$$.fragment,e),xe=u(e),W=l(e,"P",{});

2var Ce=h(W);st=i(Ce,"This is a great answer! We've learned what condensation is, when it happens, and even got an example. What would be wonderful, though, is showing common frameworks that this knowledge is usually presented with. If we look at the "),H=l(Ce,"A",{href:!0,class:!0});var Zt=h(H);ot=i(Zt,"Wikipedia entry for condensation"),Zt.forEach(t),nt=i(Ce,", we see this lovely table:"),Ce.forEach(t),Ie=u(e),z(V.$$.fragment,e),ze=u(e),ae=l(e,"P",{});var ea=h(ae);it=i(ea,"Looking at this table, I can quickly see what the phases are, what the other transitions are called, and even that the transition between phases is different depending on its direction. And on top of that, I can very easily continue down the rabbit hole by clicking on any of the links in the table to learn more about other phase transitions. Whereas asking follow-up questions to a chatbot can feel like searching a dark room by pointing a flashlight and turning it on for a second at a time."),ea.forEach(t),Ee=u(e),B=l(e,"P",{});var Ge=h(B);rt=i(Ge,"Note that I'm not necessarily saying that the Wikipedia entry is "),se=l(Ge,"EM",{class:!0});var ta=h(se);lt=i(ta,"better"),ta.forEach(t),ht=i(Ge," than the chatbot response. But it would be helpful to have some of the surrounding context for the chatbot response that isn't strictly information about condensation."),Ge.forEach(t),Ae=u(e),q=l(e,"P",{});var Oe=h(q);ft=i(Oe,"Here's another example that sticks out to me: let's say I'm building a website with the "),J=l(Oe,"A",{href:!0,class:!0});var aa=h(J);ut=i(aa,"Svelte framework"),aa.forEach(t),mt=i(Oe," and I want an image to fade in. I can ask my friend ChatGPT for help:"),Oe.forEach(t),Pe=u(e),z(N.$$.fragment,e),Se=u(e),U=l(e,"DIV",{class:!0});var sa=h(U);pt=i(sa,"..."),sa.forEach(t),Te=u(e),z(C.$$.fragment,e),We=u(e),L=l(e,"P",{});var Re=h(L);dt=i(Re,"This answer is perfectly helpful and can get me on my way. But looking at the "),G=l(Re,"A",{href:!0,class:!0});var oa=h(G);ct=i(oa,"Svelte documentation"),oa.forEach(t),wt=i(Re," gives me a great idea of other types of transitions, without making me explicitly look for them:"),Re.forEach(t),Be=u(e),z(O.$$.fragment,e),qe=u(e),oe=l(e,"P",{});var na=h(oe);gt=i(na,"And zooming out a bit, I can see other important Svelte concepts."),na.forEach(t),Le=u(e),z(R.$$.fragment,e),je=u(e),j=l(e,"P",{});var Ye=h(j);vt=i(Ye,"I might see that there's also a "),pe=l(Ye,"CODE",{});var ia=h(pe);yt=i(ia,Yt),ia.forEach(t),bt=i(Ye," module and learn about that for future reference. Unknown unknowns are hard to stumble on when you're only given the information you explicitly ask for."),Ye.forEach(t),Me=u(e),ne=l(e,"P",{});var ra=h(ne);kt=i(ra,"It feels important that these two examples (the phase change table and the Svelte documentation topics) show structured data that isn't presented as raw text. This gives room for related concept that feel more lightweight: easy to ignore or scan quickly."),ra.forEach(t),De=u(e),ie=l(e,"H2",{});var la=h(ie);_t=i(la,"What about outside of chat?"),la.forEach(t),Fe=u(e),re=l(e,"P",{});var ha=h(re);$t=i(ha,'The same gap pops up in many demos of task-oriented AI applications. For example: ordering a pizza. You ask for a pizza, and presto, "Pizza ordered."'),ha.forEach(t),He=u(e),le=l(e,"P",{});var fa=h(le);xt=i(fa,"But often I want to know what kinds of pizza places are available or the range of pizza prices. Is this pizza the best deal, the highest rated, or maybe some combination of the two? Showing where the chosen pizza falls in a distribution of price or ratings would go a long way to making me feel oriented."),fa.forEach(t),Ve=u(e),he=l(e,"P",{});var ua=h(he);It=i(ua,"This is a silly example, but I would love to see as much context baked into LLM-generated responses as possible."),ua.forEach(t),Je=u(e),c=l(e,"DIV",{class:!0});var y=h(c);fe=l(y,"P",{class:!0});var ma=h(fe);zt=i(ma,"Join me, for a minute, in the ✨ AI-free zone ✨."),ma.forEach(t),Et=u(y),Y=l(y,"P",{});var Ke=h(Y);At=i(Ke,`John Burn-Murdoch
3is a wonderful reporter at the Financial Times who writes these hugely interesting Tweet threads walking through a concept, backing up points with basic charts. Let's take `),K=l(Ke,"A",{href:!0,class:!0});var pa=h(K);

3Pt=i(pa,"this thread on American inequality"),pa.forEach(t),St=i(Ke," as an example:"),Ke.forEach(t),Tt=u(y),z(Q.$$.fragment,y),Wt=u(y),de=l(y,"P",{});var da=h(de);Bt=i(da,'He starts with two facts: "The richest Americans are the richest in the world" and "Food poverty is more severe in America than in any other developed country". But a tweet with just those two facts would fall quite flat. Backing up these points with charts really paint a fuller picture. For example, I can quickly see that Switzerland is the next richest country, although the US has almost 50% more median disposable household income for the top 10%. And there are only 15 other countries that make even one third of what the US does.'),da.forEach(t),qt=u(y),ce=l(y,"P",{});var ca=h(ce);Lt=i(ca,"The Tweet thread goes on, building a very rich picture just using simple charts."),ca.forEach(t),jt=u(y),M=l(y,"DIV",{class:!0});var Qe=h(M);we=l(Qe,"DIV",{});var wa=h(we);z(X.$$.fragment,wa),wa.forEach(t),Mt=u(Qe),ge=l(Qe,"DIV",{});var ga=h(ge);z(Z.$$.fragment,ga),ga.forEach(t),Qe.forEach(t),Dt=u(y),ve=l(y,"P",{});var va=h(ve);Ft=i(va,"Honestly, wanting to document the beauty of JBM's tweets is a large reason why I wanted to write these thoughts down. It's a great illustration of how filling in some of the surrounding, not-explicitly-related context can really make a difference in understanding."),va.forEach(t),Ht=u(y),ye=l(y,"P",{});var ya=h(ye);Vt=i(ya,"I often find myself drawing parallels between these AI interactions and data visualization, emphasizing the need to fill in the blanks with more context. Adding context isn’t just about making things fancy — it’s about meeting the growing expectations of users in this AI-driven era."),ya.forEach(t),Jt=u(y),be=l(y,"P",{});var ba=h(be);Nt=i(ba,"So, where do we go from here? We need solutions. Imagine interfaces that understand what you need before you ask. It’s about presenting information in a way that makes sense right off the bat. But there are challenges to tackle, like privacy and not overwhelming users with too much info."),ba.forEach(t),Ut=u(y),ue=l(y,"P",{class:!0});var ka=h(ue);Ct=i(ka,"Okay, back to talking about AI."),ka.forEach(t),y.forEac

3h(t),Ne=u(e),D=l(e,"P",{});var Xe=h(D);Gt=i(Xe,"The point I'm trying to make here is really just a small one: "),me=l(Xe,"STRONG",{class:!0});var _a=h(me);Ot=i(_a,"couching AI-generated responses in larger frameworks and related context leads to much richer, stronger understanding"),_a.forEach(t),Rt=i(Xe,". Whether it's adding structured data to chatbot responses, showing related concepts, or showing a visualization of the larger picture, adding context goes a long way to orient the user."),Xe.forEach(t),this.h()},h(){d($,"class","italic"),d(ee,"class","svelte-1ahyu8k"),d(m,"class","mt-10"),d(H,"href","https://en.wikipedia.org/wiki/Condensation"),d(H,"class","svelte-1ahyu8k"),d(se,"class","svelte-1ahyu8k"),d(J,"href","https://svelte.dev"),d(J,"class","svelte-1ahyu8k"),d(U,"class","mx-auto bg-white -mt-10 pb-2 w-full flex items-center justify-center z-10"),d(G,"href","https://svelte.dev/docs/svelte-transition#fade"),d(G,"class","svelte-1ahyu8k"),d(fe,"class","text-sky-700"),d(K,"href","https://x.com/jburnmurdoch/status/1733188292277838292?s=20"),d(K,"class","svelte-1ahyu8k"),d(M,"class","grid-wide grid md:grid-cols-2 gap-10"),d(ue,"class","text-sky-700 pt-12"),d(c,"class","grid-full bg-sky-100 py-16 my-16 article-grid"),d(me,"class","svelte-1ahyu8k")},m(e,s){o(e,w,s),E(g,e,s),o(e,b,s),o(e,$,s),a($,k),o(e,v,s),o(e,m,s),a(m,_),a(m,ee),a(ee,et),a(m,tt),o(e,_e,s),o(e,te,s),a(te,at),o(e,$e,s),E(F,e,s),o(e,xe,s),o(e,W,s),a(W,st),a(W,H),a(H,ot),a(W,nt),o(e,Ie,s),E(V,e,s),o(e,ze,s),o(e,ae,s),a(ae,it),o(e,Ee,s),o(e,B,s),a(B,rt),a(B,se),a(se,lt),a(B,ht),o(e,Ae,s),o(e,q,s),a(q,ft),a(q,J),a(J,ut),a(q,mt),o(e,Pe,s),E(N,e,s),o(e,Se,s),o(e,U,s),a(U,pt),o(e,Te,s),E(C,e,s),o(e,We,s),o(e,L,s),a(L,dt),a(L,G),a(G,ct),a(L,wt),o(e,Be,s),E(O,e,s),o(e,qe,s),o(e,oe,s),a(oe,gt),o(e,Le,s),E(R,e,s),o(e,je,s),o(e,j,s),a(j,vt),a(j,pe),a(pe,yt),a(j,bt),o(e,Me,s),o(e,ne,s),a(ne,kt),o(e,De,s

3),o(e,ie,s),a(ie,_t),o(e,Fe,s),o(e,re,s),a(re,$t),o(e,He,s),o(e,le,s),a(le,xt),o(e,Ve,s),o(e,he,s),a(he,It),o(e,Je,s),o(e,c,s),a(c,fe),a(fe,zt),a(c,Et),a(c,Y),a(Y,At),a(Y,K),a(K,Pt),a(Y,St),a(c,Tt),E(Q,c,null),a(c,Wt),a(c,de),a(de,Bt),a(c,qt),a(c,ce),a(ce,Lt),a(c,jt),a(c,M),a(M,we),E(X,we,null),a(M,Mt),a(M,ge),E(Z,ge,null),a(c,Dt),a(c,ve),a(ve,Ft),a(c,Ht),a(c,ye),a(ye,Vt),a(c,Jt),a(c,be),a(be,Nt),a(c,Ut),a(c,ue),a(ue,Ct),o(e,Ne,s),o(e,D,s),a(D,Gt),a(D,me),a(me,Ot),a(D,Rt),ke=!0},p(e,[s]){(!ke||s&0)&&p!==(p=Ze)&&(document.title=p)},i(e){ke||(A(g.$$.fragment,e),A(F.$$.fragment,e),A(V.$$.fragment,e),A(N.$$.fragment,e),A(C.$$.fragment,e),A(O.$$.fragment,e),A(R.$$.fragment,e),A(Q.$$.fragment,e),A(X.$$.fragment,e),A(Z.$$.fragment,e),ke=!0)},o(e){P(g.$$.fragment,e),P(F.$$.fragment,e),P(V.$$.fragment,e),P(N.$$.fragment,e),P(C.$$.fragment,e),P(O.$$.fragment,e),P(R.$$.fragment,e),P(Q.$$.fragment,e),P(X.$$.fragment,e),P(Z.$$.fragment,e),ke=!1},d(e){e&&t(w),S(g,e),e&&t(b),e&&t($),e&&t(v),e&&t(m),e&&t(_e),e&&t(te),e&&t($e),S(F,e),e&&t(xe),e&&t(W),e&&t(Ie),S(V,e),e&&t(ze),e&&t(ae),e&&t(Ee),e&&t(B),e&&t(Ae),e&&t(q),e&&t(Pe),S(N,e),e&&t(Se),e&&t(U),e&&t(Te),S(C,e),e&&t(We),e&&t(L),e&&t(Be),S(O,e),e&&t(qe),e&&t(oe),e&&t(Le),S(R,e),e&&t(je),e&&t(j),e&&t(Me),e&&t(ne),e&&t(De),e&&t(ie),e&&t(Fe),e&&t(re),e&&t(He),e&&t(le),e&&t(Ve),e&&t(he),e&&t(Je),e&&t(c),S(Q),S(X),S(Z),e&&t(Ne),e&&t(D)}}}const Ze="Putting knowledge in its place";class Ha extends Ea{constructor(p){super(),Aa(this,p,null,La,Pa,{})}}export{Ha as component};