@gram-ai/elements 1.23.0 → 1.24.0

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 (64) hide show
  1. package/README.md +61 -0
  2. package/dist/components/Chat/stories/MessageFeedback.stories.d.ts +28 -0
  3. package/dist/components/Chat/stories/Thread.stories.d.ts +15 -0
  4. package/dist/components/Replay.d.ts +11 -0
  5. package/dist/components/Replay.stories.d.ts +34 -0
  6. package/dist/components/assistant-ui/follow-on-suggestions.d.ts +6 -0
  7. package/dist/components/assistant-ui/message-feedback.d.ts +9 -0
  8. package/dist/contexts/ReplayContext.d.ts +6 -0
  9. package/dist/elements.cjs +1 -1
  10. package/dist/elements.css +1 -1
  11. package/dist/elements.js +10 -8
  12. package/dist/hooks/useFollowOnSuggestions.d.ts +14 -0
  13. package/dist/hooks/useMCPTools.d.ts +4 -3
  14. package/dist/hooks/useRecordCassette.d.ts +32 -0
  15. package/dist/{index-D-QXb5EF.js → index-B_7BIEfu.js} +11591 -10174
  16. package/dist/index-B_7BIEfu.js.map +1 -0
  17. package/dist/index-Bps9R2k6.cjs +178 -0
  18. package/dist/index-Bps9R2k6.cjs.map +1 -0
  19. package/dist/{index-vM3v0unX.js → index-CtyV0c-T.js} +5477 -5450
  20. package/dist/index-CtyV0c-T.js.map +1 -0
  21. package/dist/{index-Co05S1C8.cjs → index-iUSSoKFz.cjs} +12 -12
  22. package/dist/index-iUSSoKFz.cjs.map +1 -0
  23. package/dist/index.d.ts +3 -0
  24. package/dist/lib/cassette.d.ts +46 -0
  25. package/dist/plugins.cjs +1 -1
  26. package/dist/plugins.js +1 -1
  27. package/dist/{profiler-Dshm-O8k.cjs → profiler-B6MySCOn.cjs} +2 -2
  28. package/dist/{profiler-Dshm-O8k.cjs.map → profiler-B6MySCOn.cjs.map} +1 -1
  29. package/dist/{profiler-D8-vgPGn.js → profiler-BWBC_MF5.js} +2 -2
  30. package/dist/{profiler-D8-vgPGn.js.map → profiler-BWBC_MF5.js.map} +1 -1
  31. package/dist/{startRecording-DnWeZRhl.js → startRecording-52IGlVhJ.js} +2 -2
  32. package/dist/{startRecording-DnWeZRhl.js.map → startRecording-52IGlVhJ.js.map} +1 -1
  33. package/dist/{startRecording-2p7-xVUh.cjs → startRecording-9LKBFNDH.cjs} +2 -2
  34. package/dist/{startRecording-2p7-xVUh.cjs.map → startRecording-9LKBFNDH.cjs.map} +1 -1
  35. package/dist/types/index.d.ts +37 -0
  36. package/package.json +5 -4
  37. package/src/components/Chat/stories/MessageFeedback.stories.tsx +169 -0
  38. package/src/components/Chat/stories/Thread.stories.tsx +78 -0
  39. package/src/components/Replay.stories.tsx +326 -0
  40. package/src/components/Replay.tsx +241 -0
  41. package/src/components/assistant-ui/follow-on-suggestions.tsx +122 -0
  42. package/src/components/assistant-ui/markdown-text.tsx +6 -7
  43. package/src/components/assistant-ui/message-feedback.tsx +177 -0
  44. package/src/components/assistant-ui/thread.tsx +319 -80
  45. package/src/components/assistant-ui/tool-group.tsx +27 -16
  46. package/src/components/ui/tool-ui.tsx +59 -17
  47. package/src/contexts/ElementsProvider.tsx +7 -2
  48. package/src/contexts/ReplayContext.ts +7 -0
  49. package/src/global.css +14 -8
  50. package/src/hooks/useAuth.ts +3 -0
  51. package/src/hooks/useFollowOnSuggestions.ts +237 -0
  52. package/src/hooks/useMCPTools.ts +32 -12
  53. package/src/hooks/useRecordCassette.ts +79 -0
  54. package/src/index.ts +10 -0
  55. package/src/lib/cassette.ts +260 -0
  56. package/src/plugins/chart/component.tsx +48 -11
  57. package/src/plugins/components/PluginLoadingState.tsx +2 -2
  58. package/src/types/index.ts +40 -0
  59. package/src/vite-env.d.ts +1 -0
  60. package/dist/index-CVYyyxfm.cjs +0 -147
  61. package/dist/index-CVYyyxfm.cjs.map +0 -1
  62. package/dist/index-Co05S1C8.cjs.map +0 -1
  63. package/dist/index-D-QXb5EF.js.map +0 -1
  64. package/dist/index-vM3v0unX.js.map +0 -1
