@tanstack/ai-devtools-core 0.2.1 → 0.2.3
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.
- package/README.md +1 -0
- package/dist/esm/components/ConversationDetails.js +74 -1
- package/dist/esm/components/ConversationDetails.js.map +1 -1
- package/dist/esm/components/conversation/ActivityEventsTab.d.ts +8 -0
- package/dist/esm/components/conversation/ActivityEventsTab.js +72 -0
- package/dist/esm/components/conversation/ActivityEventsTab.js.map +1 -0
- package/dist/esm/components/conversation/ConversationHeader.js +109 -66
- package/dist/esm/components/conversation/ConversationHeader.js.map +1 -1
- package/dist/esm/components/conversation/ConversationTabs.d.ts +1 -1
- package/dist/esm/components/conversation/ConversationTabs.js +107 -3
- package/dist/esm/components/conversation/ConversationTabs.js.map +1 -1
- package/dist/esm/components/conversation/MessageCard.js +83 -28
- package/dist/esm/components/conversation/MessageCard.js.map +1 -1
- package/dist/esm/components/conversation/index.d.ts +1 -0
- package/dist/esm/store/ai-context.d.ts +19 -2
- package/dist/esm/store/ai-context.js +528 -262
- package/dist/esm/store/ai-context.js.map +1 -1
- package/dist/esm/styles/use-styles.d.ts +7 -0
- package/dist/esm/styles/use-styles.js +65 -1
- package/dist/esm/styles/use-styles.js.map +1 -1
- package/package.json +2 -2
- package/src/components/ConversationDetails.tsx +70 -1
- package/src/components/conversation/ActivityEventsTab.tsx +57 -0
- package/src/components/conversation/ConversationHeader.tsx +52 -36
- package/src/components/conversation/ConversationTabs.tsx +121 -2
- package/src/components/conversation/MessageCard.tsx +45 -10
- package/src/components/conversation/index.ts +1 -0
- package/src/store/ai-context.tsx +783 -418
- package/src/styles/use-styles.ts +65 -1
package/src/styles/use-styles.ts
CHANGED
|
@@ -680,6 +680,54 @@ const stylesFactory = (theme: 'light' | 'dark') => {
|
|
|
680
680
|
white-space: pre-wrap;
|
|
681
681
|
word-break: break-word;
|
|
682
682
|
`,
|
|
683
|
+
collapsibleSection: css`
|
|
684
|
+
margin-top: ${size[2]};
|
|
685
|
+
border: 1px solid ${t(colors.gray[200], colors.darkGray[700])};
|
|
686
|
+
border-radius: ${border.radius.md};
|
|
687
|
+
overflow: hidden;
|
|
688
|
+
`,
|
|
689
|
+
collapsibleSummary: css`
|
|
690
|
+
cursor: pointer;
|
|
691
|
+
padding: ${size[2]} ${size[3]};
|
|
692
|
+
background: ${t(colors.gray[100], colors.darkGray[800])};
|
|
693
|
+
font-size: ${fontSize.xs};
|
|
694
|
+
font-weight: ${font.weight.medium};
|
|
695
|
+
color: ${t(colors.gray[700], colors.gray[300])};
|
|
696
|
+
user-select: none;
|
|
697
|
+
&:hover {
|
|
698
|
+
background: ${t(colors.gray[200], colors.darkGray[700])};
|
|
699
|
+
}
|
|
700
|
+
`,
|
|
701
|
+
collapsibleContent: css`
|
|
702
|
+
padding: ${size[3]};
|
|
703
|
+
background: ${t(colors.gray[50], colors.darkGray[900])};
|
|
704
|
+
font-size: ${fontSize.xs};
|
|
705
|
+
max-height: 300px;
|
|
706
|
+
overflow-y: auto;
|
|
707
|
+
`,
|
|
708
|
+
systemPromptItem: css`
|
|
709
|
+
display: flex;
|
|
710
|
+
gap: ${size[2]};
|
|
711
|
+
padding: ${size[2]};
|
|
712
|
+
margin-bottom: ${size[2]};
|
|
713
|
+
background: ${t(colors.gray[100], colors.darkGray[800])};
|
|
714
|
+
border-radius: ${border.radius.sm};
|
|
715
|
+
&:last-child {
|
|
716
|
+
margin-bottom: 0;
|
|
717
|
+
}
|
|
718
|
+
`,
|
|
719
|
+
systemPromptIndex: css`
|
|
720
|
+
font-weight: ${font.weight.semibold};
|
|
721
|
+
color: ${colors.purple[400]};
|
|
722
|
+
font-size: 10px;
|
|
723
|
+
flex-shrink: 0;
|
|
724
|
+
`,
|
|
725
|
+
systemPromptText: css`
|
|
726
|
+
color: ${t(colors.gray[700], colors.gray[300])};
|
|
727
|
+
white-space: pre-wrap;
|
|
728
|
+
word-break: break-word;
|
|
729
|
+
line-height: 1.4;
|
|
730
|
+
`,
|
|
683
731
|
tabsContainer: css`
|
|
684
732
|
display: flex;
|
|
685
733
|
gap: ${size[2]};
|
|
@@ -691,10 +739,26 @@ const stylesFactory = (theme: 'light' | 'dark') => {
|
|
|
691
739
|
color: ${colors.white};
|
|
692
740
|
border-color: ${colors.pink[400]};
|
|
693
741
|
`,
|
|
742
|
+
tabButtonPulse: css`
|
|
743
|
+
position: relative;
|
|
744
|
+
animation: activityPulse 1.4s ease-in-out infinite;
|
|
745
|
+
@keyframes activityPulse {
|
|
746
|
+
0% {
|
|
747
|
+
box-shadow: 0 0 0 0 ${colors.pink[400]}55;
|
|
748
|
+
}
|
|
749
|
+
70% {
|
|
750
|
+
box-shadow: 0 0 0 8px ${colors.pink[400]}00;
|
|
751
|
+
}
|
|
752
|
+
100% {
|
|
753
|
+
box-shadow: 0 0 0 0 ${colors.pink[400]}00;
|
|
754
|
+
}
|
|
755
|
+
}
|
|
756
|
+
`,
|
|
694
757
|
contentArea: css`
|
|
695
758
|
flex: 1;
|
|
696
759
|
overflow: auto;
|
|
697
760
|
padding: ${size[3]};
|
|
761
|
+
padding-bottom: ${size[6]};
|
|
698
762
|
`,
|
|
699
763
|
emptyMessages: css`
|
|
700
764
|
padding: ${size[6]};
|
|
@@ -712,7 +776,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
|
|
|
712
776
|
overflow: hidden;
|
|
713
777
|
`,
|
|
714
778
|
messageCardUser: css`
|
|
715
|
-
padding: ${size[
|
|
779
|
+
padding: ${size[3]};
|
|
716
780
|
border: 1.5px solid oklch(0.45 0.12 260);
|
|
717
781
|
`,
|
|
718
782
|
messageCardAssistant: css`
|