@ably/ui 17.4.0-dev.dd1216dd → 17.4.0-dev.e0ae8675

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/core/CodeSnippet/ApiKeySelector.js +1 -1
  2. package/core/CodeSnippet/ApiKeySelector.js.map +1 -1
  3. package/core/CodeSnippet/LanguageSelector.js +1 -1
  4. package/core/CodeSnippet/LanguageSelector.js.map +1 -1
  5. package/core/CodeSnippet/PlainCodeView.js +1 -1
  6. package/core/CodeSnippet/PlainCodeView.js.map +1 -1
  7. package/core/CodeSnippet/types.js.map +1 -1
  8. package/core/CodeSnippet.js +1 -1
  9. package/core/CodeSnippet.js.map +1 -1
  10. package/core/remote-session-data.js.map +1 -1
  11. package/index.d.ts +12 -16
  12. package/package.json +1 -1
package/core/CodeSnippet/ApiKeySelector.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";export const getApiKeyValue=apiKeyItem=>{return typeof apiKeyItem==="string"?apiKeyItem:apiKeyItem.key};const ApiKeySelector=memo(({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&typeof apiKeys[0]==="object"&&apiKeys[0].type==="demo",[apiKeys]);const apiKeyItems=useMemo(()=>{if(!apiKeys?.length||isDemoMode)return null;return apiKeys.map(keyItem=>{const keyValue=getApiKeyValue(keyItem);return React.createElement(Select.Item,{key:keyValue,value:keyValue,className:"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,null,keyValue),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))})},[apiKeys,isDemoMode]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center"},React.createElement(Badge,{className:"ml-1 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead.")),[]);const renderApiKeyDropdown=useMemo(()=>{if(isDemoMode){return renderDemoMode}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"inline-flex items-center justify-between rounded px-2 py-1 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 focus-base","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-1"},apiKeyItems),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange,apiKeyItems,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-1"},"API key:"),renderApiKeyDropdown)});ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
1
+ import React,{useMemo}from"react";import*as Select from"@radix-ui/react-select";import Badge from"../Badge";import Icon from"../Icon";import Tooltip from"../Tooltip";const ApiKeySelector=({apiKeys,selectedApiKey,onApiKeyChange})=>{const isDemoMode=useMemo(()=>apiKeys?.length===1&&apiKeys[0].app==="demo",[apiKeys]);const renderDemoMode=useMemo(()=>React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Badge,{className:"ml-1 bg-neutral-200 dark:bg-neutral-1100"},"DEMO ONLY"),React.createElement(Tooltip,{className:"ml-0",triggerElement:React.createElement(Icon,{name:"icon-gui-information-circle-outline",size:"16px",color:"text-neutral-700 dark:text-neutral-600"})},"This code example uses a temporary key that is rate limited and expires in 4 hrs. Sign in to Ably to use your API keys instead.")),[]);const renderApiKeyDropdown=useMemo(()=>{if(isDemoMode){return renderDemoMode}if(!apiKeys?.length){return null}return React.createElement(Select.Root,{value:selectedApiKey,onValueChange:onApiKeyChange},React.createElement(Select.Trigger,{className:"inline-flex items-center justify-between rounded px-2 py-1 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 focus-base font-mono","aria-label":"API Key"},React.createElement(Select.Value,null),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-1"},apiKeys.map(apiKeyItem=>React.createElement(Select.Group,{key:apiKeyItem.app},React.createElement(Select.Label,{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mt-1"},apiKeyItem.app),apiKeyItem.keys.map(key=>React.createElement(Select.Item,{key:apiKeyItem.app+key,value:key,className:"font-mono relative flex items-center justify-between rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,null,key.length>10?`${key.substring(0,10)}...`:key),React.createElement(Select.ItemIndicator,null,React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"}))))))),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))},[apiKeys,isDemoMode,selectedApiKey,onApiKeyChange,renderDemoMode]);return React.createElement("div",{className:"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3"},React.createElement("span",{className:"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-1"},"API key:"),renderApiKeyDropdown)};ApiKeySelector.displayName="ApiKeySelector";export default ApiKeySelector;
2
2
  //# sourceMappingURL=ApiKeySelector.js.map
package/core/CodeSnippet/ApiKeySelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\nimport type { ApiKeyItem } from \"./types\";\n\ntype ApiKeySelectorProps = {\n apiKeys?: ApiKeyItem[];\n selectedApiKey: string;\n onApiKeyChange: (apiKey: string) => void;\n};\n\n// Helper functions for API key handling\nexport const getApiKeyValue = (apiKeyItem: ApiKeyItem): string => {\n return typeof apiKeyItem === \"string\" ? apiKeyItem : apiKeyItem.key;\n};\n\nconst ApiKeySelector = memo(\n ({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => {\n // Check if we're in demo mode - only compute this once\n const isDemoMode = useMemo(\n () =>\n apiKeys?.length === 1 &&\n typeof apiKeys[0] === \"object\" &&\n apiKeys[0].type === \"demo\",\n [apiKeys],\n );\n\n // Memoize API key items to prevent recreating them on each render\n const apiKeyItems = useMemo(() => {\n if (!apiKeys?.length || isDemoMode) return null;\n\n return apiKeys.map((keyItem) => {\n const keyValue = getApiKeyValue(keyItem);\n\n return (\n <Select.Item\n key={keyValue}\n value={keyValue}\n className=\"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText>{keyValue}</Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-2\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n );\n });\n }, [apiKeys, isDemoMode]);\n\n // Render the demo mode UI\n const renderDemoMode = useMemo(\n () => (\n <div className=\"flex items-center\">\n <Badge className=\"ml-1 bg-neutral-200 dark:bg-neutral-1100\">\n DEMO ONLY\n </Badge>\n <Tooltip\n className=\"ml-0\"\n triggerElement={\n <Icon\n name=\"icon-gui-information-circle-outline\"\n size=\"16px\"\n color=\"text-neutral-700 dark:text-neutral-600\"\n />\n }\n >\n This code example uses a temporary key that is rate limited and\n expires in 4 hrs. Sign in to Ably to use your API keys instead.\n </Tooltip>\n </div>\n ),\n [],\n );\n\n // Render the dropdown only if we have API keys\n const renderApiKeyDropdown = useMemo(() => {\n if (isDemoMode) {\n return renderDemoMode;\n }\n\n if (!apiKeys?.length) {\n return null;\n }\n\n return (\n <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n <Select.Trigger\n className=\"inline-flex items-center justify-between rounded px-2 py-1 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 focus-base\"\n aria-label=\"API Key\"\n >\n <Select.Value />\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-1\">{apiKeyItems}</Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n );\n }, [\n apiKeys,\n isDemoMode,\n selectedApiKey,\n onApiKeyChange,\n apiKeyItems,\n renderDemoMode,\n ]);\n\n return (\n <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3\">\n <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-1\">\n API key:\n </span>\n {renderApiKeyDropdown}\n </div>\n );\n },\n);\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","memo","useMemo","Select","Badge","Icon","Tooltip","getApiKeyValue","apiKeyItem","key","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","type","apiKeyItems","map","keyItem","keyValue","Item","value","className","ItemText","ItemIndicator","name","size","renderDemoMode","div","triggerElement","color","renderApiKeyDropdown","Root","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,AAUjC,QAAO,MAAMC,eAAiB,AAACC,aAC7B,OAAO,OAAOA,aAAe,SAAWA,WAAaA,WAAWC,GAAG,AACrE,CAAE,CAEF,MAAMC,eAAiBT,KACrB,CAAC,CAAEU,OAAO,CAAEC,cAAc,CAAEC,cAAc,CAAuB,IAE/D,MAAMC,WAAaZ,QACjB,IACES,SAASI,SAAW,GACpB,OAAOJ,OAAO,CAAC,EAAE,GAAK,UACtBA,OAAO,CAAC,EAAE,CAACK,IAAI,GAAK,OACtB,CAACL,QAAQ,EAIX,MAAMM,YAAcf,QAAQ,KAC1B,GAAI,CAACS,SAASI,QAAUD,WAAY,OAAO,KAE3C,OAAOH,QAAQO,GAAG,CAAC,AAACC,UAClB,MAAMC,SAAWb,eAAeY,SAEhC,OACE,oBAAChB,OAAOkB,IAAI,EACVZ,IAAKW,SACLE,MAAOF,SACPG,UAAU,mRAEV,oBAACpB,OAAOqB,QAAQ,MAAEJ,UAClB,oBAACjB,OAAOsB,aAAa,EAACF,UAAU,oBAC9B,oBAAClB,MAAKqB,KAAK,yBAAyBC,KAAK,UAIjD,EACF,EAAG,CAAChB,QAASG,WAAW,EAGxB,MAAMc,eAAiB1B,QACrB,IACE,oBAAC2B,OAAIN,UAAU,qBACb,oBAACnB,OAAMmB,UAAU,4CAA2C,aAG5D,oBAACjB,SACCiB,UAAU,OACVO,eACE,oBAACzB,MACCqB,KAAK,sCACLC,KAAK,OACLI,MAAM,4CAGX,oIAML,EAAE,EAIJ,MAAMC,qBAAuB9B,QAAQ,KACnC,GAAIY,WAAY,CACd,OAAOc,cACT,CAEA,GAAI,CAACjB,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACZ,OAAO8B,IAAI,EAACX,MAAOV,eAAgBsB,cAAerB,gBACjD,oBAACV,OAAOgC,OAAO,EACbZ,UAAU,kNACVa,aAAW,WAEX,oBAACjC,OAAOkC,KAAK,OACb,oBAAClC,OAAOE,IAAI,MACV,oBAACA,MAAKqB,KAAK,gCAAgCC,KAAK,WAIpD,oBAACxB,OAAOmC,MAAM,MACZ,oBAACnC,OAAOoC,OAAO,EAAChB,UAAU,oIACxB,oBAACpB,OAAOqC,cAAc,EAACjB,UAAU,8IAC/B,oBAAClB,MACCqB,KAAK,gCACLC,KAAK,OACLc,cAAc,gBAIlB,oBAACtC,OAAOuC,QAAQ,EAACnB,UAAU,OAAON,aAElC,oBAACd,OAAOwC,gBAAgB,EAACpB,UAAU,8IACjC,oBAAClB,MAAKqB,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CACDhB,QACAG,WACAF,eACAC,eACAI,YACAW,eACD,EAED,OACE,oBAACC,OAAIN,UAAU,oFACb,oBAACqB,QAAKrB,UAAU,8DAA6D,YAG5ES,qBAGP,EAIFtB,CAAAA,eAAemC,WAAW,CAAG,gBAE7B,gBAAenC,cAAe"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/ApiKeySelector.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Badge from \"../Badge\";\nimport Icon from \"../Icon\";\nimport Tooltip from \"../Tooltip\";\nimport type { ApiKeysItem } from \"./types\";\n\ntype ApiKeySelectorProps = {\n apiKeys?: ApiKeysItem[];\n selectedApiKey: string;\n onApiKeyChange: (apiKey: string) => void;\n};\n\nconst ApiKeySelector = ({\n apiKeys,\n selectedApiKey,\n onApiKeyChange,\n}: ApiKeySelectorProps) => {\n const isDemoMode = useMemo(\n () => apiKeys?.length === 1 && apiKeys[0].app === \"demo\",\n [apiKeys],\n );\n\n // Render the demo mode UI\n const renderDemoMode = useMemo(\n () => (\n <div className=\"flex items-center gap-2\">\n <Badge className=\"ml-1 bg-neutral-200 dark:bg-neutral-1100\">\n DEMO ONLY\n </Badge>\n <Tooltip\n className=\"ml-0\"\n triggerElement={\n <Icon\n name=\"icon-gui-information-circle-outline\"\n size=\"16px\"\n color=\"text-neutral-700 dark:text-neutral-600\"\n />\n }\n >\n This code example uses a temporary key that is rate limited and\n expires in 4 hrs. Sign in to Ably to use your API keys instead.\n </Tooltip>\n </div>\n ),\n [],\n );\n\n // Render the dropdown only if we have API keys\n const renderApiKeyDropdown = useMemo(() => {\n if (isDemoMode) {\n return renderDemoMode;\n }\n\n if (!apiKeys?.length) {\n return null;\n }\n\n return (\n <Select.Root value={selectedApiKey} onValueChange={onApiKeyChange}>\n <Select.Trigger\n className=\"inline-flex items-center justify-between rounded px-2 py-1 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 focus-base font-mono\"\n aria-label=\"API Key\"\n >\n <Select.Value />\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50\">\n <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-1\">\n {apiKeys.map((apiKeyItem) => (\n <Select.Group key={apiKeyItem.app}>\n <Select.Label className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 mt-1\">\n {apiKeyItem.app}\n </Select.Label>\n {apiKeyItem.keys.map((key) => (\n <Select.Item\n key={apiKeyItem.app + key}\n value={key}\n className=\"font-mono relative flex items-center justify-between rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText>\n {key.length > 10 ? `${key.substring(0, 10)}...` : key}\n </Select.ItemText>\n <Select.ItemIndicator>\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n ))}\n </Select.Group>\n ))}\n </Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n );\n }, [apiKeys, isDemoMode, selectedApiKey, onApiKeyChange, renderDemoMode]);\n\n return (\n <div className=\"flex items-center border-t border-neutral-200 dark:border-neutral-1100 px-3 py-3\">\n <span className=\"ui-text-label4 text-neutral-700 dark:text-neutral-600 mr-1\">\n API key:\n </span>\n {renderApiKeyDropdown}\n </div>\n );\n};\n\n// Define a display name to improve debugging\nApiKeySelector.displayName = \"ApiKeySelector\";\n\nexport default ApiKeySelector;\n"],"names":["React","useMemo","Select","Badge","Icon","Tooltip","ApiKeySelector","apiKeys","selectedApiKey","onApiKeyChange","isDemoMode","length","app","renderDemoMode","div","className","triggerElement","name","size","color","renderApiKeyDropdown","Root","value","onValueChange","Trigger","aria-label","Value","Portal","Content","ScrollUpButton","additionalCSS","Viewport","map","apiKeyItem","Group","key","Label","keys","Item","ItemText","substring","ItemIndicator","ScrollDownButton","span","displayName"],"mappings":"AAAA,OAAOA,OAASC,OAAO,KAAQ,OAAQ,AACvC,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,UAAW,UAAW,AAC7B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,YAAa,YAAa,CASjC,MAAMC,eAAiB,CAAC,CACtBC,OAAO,CACPC,cAAc,CACdC,cAAc,CACM,IACpB,MAAMC,WAAaT,QACjB,IAAMM,SAASI,SAAW,GAAKJ,OAAO,CAAC,EAAE,CAACK,GAAG,GAAK,OAClD,CAACL,QAAQ,EAIX,MAAMM,eAAiBZ,QACrB,IACE,oBAACa,OAAIC,UAAU,2BACb,oBAACZ,OAAMY,UAAU,4CAA2C,aAG5D,oBAACV,SACCU,UAAU,OACVC,eACE,oBAACZ,MACCa,KAAK,sCACLC,KAAK,OACLC,MAAM,4CAGX,oIAML,EAAE,EAIJ,MAAMC,qBAAuBnB,QAAQ,KACnC,GAAIS,WAAY,CACd,OAAOG,cACT,CAEA,GAAI,CAACN,SAASI,OAAQ,CACpB,OAAO,IACT,CAEA,OACE,oBAACT,OAAOmB,IAAI,EAACC,MAAOd,eAAgBe,cAAed,gBACjD,oBAACP,OAAOsB,OAAO,EACbT,UAAU,4NACVU,aAAW,WAEX,oBAACvB,OAAOwB,KAAK,OACb,oBAACxB,OAAOE,IAAI,MACV,oBAACA,MAAKa,KAAK,gCAAgCC,KAAK,WAIpD,oBAAChB,OAAOyB,MAAM,MACZ,oBAACzB,OAAO0B,OAAO,EAACb,UAAU,oIACxB,oBAACb,OAAO2B,cAAc,EAACd,UAAU,8IAC/B,oBAACX,MACCa,KAAK,gCACLC,KAAK,OACLY,cAAc,gBAIlB,oBAAC5B,OAAO6B,QAAQ,EAAChB,UAAU,OACxBR,QAAQyB,GAAG,CAAC,AAACC,YACZ,oBAAC/B,OAAOgC,KAAK,EAACC,IAAKF,WAAWrB,GAAG,EAC/B,oBAACV,OAAOkC,KAAK,EAACrB,UAAU,iEACrBkB,WAAWrB,GAAG,EAEhBqB,WAAWI,IAAI,CAACL,GAAG,CAAC,AAACG,KACpB,oBAACjC,OAAOoC,IAAI,EACVH,IAAKF,WAAWrB,GAAG,CAAGuB,IACtBb,MAAOa,IACPpB,UAAU,6SAEV,oBAACb,OAAOqC,QAAQ,MACbJ,IAAIxB,MAAM,CAAG,GAAK,CAAC,EAAEwB,IAAIK,SAAS,CAAC,EAAG,IAAI,GAAG,CAAC,CAAGL,KAEpD,oBAACjC,OAAOuC,aAAa,MACnB,oBAACrC,MAAKa,KAAK,yBAAyBC,KAAK,eAQrD,oBAAChB,OAAOwC,gBAAgB,EAAC3B,UAAU,8IACjC,oBAACX,MAAKa,KAAK,gCAAgCC,KAAK,YAM5D,EAAG,CAACX,QAASG,WAAYF,eAAgBC,eAAgBI,eAAe,EAExE,OACE,oBAACC,OAAIC,UAAU,oFACb,oBAAC4B,QAAK5B,UAAU,8DAA6D,YAG5EK,qBAGP,CAGAd,CAAAA,eAAesC,WAAW,CAAG,gBAE7B,gBAAetC,cAAe"}
package/core/CodeSnippet/LanguageSelector.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon,activeLanguageInfo})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageDisplayName(lang);return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageIcon(lang),variant:"segmented",size:"sm"},displayName)}),[languages,activeLanguage,onLanguageChange,getLanguageDisplayName,getLanguageIcon]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageIcon(lang),size:"20px"}),React.createElement("span",null,getLanguageDisplayName(lang)))),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages,getLanguageDisplayName,getLanguageIcon]);const mobileSelectValue=useMemo(()=>activeLanguage&&activeLanguageInfo?React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:activeLanguageInfo.icon,size:"20px"}),React.createElement("span",null,activeLanguageInfo.label)):null,[activeLanguage,activeLanguageInfo]);return React.createElement("div",{className:"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]"},React.createElement("div",{className:"hidden sm:flex gap-2"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},mobileSelectValue),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-1"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))});LanguageSelector.displayName="LanguageSelector";export default LanguageSelector;
1
+ import React,{memo,useMemo}from"react";import*as Select from"@radix-ui/react-select";import Icon from"../Icon";import TooltipButton from"./TooltipButton";import{getLanguageInfo}from"./languages";const LanguageSelector=memo(({languages,activeLanguage,onLanguageChange})=>{const desktopLanguageElements=useMemo(()=>languages.map(lang=>{const active=activeLanguage===lang;const displayName=getLanguageInfo(lang).label;return React.createElement(TooltipButton,{key:lang,tooltip:displayName,active:active,onClick:()=>onLanguageChange(lang),icon:getLanguageInfo(lang).icon,variant:"segmented",size:"sm"},displayName)}),[languages,activeLanguage,onLanguageChange]);const mobileLanguageElements=useMemo(()=>languages.map(lang=>React.createElement(Select.Item,{key:lang,value:lang,className:"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base"},React.createElement(Select.ItemText,{asChild:true},React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(lang).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(lang).label))),React.createElement(Select.ItemIndicator,{className:"absolute right-2"},React.createElement(Icon,{name:"icon-gui-check-outline",size:"16px"})))),[languages]);const mobileSelectValue=useMemo(()=>activeLanguage?React.createElement("div",{className:"flex items-center gap-2"},React.createElement(Icon,{name:getLanguageInfo(activeLanguage).icon,size:"20px"}),React.createElement("span",null,getLanguageInfo(activeLanguage).label)):null,[activeLanguage]);return React.createElement("div",{className:"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]"},React.createElement("div",{className:"hidden sm:flex gap-2"},desktopLanguageElements),React.createElement("div",{className:"sm:hidden w-full"},React.createElement(Select.Root,{value:activeLanguage||undefined,onValueChange:onLanguageChange},React.createElement(Select.Trigger,{className:"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base","aria-label":"Select language"},React.createElement(Select.Value,{asChild:true},mobileSelectValue),React.createElement(Select.Icon,null,React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"}))),React.createElement(Select.Portal,null,React.createElement(Select.Content,{className:"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]",position:"popper"},React.createElement(Select.ScrollUpButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px",additionalCSS:"rotate-180"})),React.createElement(Select.Viewport,{className:"p-1"},mobileLanguageElements),React.createElement(Select.ScrollDownButton,{className:"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base"},React.createElement(Icon,{name:"icon-gui-chevron-down-outline",size:"16px"})))))))});LanguageSelector.displayName="LanguageSelector";export default LanguageSelector;
2
2
  //# sourceMappingURL=LanguageSelector.js.map