package/dist/elements.js CHANGED
@@ -1,16 +1,18 @@
1
- import { aa as s, ab as r, a8 as t, a8 as o, af as m, ac as n, ad as d, ae as u, a9 as E } from "./index-D-QXb5EF.js";
2
- import { u as f, u as h } from "./index-vM3v0unX.js";
1
+ import { aa as s, ab as r, a8 as t, a8 as o, ah as d, ad as m, ac as n, af as u, ag as l, ae as E, a9 as h } from "./index-B_7BIEfu.js";
2
+ import { u as i, u as c } from "./index-CtyV0c-T.js";
3
3
  export {
4
4
  s as Chat,
5
5
  r as ChatHistory,
6
6
  t as ElementsProvider,
7
7
  o as GramElementsProvider,
8
- m as MODELS,
8
+ d as MODELS,
9
+ m as Replay,
9
10
  n as ShareButton,
10
- d as defineFrontendTool,
11
- u as trackError,
12
- f as useElements,
13
- h as useGramElements,
14
- E as useThreadId
11
+ u as defineFrontendTool,
12
+ l as trackError,
13
+ i as useElements,
14
+ c as useGramElements,
15
+ E as useRecordCassette,
16
+ h as useThreadId
15
17
  };
16
18
  //# sourceMappingURL=elements.js.map
@@ -0,0 +1,14 @@
1
+ export interface FollowOnSuggestion {
2
+ id: string;
3
+ prompt: string;
4
+ }
5
+ /**
6
+ * Hook to fetch follow-on suggestions after the assistant finishes responding.
7
+ * Suggestions are generated based on the conversation context.
8
+ *
9
+ * Can be disabled via `config.thread.followUpSuggestions: false`
10
+ */
11
+ export declare function useFollowOnSuggestions(): {
12
+ suggestions: FollowOnSuggestion[];
13
+ isLoading: boolean;
14
+ };
@@ -3,12 +3,13 @@ import { experimental_createMCPClient as createMCPClient } from '@ai-sdk/mcp';
3
3
  import { UseQueryResult } from '@tanstack/react-query';
4
4
  import { Auth } from './useAuth';
5
5
  type MCPToolsResult = Awaited<ReturnType<Awaited<ReturnType<typeof createMCPClient>>['tools']>>;
6
- export declare function useMCPTools({ auth, mcp, environment, toolsToInclude, gramEnvironment, chatId, }: {
6
+ export declare function useMCPTools({ auth, mcp, environment, toolsToInclude, gramEnvironment, }: {
7
7
  auth: Auth;
8
8
  mcp: string | undefined;
9
9
  environment: Record<string, unknown>;
10
10
  toolsToInclude?: ToolsFilter;
11
11
  gramEnvironment?: string;
12
- chatId?: string;
13
- }): UseQueryResult<MCPToolsResult, Error>;
12
+ }): UseQueryResult<MCPToolsResult, Error> & {
13
+ mcpHeaders: Record<string, string>;
14
+ };
14
15
  export {};
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Hook to record the current chat conversation as a cassette file.
3
+ *
4
+ * Must be used inside a `GramElementsProvider` (or any `AssistantRuntimeProvider`).
5
+ *
6
+ * @example
7
+ * ```tsx
8
+ * function RecordableChat() {
9
+ * const { isRecording, startRecording, stopRecording, download } = useRecordCassette()
10
+ * return (
11
+ * <>
12
+ * <Chat />
13
+ * <button onClick={startRecording}>Record</button>
14
+ * <button onClick={stopRecording}>Stop</button>
15
+ * <button onClick={() => download('demo')}>Save Cassette</button>
16
+ * </>
17
+ * )
18
+ * }
19
+ * ```
20
+ */
21
+ export declare function useRecordCassette(): {
22
+ /** Whether recording is currently active. */
23
+ isRecording: boolean;
24
+ /** Current number of messages in the thread. */
25
+ messageCount: number;
26
+ /** Start recording from the current point in the conversation. */
27
+ startRecording: () => void;
28
+ /** Stop recording. */
29
+ stopRecording: () => void;
30
+ /** Downloads the recorded conversation as a `.cassette.json` file. */
31
+ download: (filename?: string) => void;
32
+ };