package/core/CodeSnippet/LanguageSelector.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport { IconName } from \"../Icon/types\";\nimport TooltipButton from \"./TooltipButton\";\nimport { LanguageInfo } from \"./languages\";\n\ntype LanguageSelectorProps = {\n languages: string[];\n activeLanguage: string | null;\n onLanguageChange: (language: string) => void;\n getLanguageDisplayName: (lang: string) => string;\n getLanguageIcon: (lang: string) => IconName;\n activeLanguageInfo: LanguageInfo | null;\n};\n\nconst LanguageSelector = memo(\n ({\n languages,\n activeLanguage,\n onLanguageChange,\n getLanguageDisplayName,\n getLanguageIcon,\n activeLanguageInfo,\n }: LanguageSelectorProps) => {\n // Memoize the desktop language elements to avoid recreating on each render\n const desktopLanguageElements = useMemo(\n () =>\n languages.map((lang) => {\n const active = activeLanguage === lang;\n const displayName = getLanguageDisplayName(lang);\n\n return (\n <TooltipButton\n key={lang}\n tooltip={displayName}\n active={active}\n onClick={() => onLanguageChange(lang)}\n icon={getLanguageIcon(lang)}\n variant=\"segmented\"\n size=\"sm\"\n >\n {displayName}\n </TooltipButton>\n );\n }),\n [\n languages,\n activeLanguage,\n onLanguageChange,\n getLanguageDisplayName,\n getLanguageIcon,\n ],\n );\n\n // Memoize the mobile language elements\n const mobileLanguageElements = useMemo(\n () =>\n languages.map((lang) => (\n <Select.Item\n key={lang}\n value={lang}\n className=\"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText asChild>\n <div className=\"flex items-center gap-2\">\n <Icon name={getLanguageIcon(lang)} size=\"20px\" />\n <span>{getLanguageDisplayName(lang)}</span>\n </div>\n </Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-2\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n )),\n [languages, getLanguageDisplayName, getLanguageIcon],\n );\n\n // Memoize the mobile Select.Value content as it's recreated on every render\n const mobileSelectValue = useMemo(\n () =>\n activeLanguage && activeLanguageInfo ? (\n <div className=\"flex items-center gap-2\">\n <Icon name={activeLanguageInfo.icon} size=\"20px\" />\n <span>{activeLanguageInfo.label}</span>\n </div>\n ) : null,\n [activeLanguage, activeLanguageInfo],\n );\n\n return (\n <div className=\"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]\">\n {/* Desktop language selector - SegmentedControls */}\n <div className=\"hidden sm:flex gap-2\">{desktopLanguageElements}</div>\n\n {/* Mobile language selector - Select dropdown */}\n <div className=\"sm:hidden w-full\">\n <Select.Root\n value={activeLanguage || undefined}\n onValueChange={onLanguageChange}\n >\n <Select.Trigger\n className=\"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base\"\n aria-label=\"Select language\"\n >\n <Select.Value asChild>{mobileSelectValue}</Select.Value>\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content\n className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n position=\"popper\"\n >\n <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-1\">\n {mobileLanguageElements}\n </Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n </div>\n </div>\n );\n },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","LanguageSelector","languages","activeLanguage","onLanguageChange","getLanguageDisplayName","getLanguageIcon","activeLanguageInfo","desktopLanguageElements","map","lang","active","displayName","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","label","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAE3B,QAAOC,kBAAmB,iBAAkB,CAY5C,MAAMC,iBAAmBL,KACvB,CAAC,CACCM,SAAS,CACTC,cAAc,CACdC,gBAAgB,CAChBC,sBAAsB,CACtBC,eAAe,CACfC,kBAAkB,CACI,IAEtB,MAAMC,wBAA0BX,QAC9B,IACEK,UAAUO,GAAG,CAAC,AAACC,OACb,MAAMC,OAASR,iBAAmBO,KAClC,MAAME,YAAcP,uBAAuBK,MAE3C,OACE,oBAACV,eACCa,IAAKH,KACLI,QAASF,YACTD,OAAQA,OACRI,QAAS,IAAMX,iBAAiBM,MAChCM,KAAMV,gBAAgBI,MACtBO,QAAQ,YACRC,KAAK,MAEJN,YAGP,GACF,CACEV,UACAC,eACAC,iBACAC,uBACAC,gBACD,EAIH,MAAMa,uBAAyBtB,QAC7B,IACEK,UAAUO,GAAG,CAAC,AAACC,MACb,oBAACZ,OAAOsB,IAAI,EACVP,IAAKH,KACLW,MAAOX,KACPY,UAAU,mRAEV,oBAACxB,OAAOyB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMpB,gBAAgBI,MAAOQ,KAAK,SACxC,oBAACS,YAAMtB,uBAAuBK,SAGlC,oBAACZ,OAAO8B,aAAa,EAACN,UAAU,oBAC9B,oBAACvB,MAAK2B,KAAK,yBAAyBR,KAAK,YAIjD,CAAChB,UAAWG,uBAAwBC,gBAAgB,EAItD,MAAMuB,kBAAoBhC,QACxB,IACEM,gBAAkBI,mBAChB,oBAACkB,OAAIH,UAAU,2BACb,oBAACvB,MAAK2B,KAAMnB,mBAAmBS,IAAI,CAAEE,KAAK,SAC1C,oBAACS,YAAMpB,mBAAmBuB,KAAK,GAE/B,KACN,CAAC3B,eAAgBI,mBAAmB,EAGtC,OACE,oBAACkB,OAAIH,UAAU,yFAEb,oBAACG,OAAIH,UAAU,wBAAwBd,yBAGvC,oBAACiB,OAAIH,UAAU,oBACb,oBAACxB,OAAOiC,IAAI,EACVV,MAAOlB,gBAAkB6B,UACzBC,cAAe7B,kBAEf,oBAACN,OAAOoC,OAAO,EACbZ,UAAU,8QACVa,aAAW,mBAEX,oBAACrC,OAAOsC,KAAK,EAACZ,QAAAA,MAASK,mBACvB,oBAAC/B,OAAOC,IAAI,MACV,oBAACA,MAAK2B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACpB,OAAOuC,MAAM,MACZ,oBAACvC,OAAOwC,OAAO,EACbhB,UAAU,yKACViB,SAAS,UAET,oBAACzC,OAAO0C,cAAc,EAAClB,UAAU,8IAC/B,oBAACvB,MACC2B,KAAK,gCACLR,KAAK,OACLuB,cAAc,gBAIlB,oBAAC3C,OAAO4C,QAAQ,EAACpB,UAAU,OACxBH,wBAGH,oBAACrB,OAAO6C,gBAAgB,EAACrB,UAAU,8IACjC,oBAACvB,MAAK2B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFjB,CAAAA,iBAAiBW,WAAW,CAAG,kBAE/B,gBAAeX,gBAAiB"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/LanguageSelector.tsx"],"sourcesContent":["import React, { memo, useMemo } from \"react\";\nimport * as Select from \"@radix-ui/react-select\";\nimport Icon from \"../Icon\";\nimport TooltipButton from \"./TooltipButton\";\nimport { getLanguageInfo } from \"./languages\";\n\ntype LanguageSelectorProps = {\n languages: string[];\n activeLanguage: string | null;\n onLanguageChange: (language: string) => void;\n};\n\nconst LanguageSelector = memo(\n ({ languages, activeLanguage, onLanguageChange }: LanguageSelectorProps) => {\n // Memoize the desktop language elements to avoid recreating on each render\n const desktopLanguageElements = useMemo(\n () =>\n languages.map((lang) => {\n const active = activeLanguage === lang;\n const displayName = getLanguageInfo(lang).label;\n\n return (\n <TooltipButton\n key={lang}\n tooltip={displayName}\n active={active}\n onClick={() => onLanguageChange(lang)}\n icon={getLanguageInfo(lang).icon}\n variant=\"segmented\"\n size=\"sm\"\n >\n {displayName}\n </TooltipButton>\n );\n }),\n [languages, activeLanguage, onLanguageChange],\n );\n\n // Memoize the mobile language elements\n const mobileLanguageElements = useMemo(\n () =>\n languages.map((lang) => (\n <Select.Item\n key={lang}\n value={lang}\n className=\"relative flex items-center rounded px-2 py-1.5 text-14 text-neutral-1300 dark:text-neutral-000 select-none hover:bg-neutral-100 dark:hover:bg-neutral-1200 data-[highlighted]:outline-none data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base\"\n >\n <Select.ItemText asChild>\n <div className=\"flex items-center gap-2\">\n <Icon name={getLanguageInfo(lang).icon} size=\"20px\" />\n <span>{getLanguageInfo(lang).label}</span>\n </div>\n </Select.ItemText>\n <Select.ItemIndicator className=\"absolute right-2\">\n <Icon name=\"icon-gui-check-outline\" size=\"16px\" />\n </Select.ItemIndicator>\n </Select.Item>\n )),\n [languages],\n );\n\n // Memoize the mobile Select.Value content as it's recreated on every render\n const mobileSelectValue = useMemo(\n () =>\n activeLanguage ? (\n <div className=\"flex items-center gap-2\">\n <Icon name={getLanguageInfo(activeLanguage).icon} size=\"20px\" />\n <span>{getLanguageInfo(activeLanguage).label}</span>\n </div>\n ) : null,\n [activeLanguage],\n );\n\n return (\n <div className=\"p-2 border-b border-neutral-200 dark:border-neutral-1100 overflow-x-auto h-[3.625rem]\">\n {/* Desktop language selector - SegmentedControls */}\n <div className=\"hidden sm:flex gap-2\">{desktopLanguageElements}</div>\n\n {/* Mobile language selector - Select dropdown */}\n <div className=\"sm:hidden w-full\">\n <Select.Root\n value={activeLanguage || undefined}\n onValueChange={onLanguageChange}\n >\n <Select.Trigger\n className=\"w-full inline-flex items-center justify-between rounded-lg px-3 py-2 text-14 text-neutral-1300 dark:text-neutral-000 bg-neutral-200 dark:bg-neutral-1100 hover:bg-neutral-300 dark:hover:bg-neutral-1000 gap-1 border border-neutral-300 dark:border-neutral-900 focus-base\"\n aria-label=\"Select language\"\n >\n <Select.Value asChild>{mobileSelectValue}</Select.Value>\n <Select.Icon>\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.Icon>\n </Select.Trigger>\n\n <Select.Portal>\n <Select.Content\n className=\"overflow-hidden rounded-md bg-neutral-000 dark:bg-neutral-1300 border border-neutral-200 dark:border-neutral-1000 shadow-md z-50 w-[var(--radix-select-trigger-width)]\"\n position=\"popper\"\n >\n <Select.ScrollUpButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon\n name=\"icon-gui-chevron-down-outline\"\n size=\"16px\"\n additionalCSS=\"rotate-180\"\n />\n </Select.ScrollUpButton>\n\n <Select.Viewport className=\"p-1\">\n {mobileLanguageElements}\n </Select.Viewport>\n\n <Select.ScrollDownButton className=\"flex items-center justify-center h-6 bg-neutral-000 dark:bg-neutral-1300 text-neutral-1300 dark:text-neutral-000 cursor-default focus-base\">\n <Icon name=\"icon-gui-chevron-down-outline\" size=\"16px\" />\n </Select.ScrollDownButton>\n </Select.Content>\n </Select.Portal>\n </Select.Root>\n </div>\n </div>\n );\n },\n);\n\n// Define a display name to improve debugging\nLanguageSelector.displayName = \"LanguageSelector\";\n\nexport default LanguageSelector;\n"],"names":["React","memo","useMemo","Select","Icon","TooltipButton","getLanguageInfo","LanguageSelector","languages","activeLanguage","onLanguageChange","desktopLanguageElements","map","lang","active","displayName","label","key","tooltip","onClick","icon","variant","size","mobileLanguageElements","Item","value","className","ItemText","asChild","div","name","span","ItemIndicator","mobileSelectValue","Root","undefined","onValueChange","Trigger","aria-label","Value","Portal","Content","position","ScrollUpButton","additionalCSS","Viewport","ScrollDownButton"],"mappings":"AAAA,OAAOA,OAASC,IAAI,CAAEC,OAAO,KAAQ,OAAQ,AAC7C,WAAYC,WAAY,wBAAyB,AACjD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,kBAAmB,iBAAkB,AAC5C,QAASC,eAAe,KAAQ,aAAc,CAQ9C,MAAMC,iBAAmBN,KACvB,CAAC,CAAEO,SAAS,CAAEC,cAAc,CAAEC,gBAAgB,CAAyB,IAErE,MAAMC,wBAA0BT,QAC9B,IACEM,UAAUI,GAAG,CAAC,AAACC,OACb,MAAMC,OAASL,iBAAmBI,KAClC,MAAME,YAAcT,gBAAgBO,MAAMG,KAAK,CAE/C,OACE,oBAACX,eACCY,IAAKJ,KACLK,QAASH,YACTD,OAAQA,OACRK,QAAS,IAAMT,iBAAiBG,MAChCO,KAAMd,gBAAgBO,MAAMO,IAAI,CAChCC,QAAQ,YACRC,KAAK,MAEJP,YAGP,GACF,CAACP,UAAWC,eAAgBC,iBAAiB,EAI/C,MAAMa,uBAAyBrB,QAC7B,IACEM,UAAUI,GAAG,CAAC,AAACC,MACb,oBAACV,OAAOqB,IAAI,EACVP,IAAKJ,KACLY,MAAOZ,KACPa,UAAU,mRAEV,oBAACvB,OAAOwB,QAAQ,EAACC,QAAAA,MACf,oBAACC,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBO,MAAMO,IAAI,CAAEE,KAAK,SAC7C,oBAACS,YAAMzB,gBAAgBO,MAAMG,KAAK,IAGtC,oBAACb,OAAO6B,aAAa,EAACN,UAAU,oBAC9B,oBAACtB,MAAK0B,KAAK,yBAAyBR,KAAK,YAIjD,CAACd,UAAU,EAIb,MAAMyB,kBAAoB/B,QACxB,IACEO,eACE,oBAACoB,OAAIH,UAAU,2BACb,oBAACtB,MAAK0B,KAAMxB,gBAAgBG,gBAAgBW,IAAI,CAAEE,KAAK,SACvD,oBAACS,YAAMzB,gBAAgBG,gBAAgBO,KAAK,GAE5C,KACN,CAACP,eAAe,EAGlB,OACE,oBAACoB,OAAIH,UAAU,yFAEb,oBAACG,OAAIH,UAAU,wBAAwBf,yBAGvC,oBAACkB,OAAIH,UAAU,oBACb,oBAACvB,OAAO+B,IAAI,EACVT,MAAOhB,gBAAkB0B,UACzBC,cAAe1B,kBAEf,oBAACP,OAAOkC,OAAO,EACbX,UAAU,8QACVY,aAAW,mBAEX,oBAACnC,OAAOoC,KAAK,EAACX,QAAAA,MAASK,mBACvB,oBAAC9B,OAAOC,IAAI,MACV,oBAACA,MAAK0B,KAAK,gCAAgCR,KAAK,WAIpD,oBAACnB,OAAOqC,MAAM,MACZ,oBAACrC,OAAOsC,OAAO,EACbf,UAAU,yKACVgB,SAAS,UAET,oBAACvC,OAAOwC,cAAc,EAACjB,UAAU,8IAC/B,oBAACtB,MACC0B,KAAK,gCACLR,KAAK,OACLsB,cAAc,gBAIlB,oBAACzC,OAAO0C,QAAQ,EAACnB,UAAU,OACxBH,wBAGH,oBAACpB,OAAO2C,gBAAgB,EAACpB,UAAU,8IACjC,oBAACtB,MAAK0B,KAAK,gCAAgCR,KAAK,cAQhE,EAIFf,CAAAA,iBAAiBQ,WAAW,CAAG,kBAE/B,gBAAeR,gBAAiB"}
package/core/CodeSnippet/PlainCodeView.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useRef,useState,useCallback,memo}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const PlainCodeView=({content,className,language,icon})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{copy(content)},[copy,content]);return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative flex items-center",language==="shell"?"min-h-[3.375rem]":"min-h-12",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},icon&&React.createElement("div",{className:"absolute top-2 left-2 z-10"},React.createElement("div",{className:"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:icon,size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement("div",{className:cn(icon?"pl-11":"")},React.createElement(Code,{language:language,snippet:content,additionalCSS:"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2",showLines:false})),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};PlainCodeView.displayName="PlainCodeView";export default memo(PlainCodeView);
1
+ import React,{useRef,useState,useCallback,memo}from"react";import Icon from"../Icon";import Code from"../Code";import cn from"../utils/cn";import useCopyToClipboard from"../utils/useCopyToClipboard";import CopyButton from"./CopyButton";const PlainCodeView=({content,className,language,icon})=>{const{isCopied,copy}=useCopyToClipboard();const codeRef=useRef(null);const[isHovering,setIsHovering]=useState(false);const handleCopy=useCallback(()=>{copy(content)},[copy,content]);return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative flex items-center",language==="shell"?"min-h-[3.375rem]":"min-h-12",className),onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0,ref:codeRef},icon&&React.createElement("div",{className:"absolute top-2 left-2 z-10"},React.createElement("div",{className:"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100"},React.createElement(Icon,{name:icon,size:"20px",color:"text-neutral-1300 dark:text-neutral-000"}))),React.createElement(Code,{language:language,snippet:content,additionalCSS:cn("w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2",icon&&"pl-14"),showLines:false}),isHovering&&React.createElement(CopyButton,{onCopy:handleCopy,isCopied:isCopied}))};PlainCodeView.displayName="PlainCodeView";export default memo(PlainCodeView);
2
2
  //# sourceMappingURL=PlainCodeView.js.map
package/core/CodeSnippet/PlainCodeView.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n content: string;\n language: string;\n icon: IconName | null;\n className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n content,\n className,\n language,\n icon,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = useState(false);\n\n // Handler to copy the content\n const handleCopy = useCallback(() => {\n copy(content);\n }, [copy, content]);\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative flex items-center\",\n language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\n className,\n )}\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n ref={codeRef}\n >\n {icon && (\n <div className=\"absolute top-2 left-2 z-10\">\n <div className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name={icon}\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n )}\n\n <div className={cn(icon ? \"pl-11\" : \"\")}>\n <Code\n language={language}\n snippet={content}\n additionalCSS=\"bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2\"\n showLines={false}\n />\n </div>\n\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,+IACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAEJH,MACC,oBAACO,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,2FACb,oBAACP,MACCuB,KAAMd,KACNe,KAAK,OACLC,MAAM,8CAMd,oBAACT,OAAIT,UAAWL,GAAGO,KAAO,QAAU,KAClC,oBAACR,MACCO,SAAUA,SACVkB,QAASpB,QACTqB,cAAc,wFACdC,UAAW,SAIdf,YAAc,oBAACT,YAAWyB,OAAQd,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAcyB,WAAW,CAAG,eAE5B,gBAAe/B,KAAKM,cAAe"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/PlainCodeView.tsx"],"sourcesContent":["import React, { useRef, useState, useCallback, memo } from \"react\";\nimport Icon from \"../Icon\";\nimport Code from \"../Code\";\nimport cn from \"../utils/cn\";\nimport useCopyToClipboard from \"../utils/useCopyToClipboard\";\nimport CopyButton from \"./CopyButton\";\nimport { IconName } from \"../Icon/types\";\n\ntype PlainCodeViewProps = {\n content: string;\n language: string;\n icon: IconName | null;\n className?: string;\n};\n\n/**\n * A specialized component for displaying plain code (shell commands, text, etc.) with copy functionality\n */\nconst PlainCodeView: React.FC<PlainCodeViewProps> = ({\n content,\n className,\n language,\n icon,\n}) => {\n const { isCopied, copy } = useCopyToClipboard();\n const codeRef = useRef<HTMLDivElement>(null);\n const [isHovering, setIsHovering] = useState(false);\n\n // Handler to copy the content\n const handleCopy = useCallback(() => {\n copy(content);\n }, [copy, content]);\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 relative flex items-center\",\n language === \"shell\" ? \"min-h-[3.375rem]\" : \"min-h-12\",\n className,\n )}\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n ref={codeRef}\n >\n {icon && (\n <div className=\"absolute top-2 left-2 z-10\">\n <div className=\"w-9 h-9 rounded-lg flex items-center justify-center bg-neutral-200 dark:bg-neutral-1100\">\n <Icon\n name={icon}\n size=\"20px\"\n color=\"text-neutral-1300 dark:text-neutral-000\"\n />\n </div>\n </div>\n )}\n\n <Code\n language={language}\n snippet={content}\n additionalCSS={cn(\n \"w-full bg-neutral-000 text-neutral-1300 dark:bg-neutral-1300 dark:text-neutral-200 px-4 py-2\",\n icon && \"pl-14\",\n )}\n showLines={false}\n />\n\n {isHovering && <CopyButton onCopy={handleCopy} isCopied={isCopied} />}\n </div>\n );\n};\n\nPlainCodeView.displayName = \"PlainCodeView\";\n\nexport default memo(PlainCodeView);\n"],"names":["React","useRef","useState","useCallback","memo","Icon","Code","cn","useCopyToClipboard","CopyButton","PlainCodeView","content","className","language","icon","isCopied","copy","codeRef","isHovering","setIsHovering","handleCopy","div","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","ref","name","size","color","snippet","additionalCSS","showLines","onCopy","displayName"],"mappings":"AAAA,OAAOA,OAASC,MAAM,CAAEC,QAAQ,CAAEC,WAAW,CAAEC,IAAI,KAAQ,OAAQ,AACnE,QAAOC,SAAU,SAAU,AAC3B,QAAOC,SAAU,SAAU,AAC3B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,uBAAwB,6BAA8B,AAC7D,QAAOC,eAAgB,cAAe,CAatC,MAAMC,cAA8C,CAAC,CACnDC,OAAO,CACPC,SAAS,CACTC,QAAQ,CACRC,IAAI,CACL,IACC,KAAM,CAAEC,QAAQ,CAAEC,IAAI,CAAE,CAAGR,qBAC3B,MAAMS,QAAUhB,OAAuB,MACvC,KAAM,CAACiB,WAAYC,cAAc,CAAGjB,SAAS,OAG7C,MAAMkB,WAAajB,YAAY,KAC7Ba,KAAKL,QACP,EAAG,CAACK,KAAML,QAAQ,EAElB,OACE,oBAACU,OACCT,UAAWL,GACT,+IACAM,WAAa,QAAU,mBAAqB,WAC5CD,WAEFU,aAAc,IAAMH,cAAc,MAClCI,aAAc,IAAMJ,cAAc,OAClCK,QAAS,IAAML,cAAc,MAC7BM,OAAQ,IAAMN,cAAc,OAC5BO,SAAU,EACVC,IAAKV,SAEJH,MACC,oBAACO,OAAIT,UAAU,8BACb,oBAACS,OAAIT,UAAU,2FACb,oBAACP,MACCuB,KAAMd,KACNe,KAAK,OACLC,MAAM,8CAMd,oBAACxB,MACCO,SAAUA,SACVkB,QAASpB,QACTqB,cAAezB,GACb,+FACAO,MAAQ,SAEVmB,UAAW,QAGZf,YAAc,oBAACT,YAAWyB,OAAQd,WAAYL,SAAUA,WAG/D,CAEAL,CAAAA,cAAcyB,WAAW,CAAG,eAE5B,gBAAe/B,KAAKM,cAAe"}
package/core/CodeSnippet/types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/core/CodeSnippet/types.ts"],"sourcesContent":["// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\n\n// Define API key types\nexport type ApiKeyItem = string | { type: \"demo\"; key: string };\n\nexport type CodeSnippetProps = {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string, sdk?: SDKType) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: ApiKeyItem[];\n /**\n * Default SDK type to use for the code snippet\n */\n sdk?: SDKType;\n /**\n * Whether to show line numbers in code snippets\n */\n showCodeLines?: boolean;\n /**\n * Defines the order in which languages should be displayed.\n * Languages not in this array will be shown after those that are included.\n */\n languageOrdering?: string[];\n};\n"],"names":[],"mappings":"AAMA,QA+CE"}
1
+ {"version":3,"sources":["../../../src/core/CodeSnippet/types.ts"],"sourcesContent":["// Define SDK type\nexport type SDKType = \"realtime\" | \"rest\" | null;\n\n// Define API key types\nexport type ApiKeysItem = { app: string; keys: string[] };\n\nexport type CodeSnippetProps = {\n /**\n * If true, hides the language selector row completely\n */\n fixed?: boolean;\n /**\n * If true, renders a macOS-style window header with buttons and title\n */\n headerRow?: boolean;\n /**\n * Title to display in the header row (when headerRow is true)\n */\n title?: string;\n /**\n * Children elements with lang attribute\n */\n children: React.ReactNode;\n /**\n * Additional CSS classes\n */\n className?: string;\n /**\n * Default language to display. If not found in available languages, first available is used.\n * If found in languages but no matching snippet exists, a message is displayed.\n */\n lang?: string;\n /**\n * Callback fired when the active language changes\n */\n onChange?: (language: string, sdk?: SDKType) => void;\n /**\n * List of API keys to display in a dropdown\n */\n apiKeys?: ApiKeysItem[];\n /**\n * Default SDK type to use for the code snippet\n */\n sdk?: SDKType;\n /**\n * Whether to show line numbers in code snippets\n */\n showCodeLines?: boolean;\n /**\n * Defines the order in which languages should be displayed.\n * Languages not in this array will be shown after those that are included.\n */\n languageOrdering?: string[];\n};\n"],"names":[],"mappings":"AAMA,QA+CE"}
package/core/CodeSnippet.js CHANGED
@@ -1,2 +1,2 @@
1
- import React,{useState,useEffect,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import{getLanguageInfo}from"./CodeSnippet/languages";import Icon from"./Icon";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector,{getApiKeyValue}from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey)=>{return content.replace(/\{\{API_KEY\}\}/g,apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{childrenArray,languages,sdkTypes,originalLangMap,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;const langName=extractLanguageFromCode(codeElement);if(!langName)return;if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSinglePlainCommand}},[children,extractLanguageFromCode]);const[activeSDKType,setActiveSDKType]=useState(()=>{if(sdkTypes.size===0)return null;if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null});const[activeLanguage,setActiveLanguage]=useState(null);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys&&apiKeys.length>0?getApiKeyValue(apiKeys[0]):"");const[isHovering,setIsHovering]=useState(false);const showSDKSelector=sdkTypes.size>0;const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const filteredLanguages=useMemo(()=>{const filtered=!activeSDKType||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${activeSDKType}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=originalLangMap.get(a)||a;const bBase=originalLangMap.get(b)||b;const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[activeSDKType,showSDKSelector,languages,languageOrdering,originalLangMap]);const initialActiveLanguage=useMemo(()=>{if(!lang){return filteredLanguages.length>0?filteredLanguages[0]:null}if(activeSDKType){const prefixedLang=`${activeSDKType}_${lang}`;if(languages.includes(prefixedLang)){return prefixedLang}}if(languages.includes(lang)){return lang}if(getLanguageInfo(lang).label!==lang){return lang}return filteredLanguages.length>0?filteredLanguages[0]:null},[lang,activeSDKType,languages,filteredLanguages]);useEffect(()=>{setActiveLanguage(initialActiveLanguage)},[initialActiveLanguage]);useEffect(()=>{if(apiKeys&&apiKeys.length>0){const availableKeys=apiKeys.map(getApiKeyValue);if(!availableKeys.includes(selectedApiKey)){setSelectedApiKey(getApiKeyValue(apiKeys[0]))}}},[apiKeys,selectedApiKey]);const getCleanLanguage=useCallback(lang=>lang?originalLangMap.get(lang)||lang:null,[originalLangMap]);const getLanguageInfoForDisplay=useCallback(lang=>{if(!lang)return null;const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang):null},[getCleanLanguage]);const getLanguageDisplayName=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).label:lang},[getCleanLanguage]);const getLanguageIcon=useCallback(lang=>{const cleanLang=getCleanLanguage(lang);return cleanLang?getLanguageInfo(cleanLang).icon:"icon-gui-document-mini"},[getCleanLanguage]);const activeLanguageInfo=useMemo(()=>getLanguageInfoForDisplay(activeLanguage),[getLanguageInfoForDisplay,activeLanguage]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const langName=extractLanguageFromCode(codeElement);if(!langName)return child;const cleanLang=hasOnlyJsonSnippet?"json":getCleanLanguage(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){let processedContent=String(codeContent);if(apiKeys&&apiKeys.length>0&&selectedApiKey){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return child})},[activeLanguage,childrenArray,extractLanguageFromCode,getCleanLanguage,hasOnlyJsonSnippet,showCodeLines,apiKeys,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===activeLanguage})},[activeLanguage,childrenArray,extractLanguageFromCode,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===activeLanguage){return codeElement.textContent||""}}return null},[activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setActiveSDKType(type);setActiveLanguage(nextLang)},[languages]);const handleLanguageChange=useCallback(language=>{setActiveLanguage(language);if(onChange){const cleanLang=getCleanLanguage(language)||language;onChange(cleanLang,activeSDKType)}},[onChange,getCleanLanguage,activeSDKType]);const handleApiKeyChange=useCallback(apiKey=>{setSelectedApiKey(apiKey)},[]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguageInfo)return()=>null;return()=>React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguageInfo]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguageInfo){return React.createElement(NoSnippetMessage,null)}return null},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,activeLanguageInfo,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=childrenArray[0];if(isValidElement(plainChild)&&isValidElement(plainChild.props.children)){const codeElement=plainChild.props.children;const codeContent=codeElement.props.children;const language=extractLanguageFromCode(codeElement);if(!language||!codeContent)return null;let processedContent=String(codeContent);if(apiKeys&&apiKeys.length>0&&selectedApiKey){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange,getLanguageDisplayName:getLanguageDisplayName,getLanguageIcon:getLanguageIcon,activeLanguageInfo:activeLanguageInfo}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3",{"rounded-t-lg":!headerRow},{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageIcon(filteredLanguages[0]),size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageDisplayName(filteredLanguages[0]))))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
1
+ import React,{useState,Children,isValidElement,useRef,useCallback,useMemo}from"react";import Code from"./Code";import cn from"./utils/cn";import Icon from"./Icon";import{getLanguageInfo}from"./CodeSnippet/languages";import LanguageSelector from"./CodeSnippet/LanguageSelector";import ApiKeySelector from"./CodeSnippet/ApiKeySelector";import useCopyToClipboard from"./utils/useCopyToClipboard";import PlainCodeView from"./CodeSnippet/PlainCodeView";import CopyButton from"./CodeSnippet/CopyButton";import TooltipButton from"./CodeSnippet/TooltipButton";const substituteApiKey=(content,apiKey)=>{return content.replace(/\{\{API_KEY\}\}/g,apiKey)};const CodeSnippet=({fixed=false,headerRow=false,title="Code",children,className,lang,onChange,apiKeys,sdk,showCodeLines=true,languageOrdering})=>{const codeRef=useRef(null);const{isCopied,copy}=useCopyToClipboard();const extractLanguageFromCode=useCallback(codeElement=>{if(!codeElement||!codeElement.props.className)return null;const classNames=codeElement.props.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)return null;return langClass.substring(9)},[]);const{childrenArray,languages,sdkTypes,originalLangMap,isSinglePlainCommand}=useMemo(()=>{const childrenArray=Children.toArray(children);const languages=[];const sdkTypes=new Set;const originalLangMap=new Map;const isSinglePlainCommand=childrenArray.length===1&&["language-shell","language-text"].some(lang=>isValidElement(childrenArray[0])&&isValidElement(childrenArray[0].props.children)&&childrenArray[0].props.children.props.className?.includes(lang));childrenArray.forEach(child=>{if(!isValidElement(child))return;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;const langName=extractLanguageFromCode(codeElement);if(!langName)return;if(langName.startsWith("realtime_")){const baseLanguage=langName.substring(9);sdkTypes.add("realtime");originalLangMap.set(langName,baseLanguage)}else if(langName.startsWith("rest_")){const baseLanguage=langName.substring(5);sdkTypes.add("rest");originalLangMap.set(langName,baseLanguage)}else{originalLangMap.set(langName,langName)}if(!languages.includes(langName)){languages.push(langName)}});return{childrenArray,languages,sdkTypes,originalLangMap,isSinglePlainCommand}},[children,extractLanguageFromCode]);const[activeSDKType,setActiveSDKType]=useState(()=>{if(sdkTypes.size===0)return null;if(sdk&&sdkTypes.has(sdk))return sdk;if(sdkTypes.has("realtime"))return"realtime";if(sdkTypes.has("rest"))return"rest";return null});const showSDKSelector=sdkTypes.size>0;const filteredLanguages=useMemo(()=>{const filtered=!activeSDKType||!showSDKSelector?[...languages]:languages.filter(lang=>lang.startsWith(`${activeSDKType}_`));if(languageOrdering&&languageOrdering.length>0){filtered.sort((a,b)=>{const aBase=originalLangMap.get(a)||a;const bBase=originalLangMap.get(b)||b;const aIndex=languageOrdering.indexOf(aBase);const bIndex=languageOrdering.indexOf(bBase);if(aIndex!==-1&&bIndex!==-1)return aIndex-bIndex;if(aIndex!==-1)return-1;if(bIndex!==-1)return 1;return 0})}return filtered},[activeSDKType,showSDKSelector,languages,languageOrdering,originalLangMap]);const activeLanguage=useMemo(()=>{if(lang)return lang;if(filteredLanguages.length>0)return filteredLanguages[0];return null},[lang,filteredLanguages]);const[selectedApiKey,setSelectedApiKey]=useState(()=>apiKeys?.[0]?.keys?.[0]??"");const[isHovering,setIsHovering]=useState(false);const hasOnlyJsonSnippet=useMemo(()=>languages.length===1&&languages[0]==="json",[languages]);const getCleanLanguage=useCallback(lang=>lang?originalLangMap.get(lang)||lang:null,[originalLangMap]);const processedChildren=useMemo(()=>{if(!activeLanguage)return[];const targetLanguage=hasOnlyJsonSnippet?"json":activeLanguage;return childrenArray.filter(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===targetLanguage}).map(child=>{if(!isValidElement(child))return child;const preElement=child;const codeElement=isValidElement(preElement.props.children)?preElement.props.children:null;if(!codeElement)return child;const codeContent=codeElement.props.children;const langName=extractLanguageFromCode(codeElement);if(!langName)return child;const cleanLang=hasOnlyJsonSnippet?"json":getCleanLanguage(langName)||langName;const langInfo=getLanguageInfo(cleanLang);if(typeof codeContent==="string"||typeof codeContent==="number"||typeof codeContent==="boolean"){let processedContent=String(codeContent);if(apiKeys&&apiKeys.length>0&&selectedApiKey){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(Code,{key:langName,language:langInfo.syntaxHighlighterKey||cleanLang,snippet:processedContent,additionalCSS:"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4",showLines:showCodeLines})}return child})},[activeLanguage,childrenArray,extractLanguageFromCode,getCleanLanguage,hasOnlyJsonSnippet,showCodeLines,apiKeys,selectedApiKey]);const hasSnippetForActiveLanguage=useMemo(()=>{if(!activeLanguage)return false;if(hasOnlyJsonSnippet)return true;return childrenArray.some(child=>{if(!isValidElement(child))return false;const codeElement=isValidElement(child.props.children)?child.props.children:null;const langName=extractLanguageFromCode(codeElement);return langName===activeLanguage})},[activeLanguage,childrenArray,extractLanguageFromCode,hasOnlyJsonSnippet]);const getCodeText=useCallback(()=>{if(!activeLanguage||!hasSnippetForActiveLanguage||!codeRef.current)return null;const allPreElements=codeRef.current.querySelectorAll("pre");for(const preElement of Array.from(allPreElements)){const codeElement=preElement.querySelector("code");if(!codeElement||!codeElement.className)continue;const classNames=codeElement.className.split(" ");const langClass=classNames.find(cls=>cls.startsWith("language-"));if(!langClass)continue;const langName=langClass.substring(9);if(hasOnlyJsonSnippet&&langName==="json"||!hasOnlyJsonSnippet&&langName===activeLanguage){return codeElement.textContent||""}}return null},[activeLanguage,hasSnippetForActiveLanguage,hasOnlyJsonSnippet]);const handleSDKTypeChange=useCallback(type=>{const nextLang=languages.find(l=>l.startsWith(`${type}_`))??null;setActiveSDKType(type);if(onChange&&nextLang){const cleanLang=getCleanLanguage(nextLang)||nextLang;onChange(cleanLang,type)}},[languages]);const handleLanguageChange=useCallback(language=>{if(onChange){const cleanLang=getCleanLanguage(language)||language;onChange(cleanLang,activeSDKType)}},[onChange,getCleanLanguage,activeSDKType]);const handleApiKeyChange=useCallback(apiKey=>{setSelectedApiKey(apiKey)},[]);const NoSnippetMessage=useMemo(()=>{if(!activeLanguage)return()=>null;const activeLanguageInfo=getLanguageInfo(activeLanguage);return()=>React.createElement("div",{className:"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center"},React.createElement(Icon,{name:"icon-gui-exclamation-triangle-outline",color:"text-yellow-600 dark:text-yellow-400",size:"24px"}),React.createElement("p",{className:"ui-text-p3 text-neutral-700 dark:text-neutral-600"},"You're currently viewing the ",activeLanguageInfo.label," docs. There either isn't a ",activeLanguageInfo.label," code sample for this example, or this feature isn't supported in"," ",activeLanguageInfo.label,". Switch language to view this example in a different language, or check which SDKs support this feature."))},[activeLanguage]);const showLanguageSelector=!fixed&&filteredLanguages.length>0;const showFullSelector=filteredLanguages.length>1;console.log("testo",activeLanguage,filteredLanguages);const renderContent=useMemo(()=>{if(!activeLanguage)return null;if(hasSnippetForActiveLanguage){return processedChildren}if(activeLanguage){return React.createElement(NoSnippetMessage,null)}return null},[activeLanguage,hasSnippetForActiveLanguage,processedChildren,NoSnippetMessage]);if(isSinglePlainCommand){const plainChild=childrenArray[0];if(isValidElement(plainChild)&&isValidElement(plainChild.props.children)){const codeElement=plainChild.props.children;const codeContent=codeElement.props.children;const language=extractLanguageFromCode(codeElement);if(!language||!codeContent)return null;let processedContent=String(codeContent);if(apiKeys&&apiKeys.length>0&&selectedApiKey){processedContent=substituteApiKey(processedContent,selectedApiKey)}return React.createElement(PlainCodeView,{content:processedContent,className:className,language:language,icon:language==="shell"?"icon-gui-command-line-outline":null})}}return React.createElement("div",{className:cn("rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]",className)},headerRow&&React.createElement("div",{className:"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg"},React.createElement("div",{className:"flex space-x-1.5"},React.createElement("div",{className:"w-3 h-3 rounded-full bg-orange-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-yellow-500"}),React.createElement("div",{className:"w-3 h-3 rounded-full bg-green-500"})),React.createElement("div",{className:"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000"},title),React.createElement("div",{className:"w-12"})),showSDKSelector&&React.createElement("div",{className:cn("p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14",headerRow?"":"rounded-t-lg")},React.createElement("div",{className:"flex gap-3 justify-start"},sdkTypes.has("realtime")&&React.createElement(TooltipButton,{tooltip:"Realtime SDK",active:activeSDKType==="realtime",onClick:()=>handleSDKTypeChange("realtime"),variant:"segmented",size:"sm",alwaysShowLabel:true},"Realtime"),sdkTypes.has("rest")&&React.createElement(TooltipButton,{tooltip:"REST SDK",active:activeSDKType==="rest",onClick:()=>handleSDKTypeChange("rest"),variant:"segmented",size:"sm",alwaysShowLabel:true},"REST"))),showLanguageSelector&&(showFullSelector?React.createElement(LanguageSelector,{languages:filteredLanguages,activeLanguage:activeLanguage,onLanguageChange:handleLanguageChange}):React.createElement("div",{className:cn("border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3",{"rounded-t-lg":!headerRow},{"cursor-pointer":filteredLanguages.length>0}),...filteredLanguages.length>0&&{onClick:()=>handleLanguageChange(filteredLanguages[0])}},filteredLanguages.length>0&&React.createElement(React.Fragment,null,React.createElement(Icon,{name:getLanguageInfo(filteredLanguages[0]).icon,size:"16px",additionalCSS:"mr-2"}),React.createElement("span",{className:"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none"},getLanguageInfo(filteredLanguages[0]).label)))),React.createElement("div",{ref:codeRef,className:"relative",onMouseEnter:()=>setIsHovering(true),onMouseLeave:()=>setIsHovering(false),onFocus:()=>setIsHovering(true),onBlur:()=>setIsHovering(false),tabIndex:0},renderContent,isHovering&&activeLanguage&&hasSnippetForActiveLanguage&&React.createElement(CopyButton,{onCopy:()=>{const text=getCodeText();if(text)copy(text)},isCopied:isCopied})),apiKeys&&React.createElement(ApiKeySelector,{apiKeys:apiKeys,selectedApiKey:selectedApiKey,onApiKeyChange:handleApiKeyChange}))};export default CodeSnippet;
2
2
  //# sourceMappingURL=CodeSnippet.js.map
package/core/CodeSnippet.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n useEffect,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport Icon from \"./Icon\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector, { getApiKeyValue } from \"./CodeSnippet/ApiKeySelector\";\nimport { IconName } from \"./Icon/types\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\nimport type { CodeSnippetProps, SDKType } from \"./CodeSnippet/types\";\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (content: string, apiKey: string): string => {\n return content.replace(/\\{\\{API_KEY\\}\\}/g, apiKey);\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n sdk,\n showCodeLines = true,\n languageOrdering,\n}) => {\n const codeRef = useRef<HTMLDivElement>(null);\n const { isCopied, copy } = useCopyToClipboard();\n\n // Helper function to extract language from code element\n const extractLanguageFromCode = useCallback(\n (codeElement: React.ReactElement | null): string | null => {\n if (!codeElement || !codeElement.props.className) return null;\n\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return null;\n\n return langClass.substring(9); // Remove \"language-\" prefix\n },\n [],\n );\n\n // Parse children to extract languages and SDK types - only needs to run once\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSinglePlainCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single plain code command (shell or text)\n const isSinglePlainCommand =\n childrenArray.length === 1 &&\n [\"language-shell\", \"language-text\"].some(\n (lang) =>\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(lang),\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return;\n\n // Look for SDK prefixes in the language name itself\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n originalLangMap.set(langName, baseLanguage);\n } else {\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSinglePlainCommand,\n };\n }, [children, extractLanguageFromCode]);\n\n // Simplified state management with separate hooks\n const [activeSDKType, setActiveSDKType] = useState<SDKType>(() => {\n if (sdkTypes.size === 0) return null;\n if (sdk && sdkTypes.has(sdk)) return sdk;\n if (sdkTypes.has(\"realtime\")) return \"realtime\";\n if (sdkTypes.has(\"rest\")) return \"rest\";\n return null;\n });\n const [activeLanguage, setActiveLanguage] = useState<string | null>(null);\n const [selectedApiKey, setSelectedApiKey] = useState(() =>\n apiKeys && apiKeys.length > 0 ? getApiKeyValue(apiKeys[0]) : \"\",\n );\n const [isHovering, setIsHovering] = useState(false);\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(\n () => languages.length === 1 && languages[0] === \"json\",\n [languages],\n );\n\n // Get languages filtered by active SDK type & apply ordering\n const filteredLanguages = useMemo(() => {\n // Filter by SDK type if needed\n const filtered =\n !activeSDKType || !showSDKSelector\n ? [...languages]\n : languages.filter((lang) => lang.startsWith(`${activeSDKType}_`));\n\n // Apply custom ordering if provided\n if (languageOrdering && languageOrdering.length > 0) {\n filtered.sort((a, b) => {\n const aBase = originalLangMap.get(a) || a;\n const bBase = originalLangMap.get(b) || b;\n\n const aIndex = languageOrdering.indexOf(aBase);\n const bIndex = languageOrdering.indexOf(bBase);\n\n if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n if (aIndex !== -1) return -1;\n if (bIndex !== -1) return 1;\n return 0;\n });\n }\n\n return filtered;\n }, [\n activeSDKType,\n showSDKSelector,\n languages,\n languageOrdering,\n originalLangMap,\n ]);\n\n // Determine the initial active language\n const initialActiveLanguage = useMemo((): string | null => {\n if (!lang) {\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }\n\n // Try with SDK prefix if applicable\n if (activeSDKType) {\n const prefixedLang = `${activeSDKType}_${lang}`;\n if (languages.includes(prefixedLang)) {\n return prefixedLang;\n }\n }\n\n // Try direct match\n if (languages.includes(lang)) {\n return lang;\n }\n\n // Check if it's a known language but not available\n if (getLanguageInfo(lang).label !== lang) {\n return lang;\n }\n\n // Fallback to first available\n return filteredLanguages.length > 0 ? filteredLanguages[0] : null;\n }, [lang, activeSDKType, languages, filteredLanguages]);\n\n // Initialize activeLanguage after filteredLanguages are calculated\n useEffect(() => {\n setActiveLanguage(initialActiveLanguage);\n }, [initialActiveLanguage]);\n\n // Update selected API key if apiKeys changes\n useEffect(() => {\n if (apiKeys && apiKeys.length > 0) {\n const availableKeys = apiKeys.map(getApiKeyValue);\n if (!availableKeys.includes(selectedApiKey)) {\n setSelectedApiKey(getApiKeyValue(apiKeys[0]));\n }\n }\n }, [apiKeys, selectedApiKey]);\n\n // Clean language utilities\n const getCleanLanguage = useCallback(\n (lang: string | null) => (lang ? originalLangMap.get(lang) || lang : null),\n [originalLangMap],\n );\n\n // Get language info for display\n const getLanguageInfoForDisplay = useCallback(\n (lang: string | null) => {\n if (!lang) return null;\n const cleanLang = getCleanLanguage(lang);\n return cleanLang ? getLanguageInfo(cleanLang) : null;\n },\n [getCleanLanguage],\n );\n\n // For language display name and icon (only depends on originalLangMap)\n const getLanguageDisplayName = useCallback(\n (lang: string) => {\n const cleanLang = getCleanLanguage(lang);\n return cleanLang ? getLanguageInfo(cleanLang).label : lang;\n },\n [getCleanLanguage],\n );\n\n const getLanguageIcon = useCallback(\n (lang: string): IconName => {\n const cleanLang = getCleanLanguage(lang);\n return cleanLang\n ? getLanguageInfo(cleanLang).icon\n : \"icon-gui-document-mini\";\n },\n [getCleanLanguage],\n );\n\n // Memoize the active language info\n const activeLanguageInfo = useMemo(\n () => getLanguageInfoForDisplay(activeLanguage),\n [getLanguageInfoForDisplay, activeLanguage],\n );\n\n // Filter and process children for the active language\n const processedChildren = useMemo(() => {\n if (!activeLanguage) return [];\n\n // Target language is either the active one or json in json-only mode\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return child;\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : getCleanLanguage(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // Handle primitive content types\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(codeContent);\n if (apiKeys && apiKeys.length > 0 && selectedApiKey) {\n processedContent = substituteApiKey(\n processedContent,\n selectedApiKey,\n );\n }\n\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={processedContent}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n showLines={showCodeLines}\n />\n );\n }\n\n return child;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n getCleanLanguage,\n hasOnlyJsonSnippet,\n showCodeLines,\n apiKeys,\n selectedApiKey,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!activeLanguage) return false;\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === activeLanguage;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n hasOnlyJsonSnippet,\n ]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (!activeLanguage || !hasSnippetForActiveLanguage || !codeRef.current)\n return null;\n\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n const langName = langClass.substring(9);\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Event handlers\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick first language matching the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n setActiveSDKType(type);\n setActiveLanguage(nextLang);\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n setActiveLanguage(language);\n\n // Call onChange with clean language name\n if (onChange) {\n const cleanLang = getCleanLanguage(language) || language;\n onChange(cleanLang, activeSDKType);\n }\n },\n [onChange, getCleanLanguage, activeSDKType],\n );\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setSelectedApiKey(apiKey);\n }, []);\n\n // Optimize no-snippet message as a component\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguageInfo) return () => null;\n\n return () => (\n <div className=\"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguageInfo]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n const showFullSelector = filteredLanguages.length > 1;\n\n // Memoize renderContent\n const renderContent = useMemo(() => {\n if (!activeLanguage) return null;\n\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n if (activeLanguageInfo) {\n return <NoSnippetMessage />;\n }\n\n return null;\n }, [\n activeLanguage,\n hasSnippetForActiveLanguage,\n processedChildren,\n activeLanguageInfo,\n NoSnippetMessage,\n ]);\n\n // Render special case for plain commands (shell or text)\n if (isSinglePlainCommand) {\n const plainChild = childrenArray[0];\n if (\n isValidElement(plainChild) &&\n isValidElement(plainChild.props.children)\n ) {\n const codeElement = plainChild.props.children;\n const codeContent = codeElement.props.children;\n const language = extractLanguageFromCode(codeElement);\n\n if (!language || !codeContent) return null;\n\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(codeContent);\n if (apiKeys && apiKeys.length > 0 && selectedApiKey) {\n processedContent = substituteApiKey(processedContent, selectedApiKey);\n }\n\n return (\n <PlainCodeView\n content={processedContent}\n className={className}\n language={language}\n icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg\">\n {/* macOS window buttons */}\n <div className=\"flex space-x-1.5\">\n <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n </div>\n\n {/* Title */}\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-12\"></div>\n </div>\n )}\n\n {/* SDK Type Selector Row */}\n {showSDKSelector && (\n <div\n className={cn(\n \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-3 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {/* Language Selector Row */}\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={activeLanguage}\n onLanguageChange={handleLanguageChange}\n getLanguageDisplayName={getLanguageDisplayName}\n getLanguageIcon={getLanguageIcon}\n activeLanguageInfo={activeLanguageInfo}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3\",\n { \"rounded-t-lg\": !headerRow },\n { \"cursor-pointer\": filteredLanguages.length > 0 },\n )}\n {...(filteredLanguages.length > 0 && {\n onClick: () => handleLanguageChange(filteredLanguages[0]),\n })}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageIcon(filteredLanguages[0])}\n size=\"16px\"\n additionalCSS=\"mr-2\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n {getLanguageDisplayName(filteredLanguages[0])}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n >\n {renderContent}\n\n {/* Copy button - simplified conditional */}\n {isHovering && activeLanguage && hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {/* API Key Selector */}\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","useEffect","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","getLanguageInfo","Icon","LanguageSelector","ApiKeySelector","getApiKeyValue","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","replace","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","extractLanguageFromCode","codeElement","props","classNames","split","langClass","find","cls","startsWith","substring","childrenArray","languages","sdkTypes","originalLangMap","isSinglePlainCommand","toArray","Set","Map","length","some","includes","forEach","child","preElement","langName","baseLanguage","add","set","push","activeSDKType","setActiveSDKType","size","has","activeLanguage","setActiveLanguage","selectedApiKey","setSelectedApiKey","isHovering","setIsHovering","showSDKSelector","hasOnlyJsonSnippet","filteredLanguages","filtered","filter","sort","a","b","aBase","get","bBase","aIndex","indexOf","bIndex","initialActiveLanguage","prefixedLang","label","availableKeys","map","getCleanLanguage","getLanguageInfoForDisplay","cleanLang","getLanguageDisplayName","getLanguageIcon","icon","activeLanguageInfo","processedChildren","targetLanguage","codeContent","langInfo","processedContent","String","key","language","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleApiKeyChange","NoSnippetMessage","div","name","color","p","showLanguageSelector","showFullSelector","renderContent","plainChild","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"AAAA,OAAOA,OACLC,QAAQ,CACRC,SAAS,CACTC,QAAQ,CACRC,cAAc,CACdC,MAAM,CACNC,WAAW,CACXC,OAAO,KACF,OAAQ,AACf,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAASC,eAAe,KAAQ,yBAA0B,AAC1D,QAAOC,SAAU,QAAS,AAC1B,QAAOC,qBAAsB,gCAAiC,AAC9D,QAAOC,gBAAkBC,cAAc,KAAQ,8BAA+B,AAE9E,QAAOC,uBAAwB,4BAA6B,AAC5D,QAAOC,kBAAmB,6BAA8B,AACxD,QAAOC,eAAgB,0BAA2B,AAClD,QAAOC,kBAAmB,6BAA8B,CAIxD,MAAMC,iBAAmB,CAACC,QAAiBC,UACzC,OAAOD,QAAQE,OAAO,CAAC,mBAAoBD,OAC7C,EAKA,MAAME,YAA0C,CAAC,CAC/CC,MAAQ,KAAK,CACbC,UAAY,KAAK,CACjBC,MAAQ,MAAM,CACdC,QAAQ,CACRC,SAAS,CACTC,IAAI,CACJC,QAAQ,CACRC,OAAO,CACPC,GAAG,CACHC,cAAgB,IAAI,CACpBC,gBAAgB,CACjB,IACC,MAAMC,QAAU9B,OAAuB,MACvC,KAAM,CAAE+B,QAAQ,CAAEC,IAAI,CAAE,CAAGtB,qBAG3B,MAAMuB,wBAA0BhC,YAC9B,AAACiC,cACC,GAAI,CAACA,aAAe,CAACA,YAAYC,KAAK,CAACZ,SAAS,CAAE,OAAO,KAEzD,MAAMa,WAAaF,YAAYC,KAAK,CAACZ,SAAS,CAACc,KAAK,CAAC,KACrD,MAAMC,UAAYF,WAAWG,IAAI,CAAC,AAACC,KACjCA,IAAIC,UAAU,CAAC,cAEjB,GAAI,CAACH,UAAW,OAAO,KAEvB,OAAOA,UAAUI,SAAS,CAAC,EAC7B,EACA,EAAE,EAIJ,KAAM,CACJC,aAAa,CACbC,SAAS,CACTC,QAAQ,CACRC,eAAe,CACfC,oBAAoB,CACrB,CAAG7C,QAAQ,KACV,MAAMyC,cAAgB7C,SAASkD,OAAO,CAAC1B,UACvC,MAAMsB,UAAsB,EAAE,CAC9B,MAAMC,SAAW,IAAII,IACrB,MAAMH,gBAAkB,IAAII,IAG5B,MAAMH,qBACJJ,cAAcQ,MAAM,GAAK,GACzB,CAAC,iBAAkB,gBAAgB,CAACC,IAAI,CACtC,AAAC5B,MACCzB,eAAe4C,aAAa,CAAC,EAAE,GAC/B5C,eAAe4C,aAAa,CAAC,EAAE,CAACR,KAAK,CAACb,QAAQ,GAC9CqB,aAAa,CAAC,EAAE,CAACR,KAAK,CAACb,QAAQ,CAACa,KAAK,CAACZ,SAAS,EAAE8B,SAAS7B,OAIhEmB,cAAcW,OAAO,CAAC,AAACC,QACrB,GAAI,CAACxD,eAAewD,OAAQ,OAE5B,MAAMC,WAAaD,MACnB,MAAMrB,YAAcnC,eAAeyD,WAAWrB,KAAK,CAACb,QAAQ,EACxDkC,WAAWrB,KAAK,CAACb,QAAQ,CACzB,KAEJ,MAAMmC,SAAWxB,wBAAwBC,aACzC,GAAI,CAACuB,SAAU,OAGf,GAAIA,SAAShB,UAAU,CAAC,aAAc,CACpC,MAAMiB,aAAeD,SAASf,SAAS,CAAC,GACxCG,SAASc,GAAG,CAAC,YACbb,gBAAgBc,GAAG,CAACH,SAAUC,aAChC,MAAO,GAAID,SAAShB,UAAU,CAAC,SAAU,CACvC,MAAMiB,aAAeD,SAASf,SAAS,CAAC,GACxCG,SAASc,GAAG,CAAC,QACbb,gBAAgBc,GAAG,CAACH,SAAUC,aAChC,KAAO,CACLZ,gBAAgBc,GAAG,CAACH,SAAUA,SAChC,CAGA,GAAI,CAACb,UAAUS,QAAQ,CAACI,UAAW,CACjCb,UAAUiB,IAAI,CAACJ,SACjB,CACF,GAEA,MAAO,CACLd,cACAC,UACAC,SACAC,gBACAC,oBACF,CACF,EAAG,CAACzB,SAAUW,wBAAwB,EAGtC,KAAM,CAAC6B,cAAeC,iBAAiB,CAAGnE,SAAkB,KAC1D,GAAIiD,SAASmB,IAAI,GAAK,EAAG,OAAO,KAChC,GAAIrC,KAAOkB,SAASoB,GAAG,CAACtC,KAAM,OAAOA,IACrC,GAAIkB,SAASoB,GAAG,CAAC,YAAa,MAAO,WACrC,GAAIpB,SAASoB,GAAG,CAAC,QAAS,MAAO,OACjC,OAAO,IACT,GACA,KAAM,CAACC,eAAgBC,kBAAkB,CAAGvE,SAAwB,MACpE,KAAM,CAACwE,eAAgBC,kBAAkB,CAAGzE,SAAS,IACnD8B,SAAWA,QAAQyB,MAAM,CAAG,EAAI1C,eAAeiB,OAAO,CAAC,EAAE,EAAI,IAE/D,KAAM,CAAC4C,WAAYC,cAAc,CAAG3E,SAAS,OAG7C,MAAM4E,gBAAkB3B,SAASmB,IAAI,CAAG,EAGxC,MAAMS,mBAAqBvE,QACzB,IAAM0C,UAAUO,MAAM,GAAK,GAAKP,SAAS,CAAC,EAAE,GAAK,OACjD,CAACA,UAAU,EAIb,MAAM8B,kBAAoBxE,QAAQ,KAEhC,MAAMyE,SACJ,CAACb,eAAiB,CAACU,gBACf,IAAI5B,UAAU,CACdA,UAAUgC,MAAM,CAAC,AAACpD,MAASA,KAAKiB,UAAU,CAAC,CAAC,EAAEqB,cAAc,CAAC,CAAC,GAGpE,GAAIjC,kBAAoBA,iBAAiBsB,MAAM,CAAG,EAAG,CACnDwB,SAASE,IAAI,CAAC,CAACC,EAAGC,KAChB,MAAMC,MAAQlC,gBAAgBmC,GAAG,CAACH,IAAMA,EACxC,MAAMI,MAAQpC,gBAAgBmC,GAAG,CAACF,IAAMA,EAExC,MAAMI,OAAStD,iBAAiBuD,OAAO,CAACJ,OACxC,MAAMK,OAASxD,iBAAiBuD,OAAO,CAACF,OAExC,GAAIC,SAAW,CAAC,GAAKE,SAAW,CAAC,EAAG,OAAOF,OAASE,OACpD,GAAIF,SAAW,CAAC,EAAG,MAAO,CAAC,EAC3B,GAAIE,SAAW,CAAC,EAAG,OAAO,EAC1B,OAAO,CACT,EACF,CAEA,OAAOV,QACT,EAAG,CACDb,cACAU,gBACA5B,UACAf,iBACAiB,gBACD,EAGD,MAAMwC,sBAAwBpF,QAAQ,KACpC,GAAI,CAACsB,KAAM,CACT,OAAOkD,kBAAkBvB,MAAM,CAAG,EAAIuB,iBAAiB,CAAC,EAAE,CAAG,IAC/D,CAGA,GAAIZ,cAAe,CACjB,MAAMyB,aAAe,CAAC,EAAEzB,cAAc,CAAC,EAAEtC,KAAK,CAAC,CAC/C,GAAIoB,UAAUS,QAAQ,CAACkC,cAAe,CACpC,OAAOA,YACT,CACF,CAGA,GAAI3C,UAAUS,QAAQ,CAAC7B,MAAO,CAC5B,OAAOA,IACT,CAGA,GAAInB,gBAAgBmB,MAAMgE,KAAK,GAAKhE,KAAM,CACxC,OAAOA,IACT,CAGA,OAAOkD,kBAAkBvB,MAAM,CAAG,EAAIuB,iBAAiB,CAAC,EAAE,CAAG,IAC/D,EAAG,CAAClD,KAAMsC,cAAelB,UAAW8B,kBAAkB,EAGtD7E,UAAU,KACRsE,kBAAkBmB,sBACpB,EAAG,CAACA,sBAAsB,EAG1BzF,UAAU,KACR,GAAI6B,SAAWA,QAAQyB,MAAM,CAAG,EAAG,CACjC,MAAMsC,cAAgB/D,QAAQgE,GAAG,CAACjF,gBAClC,GAAI,CAACgF,cAAcpC,QAAQ,CAACe,gBAAiB,CAC3CC,kBAAkB5D,eAAeiB,OAAO,CAAC,EAAE,EAC7C,CACF,CACF,EAAG,CAACA,QAAS0C,eAAe,EAG5B,MAAMuB,iBAAmB1F,YACvB,AAACuB,MAAyBA,KAAOsB,gBAAgBmC,GAAG,CAACzD,OAASA,KAAO,KACrE,CAACsB,gBAAgB,EAInB,MAAM8C,0BAA4B3F,YAChC,AAACuB,OACC,GAAI,CAACA,KAAM,OAAO,KAClB,MAAMqE,UAAYF,iBAAiBnE,MACnC,OAAOqE,UAAYxF,gBAAgBwF,WAAa,IAClD,EACA,CAACF,iBAAiB,EAIpB,MAAMG,uBAAyB7F,YAC7B,AAACuB,OACC,MAAMqE,UAAYF,iBAAiBnE,MACnC,OAAOqE,UAAYxF,gBAAgBwF,WAAWL,KAAK,CAAGhE,IACxD,EACA,CAACmE,iBAAiB,EAGpB,MAAMI,gBAAkB9F,YACtB,AAACuB,OACC,MAAMqE,UAAYF,iBAAiBnE,MACnC,OAAOqE,UACHxF,gBAAgBwF,WAAWG,IAAI,CAC/B,wBACN,EACA,CAACL,iBAAiB,EAIpB,MAAMM,mBAAqB/F,QACzB,IAAM0F,0BAA0B1B,gBAChC,CAAC0B,0BAA2B1B,eAAe,EAI7C,MAAMgC,kBAAoBhG,QAAQ,KAChC,GAAI,CAACgE,eAAgB,MAAO,EAAE,CAG9B,MAAMiC,eAAiB1B,mBAAqB,OAASP,eAErD,OAAOvB,cACJiC,MAAM,CAAC,AAACrB,QACP,GAAI,CAACxD,eAAewD,OAAQ,OAAO,MACnC,MAAMrB,YAAcnC,eAAewD,MAAMpB,KAAK,CAACb,QAAQ,EACnDiC,MAAMpB,KAAK,CAACb,QAAQ,CACpB,KACJ,MAAMmC,SAAWxB,wBAAwBC,aACzC,OAAOuB,WAAa0C,cACtB,GACCT,GAAG,CAAC,AAACnC,QACJ,GAAI,CAACxD,eAAewD,OAAQ,OAAOA,MAEnC,MAAMC,WAAaD,MACnB,MAAMrB,YAAcnC,eAAeyD,WAAWrB,KAAK,CAACb,QAAQ,EACxDkC,WAAWrB,KAAK,CAACb,QAAQ,CACzB,KACJ,GAAI,CAACY,YAAa,OAAOqB,MAEzB,MAAM6C,YAAclE,YAAYC,KAAK,CAACb,QAAQ,CAC9C,MAAMmC,SAAWxB,wBAAwBC,aACzC,GAAI,CAACuB,SAAU,OAAOF,MAEtB,MAAMsC,UAAYpB,mBACd,OACAkB,iBAAiBlC,WAAaA,SAClC,MAAM4C,SAAWhG,gBAAgBwF,WAGjC,GACE,OAAOO,cAAgB,UACvB,OAAOA,cAAgB,UACvB,OAAOA,cAAgB,UACvB,CAEA,IAAIE,iBAAmBC,OAAOH,aAC9B,GAAI1E,SAAWA,QAAQyB,MAAM,CAAG,GAAKiB,eAAgB,CACnDkC,iBAAmBxF,iBACjBwF,iBACAlC,eAEJ,CAEA,OACE,oBAACjE,MACCqG,IAAK/C,SACLgD,SAAUJ,SAASK,oBAAoB,EAAIb,UAC3Cc,QAASL,iBACTM,cAAc,wFACdC,UAAWjF,eAGjB,CAEA,OAAO2B,KACT,EACJ,EAAG,CACDW,eACAvB,cACAV,wBACA0D,iBACAlB,mBACA7C,cACAF,QACA0C,eACD,EAGD,MAAM0C,4BAA8B5G,QAAQ,KAC1C,GAAI,CAACgE,eAAgB,OAAO,MAC5B,GAAIO,mBAAoB,OAAO,KAE/B,OAAO9B,cAAcS,IAAI,CAAC,AAACG,QACzB,GAAI,CAACxD,eAAewD,OAAQ,OAAO,MACnC,MAAMrB,YAAcnC,eAAewD,MAAMpB,KAAK,CAACb,QAAQ,EACnDiC,MAAMpB,KAAK,CAACb,QAAQ,CACpB,KACJ,MAAMmC,SAAWxB,wBAAwBC,aACzC,OAAOuB,WAAaS,cACtB,EACF,EAAG,CACDA,eACAvB,cACAV,wBACAwC,mBACD,EAGD,MAAMsC,YAAc9G,YAAY,KAC9B,GAAI,CAACiE,gBAAkB,CAAC4C,6BAA+B,CAAChF,QAAQkF,OAAO,CACrE,OAAO,KAET,MAAMC,eAAiBnF,QAAQkF,OAAO,CAACE,gBAAgB,CAAC,OACxD,IAAK,MAAM1D,cAAc2D,MAAMC,IAAI,CAACH,gBAAiB,CACnD,MAAM/E,YAAcsB,WAAW6D,aAAa,CAAC,QAC7C,GAAI,CAACnF,aAAe,CAACA,YAAYX,SAAS,CAAE,SAE5C,MAAMa,WAAaF,YAAYX,SAAS,CAACc,KAAK,CAAC,KAC/C,MAAMC,UAAYF,WAAWG,IAAI,CAAC,AAACC,KAAQA,IAAIC,UAAU,CAAC,cAC1D,GAAI,CAACH,UAAW,SAEhB,MAAMmB,SAAWnB,UAAUI,SAAS,CAAC,GACrC,GACE,AAAC+B,oBAAsBhB,WAAa,QACnC,CAACgB,oBAAsBhB,WAAaS,eACrC,CACA,OAAOhC,YAAYoF,WAAW,EAAI,EACpC,CACF,CAEA,OAAO,IACT,EAAG,CAACpD,eAAgB4C,4BAA6BrC,mBAAmB,EAGpE,MAAM8C,oBAAsBtH,YAC1B,AAACuH,OAEC,MAAMC,SAAW7E,UAAUL,IAAI,CAAC,AAACmF,GAAMA,EAAEjF,UAAU,CAAC,CAAC,EAAE+E,KAAK,CAAC,CAAC,IAAM,KACpEzD,iBAAiByD,MACjBrD,kBAAkBsD,SACpB,EACA,CAAC7E,UAAU,EAGb,MAAM+E,qBAAuB1H,YAC3B,AAACwG,WACCtC,kBAAkBsC,UAGlB,GAAIhF,SAAU,CACZ,MAAMoE,UAAYF,iBAAiBc,WAAaA,SAChDhF,SAASoE,UAAW/B,cACtB,CACF,EACA,CAACrC,SAAUkE,iBAAkB7B,cAAc,EAG7C,MAAM8D,mBAAqB3H,YAAY,AAACe,SACtCqD,kBAAkBrD,OACpB,EAAG,EAAE,EAGL,MAAM6G,iBAAmB3H,QAAQ,KAC/B,GAAI,CAAC+F,mBAAoB,MAAO,IAAM,KAEtC,MAAO,IACL,oBAAC6B,OAAIvG,UAAU,gHACb,oBAACjB,MACCyH,KAAK,wCACLC,MAAM,uCACNhE,KAAK,SAEP,oBAACiE,KAAE1G,UAAU,qDAAoD,gCAC5B0E,mBAAmBT,KAAK,CAAC,+BACjCS,mBAAmBT,KAAK,CAAC,oEACE,IACrDS,mBAAmBT,KAAK,CAAC,6GAKlC,EAAG,CAACS,mBAAmB,EAGvB,MAAMiC,qBAAuB,CAAC/G,OAASuD,kBAAkBvB,MAAM,CAAG,EAClE,MAAMgF,iBAAmBzD,kBAAkBvB,MAAM,CAAG,EAGpD,MAAMiF,cAAgBlI,QAAQ,KAC5B,GAAI,CAACgE,eAAgB,OAAO,KAE5B,GAAI4C,4BAA6B,CAC/B,OAAOZ,iBACT,CAEA,GAAID,mBAAoB,CACtB,OAAO,oBAAC4B,sBACV,CAEA,OAAO,IACT,EAAG,CACD3D,eACA4C,4BACAZ,kBACAD,mBACA4B,iBACD,EAGD,GAAI9E,qBAAsB,CACxB,MAAMsF,WAAa1F,aAAa,CAAC,EAAE,CACnC,GACE5C,eAAesI,aACftI,eAAesI,WAAWlG,KAAK,CAACb,QAAQ,EACxC,CACA,MAAMY,YAAcmG,WAAWlG,KAAK,CAACb,QAAQ,CAC7C,MAAM8E,YAAclE,YAAYC,KAAK,CAACb,QAAQ,CAC9C,MAAMmF,SAAWxE,wBAAwBC,aAEzC,GAAI,CAACuE,UAAY,CAACL,YAAa,OAAO,KAGtC,IAAIE,iBAAmBC,OAAOH,aAC9B,GAAI1E,SAAWA,QAAQyB,MAAM,CAAG,GAAKiB,eAAgB,CACnDkC,iBAAmBxF,iBAAiBwF,iBAAkBlC,eACxD,CAEA,OACE,oBAACzD,eACCI,QAASuF,iBACT/E,UAAWA,UACXkF,SAAUA,SACVT,KAAMS,WAAa,QAAU,gCAAkC,MAGrE,CACF,CAEA,OACE,oBAACqB,OACCvG,UAAWnB,GACT,qIACAmB,YAGDH,WACC,oBAAC0G,OAAIvG,UAAU,kJAEb,oBAACuG,OAAIvG,UAAU,oBACb,oBAACuG,OAAIvG,UAAU,uCACf,oBAACuG,OAAIvG,UAAU,uCACf,oBAACuG,OAAIvG,UAAU,uCAIjB,oBAACuG,OAAIvG,UAAU,mFACZF,OAIH,oBAACyG,OAAIvG,UAAU,UAKlBiD,iBACC,oBAACsD,OACCvG,UAAWnB,GACT,gEACAgB,UAAY,GAAK,iBAGnB,oBAAC0G,OAAIvG,UAAU,4BACZsB,SAASoB,GAAG,CAAC,aACZ,oBAACpD,eACCyH,QAAQ,eACRC,OAAQzE,gBAAkB,WAC1B0E,QAAS,IAAMjB,oBAAoB,YACnCkB,QAAQ,YACRzE,KAAK,KACL0E,gBAAiB,MAClB,YAKF7F,SAASoB,GAAG,CAAC,SACZ,oBAACpD,eACCyH,QAAQ,WACRC,OAAQzE,gBAAkB,OAC1B0E,QAAS,IAAMjB,oBAAoB,QACnCkB,QAAQ,YACRzE,KAAK,KACL0E,gBAAiB,MAClB,UASRR,sBACEC,CAAAA,iBACC,oBAAC5H,kBACCqC,UAAW8B,kBACXR,eAAgBA,eAChByE,iBAAkBhB,qBAClB7B,uBAAwBA,uBACxBC,gBAAiBA,gBACjBE,mBAAoBA,qBAGtB,oBAAC6B,OACCvG,UAAWnB,GACT,kGACA,CAAE,eAAgB,CAACgB,SAAU,EAC7B,CAAE,iBAAkBsD,kBAAkBvB,MAAM,CAAG,CAAE,GAElD,GAAIuB,kBAAkBvB,MAAM,CAAG,GAAK,CACnCqF,QAAS,IAAMb,qBAAqBjD,iBAAiB,CAAC,EAAE,CAC1D,CAAC,EAEAA,kBAAkBvB,MAAM,CAAG,GAC1B,wCACE,oBAAC7C,MACCyH,KAAMhC,gBAAgBrB,iBAAiB,CAAC,EAAE,EAC1CV,KAAK,OACL4C,cAAc,SAEhB,oBAACgC,QAAKrH,UAAU,mFACbuE,uBAAuBpB,iBAAiB,CAAC,EAAE,IAKtD,EAEF,oBAACoD,OACCe,IAAK/G,QACLP,UAAU,WACVuH,aAAc,IAAMvE,cAAc,MAClCwE,aAAc,IAAMxE,cAAc,OAClCyE,QAAS,IAAMzE,cAAc,MAC7B0E,OAAQ,IAAM1E,cAAc,OAC5B2E,SAAU,GAETd,cAGA9D,YAAcJ,gBAAkB4C,6BAC/B,oBAAClG,YACCuI,OAAQ,KACN,MAAMC,KAAOrC,cACb,GAAIqC,KAAMpH,KAAKoH,KACjB,EACArH,SAAUA,YAMfL,SACC,oBAAClB,gBACCkB,QAASA,QACT0C,eAAgBA,eAChBiF,eAAgBzB,qBAK1B,CAEA,gBAAe1G,WAAY"}
1
+ {"version":3,"sources":["../../src/core/CodeSnippet.tsx"],"sourcesContent":["import React, {\n useState,\n Children,\n isValidElement,\n useRef,\n useCallback,\n useMemo,\n} from \"react\";\nimport Code from \"./Code\";\nimport cn from \"./utils/cn\";\nimport Icon from \"./Icon\";\nimport { getLanguageInfo } from \"./CodeSnippet/languages\";\nimport LanguageSelector from \"./CodeSnippet/LanguageSelector\";\nimport ApiKeySelector from \"./CodeSnippet/ApiKeySelector\";\nimport useCopyToClipboard from \"./utils/useCopyToClipboard\";\nimport PlainCodeView from \"./CodeSnippet/PlainCodeView\";\nimport CopyButton from \"./CodeSnippet/CopyButton\";\nimport TooltipButton from \"./CodeSnippet/TooltipButton\";\nimport { type CodeSnippetProps, type SDKType } from \"./CodeSnippet/types\";\n\n// Substitution function for API key placeholders\nconst substituteApiKey = (content: string, apiKey: string): string => {\n return content.replace(/\\{\\{API_KEY\\}\\}/g, apiKey);\n};\n\n/**\n * CodeSnippet component that displays code with language switching capability\n */\nconst CodeSnippet: React.FC<CodeSnippetProps> = ({\n fixed = false,\n headerRow = false,\n title = \"Code\",\n children,\n className,\n lang,\n onChange,\n apiKeys,\n sdk,\n showCodeLines = true,\n languageOrdering,\n}) => {\n const codeRef = useRef<HTMLDivElement>(null);\n const { isCopied, copy } = useCopyToClipboard();\n\n // Helper function to extract language from code element\n const extractLanguageFromCode = useCallback(\n (codeElement: React.ReactElement | null): string | null => {\n if (!codeElement || !codeElement.props.className) return null;\n\n const classNames = codeElement.props.className.split(\" \");\n const langClass = classNames.find((cls: string) =>\n cls.startsWith(\"language-\"),\n );\n if (!langClass) return null;\n\n return langClass.substring(9); // Remove \"language-\" prefix\n },\n [],\n );\n\n // Parse children to extract languages and SDK types - only needs to run once\n const {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSinglePlainCommand,\n } = useMemo(() => {\n const childrenArray = Children.toArray(children);\n const languages: string[] = [];\n const sdkTypes = new Set<SDKType>();\n const originalLangMap = new Map<string, string>();\n\n // Check if we have a single plain code command (shell or text)\n const isSinglePlainCommand =\n childrenArray.length === 1 &&\n [\"language-shell\", \"language-text\"].some(\n (lang) =>\n isValidElement(childrenArray[0]) &&\n isValidElement(childrenArray[0].props.children) &&\n childrenArray[0].props.children.props.className?.includes(lang),\n );\n\n // Extract all available languages from children and identify SDK types\n childrenArray.forEach((child) => {\n if (!isValidElement(child)) return;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return;\n\n // Look for SDK prefixes in the language name itself\n if (langName.startsWith(\"realtime_\")) {\n const baseLanguage = langName.substring(9);\n sdkTypes.add(\"realtime\");\n originalLangMap.set(langName, baseLanguage);\n } else if (langName.startsWith(\"rest_\")) {\n const baseLanguage = langName.substring(5);\n sdkTypes.add(\"rest\");\n originalLangMap.set(langName, baseLanguage);\n } else {\n originalLangMap.set(langName, langName);\n }\n\n // Add to languages list if not already included\n if (!languages.includes(langName)) {\n languages.push(langName);\n }\n });\n\n return {\n childrenArray,\n languages,\n sdkTypes,\n originalLangMap,\n isSinglePlainCommand,\n };\n }, [children, extractLanguageFromCode]);\n\n // Simplified state management with separate hooks\n const [activeSDKType, setActiveSDKType] = useState<SDKType>(() => {\n if (sdkTypes.size === 0) return null;\n if (sdk && sdkTypes.has(sdk)) return sdk;\n if (sdkTypes.has(\"realtime\")) return \"realtime\";\n if (sdkTypes.has(\"rest\")) return \"rest\";\n return null;\n });\n\n // Check if we need to show SDK type selector\n const showSDKSelector = sdkTypes.size > 0;\n\n // Get languages filtered by active SDK type & apply ordering\n const filteredLanguages = useMemo(() => {\n // Filter by SDK type if needed\n const filtered =\n !activeSDKType || !showSDKSelector\n ? [...languages]\n : languages.filter((lang) => lang.startsWith(`${activeSDKType}_`));\n\n // Apply custom ordering if provided\n if (languageOrdering && languageOrdering.length > 0) {\n filtered.sort((a, b) => {\n const aBase = originalLangMap.get(a) || a;\n const bBase = originalLangMap.get(b) || b;\n\n const aIndex = languageOrdering.indexOf(aBase);\n const bIndex = languageOrdering.indexOf(bBase);\n\n if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex;\n if (aIndex !== -1) return -1;\n if (bIndex !== -1) return 1;\n return 0;\n });\n }\n\n return filtered;\n }, [\n activeSDKType,\n showSDKSelector,\n languages,\n languageOrdering,\n originalLangMap,\n ]);\n\n const activeLanguage = useMemo(() => {\n if (lang) return lang;\n if (filteredLanguages.length > 0) return filteredLanguages[0];\n return null;\n }, [lang, filteredLanguages]);\n\n const [selectedApiKey, setSelectedApiKey] = useState<string>(\n () => apiKeys?.[0]?.keys?.[0] ?? \"\",\n );\n\n const [isHovering, setIsHovering] = useState(false);\n\n // Check if there is only a JSON snippet\n const hasOnlyJsonSnippet = useMemo(\n () => languages.length === 1 && languages[0] === \"json\",\n [languages],\n );\n\n // Clean language utilities\n const getCleanLanguage = useCallback(\n (lang: string | null) => (lang ? originalLangMap.get(lang) || lang : null),\n [originalLangMap],\n );\n\n // Filter and process children for the active language\n const processedChildren = useMemo(() => {\n if (!activeLanguage) return [];\n\n // Target language is either the active one or json in json-only mode\n const targetLanguage = hasOnlyJsonSnippet ? \"json\" : activeLanguage;\n\n return childrenArray\n .filter((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === targetLanguage;\n })\n .map((child) => {\n if (!isValidElement(child)) return child;\n\n const preElement = child;\n const codeElement = isValidElement(preElement.props.children)\n ? preElement.props.children\n : null;\n if (!codeElement) return child;\n\n const codeContent = codeElement.props.children;\n const langName = extractLanguageFromCode(codeElement);\n if (!langName) return child;\n\n const cleanLang = hasOnlyJsonSnippet\n ? \"json\"\n : getCleanLanguage(langName) || langName;\n const langInfo = getLanguageInfo(cleanLang);\n\n // Handle primitive content types\n if (\n typeof codeContent === \"string\" ||\n typeof codeContent === \"number\" ||\n typeof codeContent === \"boolean\"\n ) {\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(codeContent);\n if (apiKeys && apiKeys.length > 0 && selectedApiKey) {\n processedContent = substituteApiKey(\n processedContent,\n selectedApiKey,\n );\n }\n\n return (\n <Code\n key={langName}\n language={langInfo.syntaxHighlighterKey || cleanLang}\n snippet={processedContent}\n additionalCSS=\"bg-neutral-100 text-neutral-1300 dark:bg-neutral-1200 dark:text-neutral-200 px-6 py-4\"\n showLines={showCodeLines}\n />\n );\n }\n\n return child;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n getCleanLanguage,\n hasOnlyJsonSnippet,\n showCodeLines,\n apiKeys,\n selectedApiKey,\n ]);\n\n // Check if there's a snippet available for the active language\n const hasSnippetForActiveLanguage = useMemo(() => {\n if (!activeLanguage) return false;\n if (hasOnlyJsonSnippet) return true;\n\n return childrenArray.some((child) => {\n if (!isValidElement(child)) return false;\n const codeElement = isValidElement(child.props.children)\n ? child.props.children\n : null;\n const langName = extractLanguageFromCode(codeElement);\n return langName === activeLanguage;\n });\n }, [\n activeLanguage,\n childrenArray,\n extractLanguageFromCode,\n hasOnlyJsonSnippet,\n ]);\n\n // Function to get the current code text content\n const getCodeText = useCallback((): string | null => {\n if (!activeLanguage || !hasSnippetForActiveLanguage || !codeRef.current)\n return null;\n\n const allPreElements = codeRef.current.querySelectorAll(\"pre\");\n for (const preElement of Array.from(allPreElements)) {\n const codeElement = preElement.querySelector(\"code\");\n if (!codeElement || !codeElement.className) continue;\n\n const classNames = codeElement.className.split(\" \");\n const langClass = classNames.find((cls) => cls.startsWith(\"language-\"));\n if (!langClass) continue;\n\n const langName = langClass.substring(9);\n if (\n (hasOnlyJsonSnippet && langName === \"json\") ||\n (!hasOnlyJsonSnippet && langName === activeLanguage)\n ) {\n return codeElement.textContent || \"\";\n }\n }\n\n return null;\n }, [activeLanguage, hasSnippetForActiveLanguage, hasOnlyJsonSnippet]);\n\n // Event handlers\n const handleSDKTypeChange = useCallback(\n (type: SDKType) => {\n // pick first language matching the new SDK prefix\n const nextLang = languages.find((l) => l.startsWith(`${type}_`)) ?? null;\n setActiveSDKType(type);\n\n // Call onChange with clean language name\n if (onChange && nextLang) {\n const cleanLang = getCleanLanguage(nextLang) || nextLang;\n onChange(cleanLang, type);\n }\n },\n [languages],\n );\n\n const handleLanguageChange = useCallback(\n (language: string) => {\n // Call onChange with clean language name\n if (onChange) {\n const cleanLang = getCleanLanguage(language) || language;\n onChange(cleanLang, activeSDKType);\n }\n },\n [onChange, getCleanLanguage, activeSDKType],\n );\n\n const handleApiKeyChange = useCallback((apiKey: string) => {\n setSelectedApiKey(apiKey);\n }, []);\n\n // Optimize no-snippet message as a component\n const NoSnippetMessage = useMemo(() => {\n if (!activeLanguage) return () => null;\n\n const activeLanguageInfo = getLanguageInfo(activeLanguage);\n\n return () => (\n <div className=\"px-16 py-6 ui-text-body2 text-neutral-800 dark:text-neutral-400 text-center flex flex-col gap-3 items-center\">\n <Icon\n name=\"icon-gui-exclamation-triangle-outline\"\n color=\"text-yellow-600 dark:text-yellow-400\"\n size=\"24px\"\n />\n <p className=\"ui-text-p3 text-neutral-700 dark:text-neutral-600\">\n You&apos;re currently viewing the {activeLanguageInfo.label} docs.\n There either isn&apos;t a {activeLanguageInfo.label} code sample for\n this example, or this feature isn&apos;t supported in{\" \"}\n {activeLanguageInfo.label}. Switch language to view this example in a\n different language, or check which SDKs support this feature.\n </p>\n </div>\n );\n }, [activeLanguage]);\n\n // Determine if we should show the language selector\n const showLanguageSelector = !fixed && filteredLanguages.length > 0;\n const showFullSelector = filteredLanguages.length > 1;\n\n console.log(\"testo\", activeLanguage, filteredLanguages);\n\n // Memoize renderContent\n const renderContent = useMemo(() => {\n if (!activeLanguage) return null;\n\n if (hasSnippetForActiveLanguage) {\n return processedChildren;\n }\n\n if (activeLanguage) {\n return <NoSnippetMessage />;\n }\n\n return null;\n }, [\n activeLanguage,\n hasSnippetForActiveLanguage,\n processedChildren,\n NoSnippetMessage,\n ]);\n\n // Render special case for plain commands (shell or text)\n if (isSinglePlainCommand) {\n const plainChild = childrenArray[0];\n if (\n isValidElement(plainChild) &&\n isValidElement(plainChild.props.children)\n ) {\n const codeElement = plainChild.props.children;\n const codeContent = codeElement.props.children;\n const language = extractLanguageFromCode(codeElement);\n\n if (!language || !codeContent) return null;\n\n // Apply API key substitution if apiKeys are provided\n let processedContent = String(codeContent);\n if (apiKeys && apiKeys.length > 0 && selectedApiKey) {\n processedContent = substituteApiKey(processedContent, selectedApiKey);\n }\n\n return (\n <PlainCodeView\n content={processedContent}\n className={className}\n language={language}\n icon={language === \"shell\" ? \"icon-gui-command-line-outline\" : null}\n />\n );\n }\n }\n\n return (\n <div\n className={cn(\n \"rounded-lg overflow-hidden bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 min-h-[3.375rem]\",\n className,\n )}\n >\n {headerRow && (\n <div className=\"h-[2.375rem] bg-neutral-200 dark:bg-neutral-1100 border-b border-neutral-300 dark:border-neutral-1000 flex items-center py-1 px-3 rounded-t-lg\">\n <div className=\"flex space-x-1.5\">\n <div className=\"w-3 h-3 rounded-full bg-orange-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-yellow-500\"></div>\n <div className=\"w-3 h-3 rounded-full bg-green-500\"></div>\n </div>\n\n <div className=\"flex-1 text-center ui-text-p3 font-bold text-neutral-1300 dark:text-neutral-000\">\n {title}\n </div>\n\n {/* Empty div for balance */}\n <div className=\"w-12\"></div>\n </div>\n )}\n\n {showSDKSelector && (\n <div\n className={cn(\n \"p-2 border-b border-neutral-200 dark:border-neutral-1100 h-14\",\n headerRow ? \"\" : \"rounded-t-lg\",\n )}\n >\n <div className=\"flex gap-3 justify-start\">\n {sdkTypes.has(\"realtime\") && (\n <TooltipButton\n tooltip=\"Realtime SDK\"\n active={activeSDKType === \"realtime\"}\n onClick={() => handleSDKTypeChange(\"realtime\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n Realtime\n </TooltipButton>\n )}\n\n {sdkTypes.has(\"rest\") && (\n <TooltipButton\n tooltip=\"REST SDK\"\n active={activeSDKType === \"rest\"}\n onClick={() => handleSDKTypeChange(\"rest\")}\n variant=\"segmented\"\n size=\"sm\"\n alwaysShowLabel={true}\n >\n REST\n </TooltipButton>\n )}\n </div>\n </div>\n )}\n\n {showLanguageSelector &&\n (showFullSelector ? (\n <LanguageSelector\n languages={filteredLanguages}\n activeLanguage={activeLanguage}\n onLanguageChange={handleLanguageChange}\n />\n ) : (\n <div\n className={cn(\n \"border-b border-neutral-200 dark:border-neutral-1100 h-[2.125rem] inline-flex items-center px-3\",\n { \"rounded-t-lg\": !headerRow },\n { \"cursor-pointer\": filteredLanguages.length > 0 },\n )}\n {...(filteredLanguages.length > 0 && {\n onClick: () => handleLanguageChange(filteredLanguages[0]),\n })}\n >\n {filteredLanguages.length > 0 && (\n <>\n <Icon\n name={getLanguageInfo(filteredLanguages[0]).icon}\n size=\"16px\"\n additionalCSS=\"mr-2\"\n />\n <span className=\"ui-text-label4 font-semibold text-neutral-800 dark:text-neutral-500 select-none\">\n {getLanguageInfo(filteredLanguages[0]).label}\n </span>\n </>\n )}\n </div>\n ))}\n\n <div\n ref={codeRef}\n className=\"relative\"\n onMouseEnter={() => setIsHovering(true)}\n onMouseLeave={() => setIsHovering(false)}\n onFocus={() => setIsHovering(true)}\n onBlur={() => setIsHovering(false)}\n tabIndex={0}\n >\n {renderContent}\n {isHovering && activeLanguage && hasSnippetForActiveLanguage && (\n <CopyButton\n onCopy={() => {\n const text = getCodeText();\n if (text) copy(text);\n }}\n isCopied={isCopied}\n />\n )}\n </div>\n\n {apiKeys && (\n <ApiKeySelector\n apiKeys={apiKeys}\n selectedApiKey={selectedApiKey}\n onApiKeyChange={handleApiKeyChange}\n />\n )}\n </div>\n );\n};\n\nexport default CodeSnippet;\n"],"names":["React","useState","Children","isValidElement","useRef","useCallback","useMemo","Code","cn","Icon","getLanguageInfo","LanguageSelector","ApiKeySelector","useCopyToClipboard","PlainCodeView","CopyButton","TooltipButton","substituteApiKey","content","apiKey","replace","CodeSnippet","fixed","headerRow","title","children","className","lang","onChange","apiKeys","sdk","showCodeLines","languageOrdering","codeRef","isCopied","copy","extractLanguageFromCode","codeElement","props","classNames","split","langClass","find","cls","startsWith","substring","childrenArray","languages","sdkTypes","originalLangMap","isSinglePlainCommand","toArray","Set","Map","length","some","includes","forEach","child","preElement","langName","baseLanguage","add","set","push","activeSDKType","setActiveSDKType","size","has","showSDKSelector","filteredLanguages","filtered","filter","sort","a","b","aBase","get","bBase","aIndex","indexOf","bIndex","activeLanguage","selectedApiKey","setSelectedApiKey","keys","isHovering","setIsHovering","hasOnlyJsonSnippet","getCleanLanguage","processedChildren","targetLanguage","map","codeContent","cleanLang","langInfo","processedContent","String","key","language","syntaxHighlighterKey","snippet","additionalCSS","showLines","hasSnippetForActiveLanguage","getCodeText","current","allPreElements","querySelectorAll","Array","from","querySelector","textContent","handleSDKTypeChange","type","nextLang","l","handleLanguageChange","handleApiKeyChange","NoSnippetMessage","activeLanguageInfo","div","name","color","p","label","showLanguageSelector","showFullSelector","console","log","renderContent","plainChild","icon","tooltip","active","onClick","variant","alwaysShowLabel","onLanguageChange","span","ref","onMouseEnter","onMouseLeave","onFocus","onBlur","tabIndex","onCopy","text","onApiKeyChange"],"mappings":"AAAA,OAAOA,OACLC,QAAQ,CACRC,QAAQ,CACRC,cAAc,CACdC,MAAM,CACNC,WAAW,CACXC,OAAO,KACF,OAAQ,AACf,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QAASC,eAAe,KAAQ,yBAA0B,AAC1D,QAAOC,qBAAsB,gCAAiC,AAC9D,QAAOC,mBAAoB,8BAA+B,AAC1D,QAAOC,uBAAwB,4BAA6B,AAC5D,QAAOC,kBAAmB,6BAA8B,AACxD,QAAOC,eAAgB,0BAA2B,AAClD,QAAOC,kBAAmB,6BAA8B,CAIxD,MAAMC,iBAAmB,CAACC,QAAiBC,UACzC,OAAOD,QAAQE,OAAO,CAAC,mBAAoBD,OAC7C,EAKA,MAAME,YAA0C,CAAC,CAC/CC,MAAQ,KAAK,CACbC,UAAY,KAAK,CACjBC,MAAQ,MAAM,CACdC,QAAQ,CACRC,SAAS,CACTC,IAAI,CACJC,QAAQ,CACRC,OAAO,CACPC,GAAG,CACHC,cAAgB,IAAI,CACpBC,gBAAgB,CACjB,IACC,MAAMC,QAAU7B,OAAuB,MACvC,KAAM,CAAE8B,QAAQ,CAAEC,IAAI,CAAE,CAAGtB,qBAG3B,MAAMuB,wBAA0B/B,YAC9B,AAACgC,cACC,GAAI,CAACA,aAAe,CAACA,YAAYC,KAAK,CAACZ,SAAS,CAAE,OAAO,KAEzD,MAAMa,WAAaF,YAAYC,KAAK,CAACZ,SAAS,CAACc,KAAK,CAAC,KACrD,MAAMC,UAAYF,WAAWG,IAAI,CAAC,AAACC,KACjCA,IAAIC,UAAU,CAAC,cAEjB,GAAI,CAACH,UAAW,OAAO,KAEvB,OAAOA,UAAUI,SAAS,CAAC,EAC7B,EACA,EAAE,EAIJ,KAAM,CACJC,aAAa,CACbC,SAAS,CACTC,QAAQ,CACRC,eAAe,CACfC,oBAAoB,CACrB,CAAG5C,QAAQ,KACV,MAAMwC,cAAgB5C,SAASiD,OAAO,CAAC1B,UACvC,MAAMsB,UAAsB,EAAE,CAC9B,MAAMC,SAAW,IAAII,IACrB,MAAMH,gBAAkB,IAAII,IAG5B,MAAMH,qBACJJ,cAAcQ,MAAM,GAAK,GACzB,CAAC,iBAAkB,gBAAgB,CAACC,IAAI,CACtC,AAAC5B,MACCxB,eAAe2C,aAAa,CAAC,EAAE,GAC/B3C,eAAe2C,aAAa,CAAC,EAAE,CAACR,KAAK,CAACb,QAAQ,GAC9CqB,aAAa,CAAC,EAAE,CAACR,KAAK,CAACb,QAAQ,CAACa,KAAK,CAACZ,SAAS,EAAE8B,SAAS7B,OAIhEmB,cAAcW,OAAO,CAAC,AAACC,QACrB,GAAI,CAACvD,eAAeuD,OAAQ,OAE5B,MAAMC,WAAaD,MACnB,MAAMrB,YAAclC,eAAewD,WAAWrB,KAAK,CAACb,QAAQ,EACxDkC,WAAWrB,KAAK,CAACb,QAAQ,CACzB,KAEJ,MAAMmC,SAAWxB,wBAAwBC,aACzC,GAAI,CAACuB,SAAU,OAGf,GAAIA,SAAShB,UAAU,CAAC,aAAc,CACpC,MAAMiB,aAAeD,SAASf,SAAS,CAAC,GACxCG,SAASc,GAAG,CAAC,YACbb,gBAAgBc,GAAG,CAACH,SAAUC,aAChC,MAAO,GAAID,SAAShB,UAAU,CAAC,SAAU,CACvC,MAAMiB,aAAeD,SAASf,SAAS,CAAC,GACxCG,SAASc,GAAG,CAAC,QACbb,gBAAgBc,GAAG,CAACH,SAAUC,aAChC,KAAO,CACLZ,gBAAgBc,GAAG,CAACH,SAAUA,SAChC,CAGA,GAAI,CAACb,UAAUS,QAAQ,CAACI,UAAW,CACjCb,UAAUiB,IAAI,CAACJ,SACjB,CACF,GAEA,MAAO,CACLd,cACAC,UACAC,SACAC,gBACAC,oBACF,CACF,EAAG,CAACzB,SAAUW,wBAAwB,EAGtC,KAAM,CAAC6B,cAAeC,iBAAiB,CAAGjE,SAAkB,KAC1D,GAAI+C,SAASmB,IAAI,GAAK,EAAG,OAAO,KAChC,GAAIrC,KAAOkB,SAASoB,GAAG,CAACtC,KAAM,OAAOA,IACrC,GAAIkB,SAASoB,GAAG,CAAC,YAAa,MAAO,WACrC,GAAIpB,SAASoB,GAAG,CAAC,QAAS,MAAO,OACjC,OAAO,IACT,GAGA,MAAMC,gBAAkBrB,SAASmB,IAAI,CAAG,EAGxC,MAAMG,kBAAoBhE,QAAQ,KAEhC,MAAMiE,SACJ,CAACN,eAAiB,CAACI,gBACf,IAAItB,UAAU,CACdA,UAAUyB,MAAM,CAAC,AAAC7C,MAASA,KAAKiB,UAAU,CAAC,CAAC,EAAEqB,cAAc,CAAC,CAAC,GAGpE,GAAIjC,kBAAoBA,iBAAiBsB,MAAM,CAAG,EAAG,CACnDiB,SAASE,IAAI,CAAC,CAACC,EAAGC,KAChB,MAAMC,MAAQ3B,gBAAgB4B,GAAG,CAACH,IAAMA,EACxC,MAAMI,MAAQ7B,gBAAgB4B,GAAG,CAACF,IAAMA,EAExC,MAAMI,OAAS/C,iBAAiBgD,OAAO,CAACJ,OACxC,MAAMK,OAASjD,iBAAiBgD,OAAO,CAACF,OAExC,GAAIC,SAAW,CAAC,GAAKE,SAAW,CAAC,EAAG,OAAOF,OAASE,OACpD,GAAIF,SAAW,CAAC,EAAG,MAAO,CAAC,EAC3B,GAAIE,SAAW,CAAC,EAAG,OAAO,EAC1B,OAAO,CACT,EACF,CAEA,OAAOV,QACT,EAAG,CACDN,cACAI,gBACAtB,UACAf,iBACAiB,gBACD,EAED,MAAMiC,eAAiB5E,QAAQ,KAC7B,GAAIqB,KAAM,OAAOA,KACjB,GAAI2C,kBAAkBhB,MAAM,CAAG,EAAG,OAAOgB,iBAAiB,CAAC,EAAE,CAC7D,OAAO,IACT,EAAG,CAAC3C,KAAM2C,kBAAkB,EAE5B,KAAM,CAACa,eAAgBC,kBAAkB,CAAGnF,SAC1C,IAAM4B,SAAS,CAAC,EAAE,EAAEwD,MAAM,CAAC,EAAE,EAAI,IAGnC,KAAM,CAACC,WAAYC,cAAc,CAAGtF,SAAS,OAG7C,MAAMuF,mBAAqBlF,QACzB,IAAMyC,UAAUO,MAAM,GAAK,GAAKP,SAAS,CAAC,EAAE,GAAK,OACjD,CAACA,UAAU,EAIb,MAAM0C,iBAAmBpF,YACvB,AAACsB,MAAyBA,KAAOsB,gBAAgB4B,GAAG,CAAClD,OAASA,KAAO,KACrE,CAACsB,gBAAgB,EAInB,MAAMyC,kBAAoBpF,QAAQ,KAChC,GAAI,CAAC4E,eAAgB,MAAO,EAAE,CAG9B,MAAMS,eAAiBH,mBAAqB,OAASN,eAErD,OAAOpC,cACJ0B,MAAM,CAAC,AAACd,QACP,GAAI,CAACvD,eAAeuD,OAAQ,OAAO,MACnC,MAAMrB,YAAclC,eAAeuD,MAAMpB,KAAK,CAACb,QAAQ,EACnDiC,MAAMpB,KAAK,CAACb,QAAQ,CACpB,KACJ,MAAMmC,SAAWxB,wBAAwBC,aACzC,OAAOuB,WAAa+B,cACtB,GACCC,GAAG,CAAC,AAAClC,QACJ,GAAI,CAACvD,eAAeuD,OAAQ,OAAOA,MAEnC,MAAMC,WAAaD,MACnB,MAAMrB,YAAclC,eAAewD,WAAWrB,KAAK,CAACb,QAAQ,EACxDkC,WAAWrB,KAAK,CAACb,QAAQ,CACzB,KACJ,GAAI,CAACY,YAAa,OAAOqB,MAEzB,MAAMmC,YAAcxD,YAAYC,KAAK,CAACb,QAAQ,CAC9C,MAAMmC,SAAWxB,wBAAwBC,aACzC,GAAI,CAACuB,SAAU,OAAOF,MAEtB,MAAMoC,UAAYN,mBACd,OACAC,iBAAiB7B,WAAaA,SAClC,MAAMmC,SAAWrF,gBAAgBoF,WAGjC,GACE,OAAOD,cAAgB,UACvB,OAAOA,cAAgB,UACvB,OAAOA,cAAgB,UACvB,CAEA,IAAIG,iBAAmBC,OAAOJ,aAC9B,GAAIhE,SAAWA,QAAQyB,MAAM,CAAG,GAAK6B,eAAgB,CACnDa,iBAAmB/E,iBACjB+E,iBACAb,eAEJ,CAEA,OACE,oBAAC5E,MACC2F,IAAKtC,SACLuC,SAAUJ,SAASK,oBAAoB,EAAIN,UAC3CO,QAASL,iBACTM,cAAc,wFACdC,UAAWxE,eAGjB,CAEA,OAAO2B,KACT,EACJ,EAAG,CACDwB,eACApC,cACAV,wBACAqD,iBACAD,mBACAzD,cACAF,QACAsD,eACD,EAGD,MAAMqB,4BAA8BlG,QAAQ,KAC1C,GAAI,CAAC4E,eAAgB,OAAO,MAC5B,GAAIM,mBAAoB,OAAO,KAE/B,OAAO1C,cAAcS,IAAI,CAAC,AAACG,QACzB,GAAI,CAACvD,eAAeuD,OAAQ,OAAO,MACnC,MAAMrB,YAAclC,eAAeuD,MAAMpB,KAAK,CAACb,QAAQ,EACnDiC,MAAMpB,KAAK,CAACb,QAAQ,CACpB,KACJ,MAAMmC,SAAWxB,wBAAwBC,aACzC,OAAOuB,WAAasB,cACtB,EACF,EAAG,CACDA,eACApC,cACAV,wBACAoD,mBACD,EAGD,MAAMiB,YAAcpG,YAAY,KAC9B,GAAI,CAAC6E,gBAAkB,CAACsB,6BAA+B,CAACvE,QAAQyE,OAAO,CACrE,OAAO,KAET,MAAMC,eAAiB1E,QAAQyE,OAAO,CAACE,gBAAgB,CAAC,OACxD,IAAK,MAAMjD,cAAckD,MAAMC,IAAI,CAACH,gBAAiB,CACnD,MAAMtE,YAAcsB,WAAWoD,aAAa,CAAC,QAC7C,GAAI,CAAC1E,aAAe,CAACA,YAAYX,SAAS,CAAE,SAE5C,MAAMa,WAAaF,YAAYX,SAAS,CAACc,KAAK,CAAC,KAC/C,MAAMC,UAAYF,WAAWG,IAAI,CAAC,AAACC,KAAQA,IAAIC,UAAU,CAAC,cAC1D,GAAI,CAACH,UAAW,SAEhB,MAAMmB,SAAWnB,UAAUI,SAAS,CAAC,GACrC,GACE,AAAC2C,oBAAsB5B,WAAa,QACnC,CAAC4B,oBAAsB5B,WAAasB,eACrC,CACA,OAAO7C,YAAY2E,WAAW,EAAI,EACpC,CACF,CAEA,OAAO,IACT,EAAG,CAAC9B,eAAgBsB,4BAA6BhB,mBAAmB,EAGpE,MAAMyB,oBAAsB5G,YAC1B,AAAC6G,OAEC,MAAMC,SAAWpE,UAAUL,IAAI,CAAC,AAAC0E,GAAMA,EAAExE,UAAU,CAAC,CAAC,EAAEsE,KAAK,CAAC,CAAC,IAAM,KACpEhD,iBAAiBgD,MAGjB,GAAItF,UAAYuF,SAAU,CACxB,MAAMrB,UAAYL,iBAAiB0B,WAAaA,SAChDvF,SAASkE,UAAWoB,KACtB,CACF,EACA,CAACnE,UAAU,EAGb,MAAMsE,qBAAuBhH,YAC3B,AAAC8F,WAEC,GAAIvE,SAAU,CACZ,MAAMkE,UAAYL,iBAAiBU,WAAaA,SAChDvE,SAASkE,UAAW7B,cACtB,CACF,EACA,CAACrC,SAAU6D,iBAAkBxB,cAAc,EAG7C,MAAMqD,mBAAqBjH,YAAY,AAACc,SACtCiE,kBAAkBjE,OACpB,EAAG,EAAE,EAGL,MAAMoG,iBAAmBjH,QAAQ,KAC/B,GAAI,CAAC4E,eAAgB,MAAO,IAAM,KAElC,MAAMsC,mBAAqB9G,gBAAgBwE,gBAE3C,MAAO,IACL,oBAACuC,OAAI/F,UAAU,gHACb,oBAACjB,MACCiH,KAAK,wCACLC,MAAM,uCACNxD,KAAK,SAEP,oBAACyD,KAAElG,UAAU,qDAAoD,gCAC5B8F,mBAAmBK,KAAK,CAAC,+BACjCL,mBAAmBK,KAAK,CAAC,oEACE,IACrDL,mBAAmBK,KAAK,CAAC,6GAKlC,EAAG,CAAC3C,eAAe,EAGnB,MAAM4C,qBAAuB,CAACxG,OAASgD,kBAAkBhB,MAAM,CAAG,EAClE,MAAMyE,iBAAmBzD,kBAAkBhB,MAAM,CAAG,EAEpD0E,QAAQC,GAAG,CAAC,QAAS/C,eAAgBZ,mBAGrC,MAAM4D,cAAgB5H,QAAQ,KAC5B,GAAI,CAAC4E,eAAgB,OAAO,KAE5B,GAAIsB,4BAA6B,CAC/B,OAAOd,iBACT,CAEA,GAAIR,eAAgB,CAClB,OAAO,oBAACqC,sBACV,CAEA,OAAO,IACT,EAAG,CACDrC,eACAsB,4BACAd,kBACA6B,iBACD,EAGD,GAAIrE,qBAAsB,CACxB,MAAMiF,WAAarF,aAAa,CAAC,EAAE,CACnC,GACE3C,eAAegI,aACfhI,eAAegI,WAAW7F,KAAK,CAACb,QAAQ,EACxC,CACA,MAAMY,YAAc8F,WAAW7F,KAAK,CAACb,QAAQ,CAC7C,MAAMoE,YAAcxD,YAAYC,KAAK,CAACb,QAAQ,CAC9C,MAAM0E,SAAW/D,wBAAwBC,aAEzC,GAAI,CAAC8D,UAAY,CAACN,YAAa,OAAO,KAGtC,IAAIG,iBAAmBC,OAAOJ,aAC9B,GAAIhE,SAAWA,QAAQyB,MAAM,CAAG,GAAK6B,eAAgB,CACnDa,iBAAmB/E,iBAAiB+E,iBAAkBb,eACxD,CAEA,OACE,oBAACrE,eACCI,QAAS8E,iBACTtE,UAAWA,UACXyE,SAAUA,SACViC,KAAMjC,WAAa,QAAU,gCAAkC,MAGrE,CACF,CAEA,OACE,oBAACsB,OACC/F,UAAWlB,GACT,qIACAkB,YAGDH,WACC,oBAACkG,OAAI/F,UAAU,kJACb,oBAAC+F,OAAI/F,UAAU,oBACb,oBAAC+F,OAAI/F,UAAU,uCACf,oBAAC+F,OAAI/F,UAAU,uCACf,oBAAC+F,OAAI/F,UAAU,uCAGjB,oBAAC+F,OAAI/F,UAAU,mFACZF,OAIH,oBAACiG,OAAI/F,UAAU,UAIlB2C,iBACC,oBAACoD,OACC/F,UAAWlB,GACT,gEACAe,UAAY,GAAK,iBAGnB,oBAACkG,OAAI/F,UAAU,4BACZsB,SAASoB,GAAG,CAAC,aACZ,oBAACpD,eACCqH,QAAQ,eACRC,OAAQrE,gBAAkB,WAC1BsE,QAAS,IAAMtB,oBAAoB,YACnCuB,QAAQ,YACRrE,KAAK,KACLsE,gBAAiB,MAClB,YAKFzF,SAASoB,GAAG,CAAC,SACZ,oBAACpD,eACCqH,QAAQ,WACRC,OAAQrE,gBAAkB,OAC1BsE,QAAS,IAAMtB,oBAAoB,QACnCuB,QAAQ,YACRrE,KAAK,KACLsE,gBAAiB,MAClB,UAQRX,sBACEC,CAAAA,iBACC,oBAACpH,kBACCoC,UAAWuB,kBACXY,eAAgBA,eAChBwD,iBAAkBrB,uBAGpB,oBAACI,OACC/F,UAAWlB,GACT,kGACA,CAAE,eAAgB,CAACe,SAAU,EAC7B,CAAE,iBAAkB+C,kBAAkBhB,MAAM,CAAG,CAAE,GAElD,GAAIgB,kBAAkBhB,MAAM,CAAG,GAAK,CACnCiF,QAAS,IAAMlB,qBAAqB/C,iBAAiB,CAAC,EAAE,CAC1D,CAAC,EAEAA,kBAAkBhB,MAAM,CAAG,GAC1B,wCACE,oBAAC7C,MACCiH,KAAMhH,gBAAgB4D,iBAAiB,CAAC,EAAE,EAAE8D,IAAI,CAChDjE,KAAK,OACLmC,cAAc,SAEhB,oBAACqC,QAAKjH,UAAU,mFACbhB,gBAAgB4D,iBAAiB,CAAC,EAAE,EAAEuD,KAAK,GAKtD,EAEF,oBAACJ,OACCmB,IAAK3G,QACLP,UAAU,WACVmH,aAAc,IAAMtD,cAAc,MAClCuD,aAAc,IAAMvD,cAAc,OAClCwD,QAAS,IAAMxD,cAAc,MAC7ByD,OAAQ,IAAMzD,cAAc,OAC5B0D,SAAU,GAETf,cACA5C,YAAcJ,gBAAkBsB,6BAC/B,oBAACzF,YACCmI,OAAQ,KACN,MAAMC,KAAO1C,cACb,GAAI0C,KAAMhH,KAAKgH,KACjB,EACAjH,SAAUA,YAKfL,SACC,oBAACjB,gBACCiB,QAASA,QACTsD,eAAgBA,eAChBiE,eAAgB9B,qBAK1B,CAEA,gBAAejG,WAAY"}
package/core/remote-session-data.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,SAAuC,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
1
+ {"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GA0BgB,MA1BuB,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
package/index.d.ts CHANGED
@@ -305,15 +305,16 @@ export default Code;
305
305
  }
306
306
 
307
307
  declare module '@ably/ui/core/CodeSnippet/ApiKeySelector' {
308
- import React from "react";
309
- import type { ApiKeyItem } from "@ably/ui/core/types";
308
+ import type { ApiKeysItem } from "@ably/ui/core/types";
310
309
  type ApiKeySelectorProps = {
311
- apiKeys?: ApiKeyItem[];
310
+ apiKeys?: ApiKeysItem[];
312
311
  selectedApiKey: string;
313
312
  onApiKeyChange: (apiKey: string) => void;
314
313
  };
315
- export const getApiKeyValue: (apiKeyItem: ApiKeyItem) => string;
316
- const ApiKeySelector: React.MemoExoticComponent<({ apiKeys, selectedApiKey, onApiKeyChange }: ApiKeySelectorProps) => import("react/jsx-runtime").JSX.Element>;
314
+ const ApiKeySelector: {
315
+ ({ apiKeys, selectedApiKey, onApiKeyChange, }: ApiKeySelectorProps): import("react/jsx-runtime").JSX.Element;
316
+ displayName: string;
317
+ };
317
318
  export default ApiKeySelector;
318
319
  //# sourceMappingURL=ApiKeySelector.d.ts.map
319
320
  }
@@ -335,17 +336,12 @@ export default CopyButton;
335
336
 
336
337
  declare module '@ably/ui/core/CodeSnippet/LanguageSelector' {
337
338
  import React from "react";
338
- import { IconName } from ".@ably/ui/core/Icon/types";
339
- import { LanguageInfo } from "@ably/ui/core/languages";
340
339
  type LanguageSelectorProps = {
341
340
  languages: string[];
342
341
  activeLanguage: string | null;
343
342
  onLanguageChange: (language: string) => void;
344
- getLanguageDisplayName: (lang: string) => string;
345
- getLanguageIcon: (lang: string) => IconName;
346
- activeLanguageInfo: LanguageInfo | null;
347
343
  };
348
- const LanguageSelector: React.MemoExoticComponent<({ languages, activeLanguage, onLanguageChange, getLanguageDisplayName, getLanguageIcon, activeLanguageInfo, }: LanguageSelectorProps) => import("react/jsx-runtime").JSX.Element>;
344
+ const LanguageSelector: React.MemoExoticComponent<({ languages, activeLanguage, onLanguageChange }: LanguageSelectorProps) => import("react/jsx-runtime").JSX.Element>;
349
345
  export default LanguageSelector;
350
346
  //# sourceMappingURL=LanguageSelector.d.ts.map
351
347
  }
@@ -402,9 +398,9 @@ export default languages;
402
398
 
403
399
  declare module '@ably/ui/core/CodeSnippet/types' {
404
400
  export type SDKType = "realtime" | "rest" | null;
405
- export type ApiKeyItem = string | {
406
- type: "demo";
407
- key: string;
401
+ export type ApiKeysItem = {
402
+ app: string;
403
+ keys: string[];
408
404
  };
409
405
  export type CodeSnippetProps = {
410
406
  /**
@@ -439,7 +435,7 @@ export type CodeSnippetProps = {
439
435
  /**
440
436
  * List of API keys to display in a dropdown
441
437
  */
442
- apiKeys?: ApiKeyItem[];
438
+ apiKeys?: ApiKeysItem[];
443
439
  /**
444
440
  * Default SDK type to use for the code snippet
445
441
  */
@@ -459,7 +455,7 @@ export type CodeSnippetProps = {
459
455
 
460
456
  declare module '@ably/ui/core/CodeSnippet' {
461
457
  import React from "react";
462
- import type { CodeSnippetProps } from "@ably/ui/core/CodeSnippet/types";
458
+ import { type CodeSnippetProps } from "@ably/ui/core/CodeSnippet/types";
463
459
  /**
464
460
  * CodeSnippet component that displays code with language switching capability
465
461
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ably/ui",
3
- "version": "17.4.0-dev.dd1216dd",
3
+ "version": "17.4.0-dev.e0ae8675",
4
4
  "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
5
5
  "repository": {
6
6
  "type": "git",