@base44/superagent-native 0.0.1

package/src/conversationStyles.ts

@@ -0,0 +1,412 @@
+import { Platform, StyleSheet } from 'react-native';
+
+export const conversationStyles = StyleSheet.create({
+  safeArea: { flex: 1, backgroundColor: '#000000' },
+  keyboard: { flex: 1 },
+  header: {
+    alignItems: 'center',
+    backgroundColor: '#000000',
+    flexDirection: 'row',
+    minHeight: 62,
+    paddingBottom: 6,
+    paddingHorizontal: 16,
+    paddingTop: 4,
+  },
+  headerIconButton: {
+    alignItems: 'center',
+    backgroundColor: '#171717',
+    borderColor: '#2A2A2A',
+    borderRadius: 24,
+    borderWidth: 1,
+    height: 48,
+    justifyContent: 'center',
+    width: 48,
+  },
+  headerTitleWrap: { alignItems: 'center', flex: 1, flexDirection: 'row', justifyContent: 'center', marginHorizontal: 10, minWidth: 0 },
+  headerTitleTextWrap: { flexShrink: 1, marginLeft: 9, minWidth: 0 },
+  headerTitle: { color: '#F7F7F7', fontSize: 16, fontWeight: '800', maxWidth: '100%', textAlign: 'left' },
+  headerSubtitle: { color: '#8E8E93', fontSize: 12, marginTop: 2, maxWidth: '100%', textAlign: 'left' },
+  headerActions: { alignItems: 'center', flexDirection: 'row', gap: 8 },
+  headerMenuButton: {
+    alignItems: 'center',
+    backgroundColor: '#171717',
+    borderColor: '#2A2A2A',
+    borderRadius: 24,
+    borderWidth: 1,
+    height: 48,
+    justifyContent: 'center',
+    minWidth: 64,
+    paddingHorizontal: 16,
+  },
+  headerShareButton: {
+    alignItems: 'center',
+    backgroundColor: '#171717',
+    borderColor: '#2A2A2A',
+    borderRadius: 24,
+    borderWidth: 1,
+    height: 48,
+    justifyContent: 'center',
+    width: 48,
+  },
+  scrollContent: {
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 2,
+    paddingTop: 8,
+  },
+  messagesContainer: {
+    alignSelf: 'center',
+    flexGrow: 1,
+    justifyContent: 'flex-end',
+    paddingBottom: 14,
+    width: '100%',
+  },
+  loadPreviousButton: {
+    alignSelf: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 18,
+    borderWidth: 1,
+    marginBottom: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  loadPreviousText: { color: '#BDBDC2', fontSize: 12, fontWeight: '700' },
+  statePanel: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 18,
+    borderWidth: 1,
+    flexDirection: 'row',
+    marginBottom: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+  },
+  statePanelText: { color: '#BDBDC2', fontSize: 13, marginLeft: 8 },
+  errorPanel: {
+    alignSelf: 'center',
+    backgroundColor: '#241111',
+    borderColor: '#5F2424',
+    borderRadius: 16,
+    borderWidth: 1,
+    marginBottom: 14,
+    maxWidth: '96%',
+    padding: 14,
+  },
+  errorPanelTitle: { color: '#FCA5A5', fontSize: 14, fontWeight: '800' },
+  errorPanelText: { color: '#FECACA', fontSize: 13, lineHeight: 19, marginTop: 5 },
+  messageGroup: { marginBottom: 3, width: '100%' },
+  messageGroupWithAvatar: { marginTop: 20 },
+  userMessageGroup: { alignItems: 'flex-end' },
+  assistantMessageGroup: { alignItems: 'flex-start' },
+  messageRow: { alignItems: 'flex-start', flexDirection: 'row', width: '100%' },
+  messageRowReversed: { flexDirection: 'row-reverse' },
+  messageAvatarSlot: { alignItems: 'center', marginTop: 2, width: 28 },
+  messageAvatarSpacer: { height: 28, width: 28 },
+  messageContent: { flex: 1, minWidth: 0 },
+  assistantMessageContent: { paddingLeft: 20 },
+  userMessageContent: { alignItems: 'flex-end' },
+  messageBubbleWrap: { maxWidth: '96%', minWidth: 0 },
+  scrollableMessageBubbleWrap: { width: '100%' },
+  assistantMessageBubbleWrap: { alignSelf: 'flex-start', marginLeft: 4 },
+  userMessageBubbleWrap: { alignSelf: 'flex-end', marginRight: 4 },
+  messageBubble: { paddingBottom: 9, paddingTop: 4 },
+  userBubble: {
+    backgroundColor: '#171717',
+    borderColor: '#2A2A2A',
+    borderRadius: 20,
+    borderWidth: 1,
+    paddingHorizontal: 13,
+    paddingTop: 11,
+  },
+  assistantBubble: {
+    backgroundColor: 'transparent',
+    paddingHorizontal: 0,
+  },
+  userBubbleStacked: { borderTopRightRadius: 20 },
+  assistantBubbleStacked: { paddingTop: 0 },
+  messageTime: { color: '#73737A', fontSize: 12, marginTop: 9 },
+  dateSeparator: { alignItems: 'center', flexDirection: 'row', marginVertical: 14 },
+  dateSeparatorLine: { backgroundColor: '#242424', flex: 1, height: 1 },
+  dateSeparatorText: { color: '#8E8E93', fontSize: 12, fontWeight: '800', paddingHorizontal: 14 },
+  replyQuote: {
+    backgroundColor: '#111111',
+    borderLeftColor: '#3F3F46',
+    borderLeftWidth: 2,
+    borderRadius: 10,
+    marginBottom: 9,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+  },
+  replyQuoteText: { color: '#A1A1AA', fontSize: 13, lineHeight: 18 },
+  fileChipsWrap: { flexDirection: 'row', flexWrap: 'wrap', marginTop: 10 },
+  fileChip: {
+    backgroundColor: '#171717',
+    borderColor: '#2A2A2A',
+    borderRadius: 12,
+    borderWidth: 1,
+    marginRight: 6,
+    marginTop: 6,
+    maxWidth: 180,
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+  },
+  fileChipText: { color: '#D4D4D8', fontSize: 12, fontWeight: '700' },
+  toolCallWrap: { marginTop: 12, width: '100%' },
+  toolCallSlot: { marginTop: 8, width: '100%' },
+  toolCallItem: {
+    backgroundColor: '#101010',
+    borderColor: '#29292E',
+    borderRadius: 13,
+    borderWidth: 1,
+    padding: 11,
+  },
+  customToolWidget: { width: '100%' },
+  toolCallHeader: { alignItems: 'center', flexDirection: 'row' },
+  toolCallIcon: { alignItems: 'center', height: 24, justifyContent: 'center', marginRight: 8, width: 24 },
+  toolCallMeta: { flex: 1, minWidth: 0 },
+  toolCallName: { color: '#E4E4E7', fontSize: 12, fontWeight: '800' },
+  toolCallStatus: { color: '#8E8E93', fontSize: 11, fontWeight: '700', marginTop: 2 },
+  toolCallResult: { color: '#A1A1AA', fontSize: 12, lineHeight: 17 },
+  toolCallResultBox: {
+    backgroundColor: '#080808',
+    borderColor: '#1F1F23',
+    borderRadius: 10,
+    borderWidth: 1,
+    marginTop: 9,
+    padding: 9,
+  },
+  toolTimelineHeader: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    minHeight: 30,
+    paddingHorizontal: 3,
+    paddingVertical: 3,
+  },
+  toolTimelineHeaderText: { color: '#C7C7CC', fontSize: 13, fontWeight: '800' },
+  toolTimelineChevron: { marginLeft: 5 },
+  toolTimelineChevronOpen: { marginLeft: 5, transform: [{ rotate: '90deg' }] },
+  toolTimelineRows: { marginTop: 3 },
+  toolTimelineItem: { minHeight: 39, width: '100%' },
+  toolTimelineRow: { flexDirection: 'row', minHeight: 39 },
+  toolTimelineIconCol: { alignItems: 'center', width: 28 },
+  toolTimelineLine: { backgroundColor: '#3A3A3E', flex: 1, marginTop: 1, width: 1 },
+  toolTimelineMeta: { alignSelf: 'stretch', flex: 1, minWidth: 0, paddingBottom: 8 },
+  toolTimelineRowHeader: { alignItems: 'center', flexDirection: 'row', minHeight: 27, width: '100%' },
+  toolTimelineTitle: { color: '#F4F4F5', flexShrink: 1, fontSize: 15, fontWeight: '800' },
+  toolTimelineInline: {
+    color: '#A1A1AA',
+    flex: 1,
+    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
+    fontSize: 13,
+    fontWeight: '700',
+    marginLeft: 8,
+  },
+  toolTimelineStatus: { color: '#A1A1AA', fontSize: 13, fontWeight: '700', marginLeft: 20, marginTop: 1 },
+  toolTimelineDetailsSlot: {
+    alignSelf: 'stretch',
+    marginLeft: 8,
+    marginRight: 2,
+    paddingBottom: 10,
+  },
+  toolTimelineDetails: {
+    backgroundColor: '#070707',
+    borderColor: '#242429',
+    borderRadius: 11,
+    borderWidth: 1,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 8,
+    overflow: 'hidden',
+    paddingHorizontal: 0,
+    paddingVertical: 0,
+    width: '100%',
+  },
+  toolTimelineDetailVerticalScroll: {
+    maxHeight: 220,
+    width: '100%',
+  },
+  toolTimelineDetailHorizontalScroll: {
+    width: '100%',
+  },
+  toolTimelineDetailScrollContent: {
+    paddingHorizontal: 10,
+    paddingVertical: 9,
+  },
+  toolTimelineDetailText: {
+    color: '#D4D4D8',
+    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  toolApprovalCard: {
+    backgroundColor: '#111111',
+    borderColor: '#2A2A2E',
+    borderRadius: 15,
+    borderWidth: 1,
+    marginTop: 8,
+    padding: 13,
+    width: '100%',
+  },
+  toolApprovalHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  toolApprovalHeaderText: { flex: 1, marginLeft: 10, minWidth: 0 },
+  toolApprovalTitle: { color: '#F4F4F5', fontSize: 14, fontWeight: '900' },
+  toolApprovalSubtitle: { color: '#A1A1AA', fontSize: 12, fontWeight: '700', marginTop: 2 },
+  toolApprovalBody: { color: '#D4D4D8', fontSize: 13, lineHeight: 19, marginTop: 12 },
+  toolApprovalMuted: { color: '#8E8E93', fontSize: 11, fontWeight: '800', marginBottom: 7 },
+  toolApprovalIcon: {
+    alignItems: 'center',
+    backgroundColor: '#1F1F22',
+    borderColor: '#34343A',
+    borderRadius: 13,
+    borderWidth: 1,
+    height: 34,
+    justifyContent: 'center',
+    width: 34,
+  },
+  toolApprovalBrandIcon: {
+    alignItems: 'center',
+    backgroundColor: '#F4F0E6',
+    borderRadius: 13,
+    height: 34,
+    justifyContent: 'center',
+    overflow: 'hidden',
+    width: 34,
+  },
+  toolApprovalBrandFallback: { color: '#111111', fontSize: 12, fontWeight: '900' },
+  toolApprovalScopeWrap: { marginTop: 12 },
+  toolApprovalChipWrap: { flexDirection: 'row', flexWrap: 'wrap', gap: 6, marginTop: 10 },
+  toolApprovalChip: {
+    backgroundColor: '#181818',
+    borderColor: '#303035',
+    borderRadius: 10,
+    borderWidth: 1,
+    maxWidth: '100%',
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+  },
+  toolApprovalChipText: {
+    color: '#C7C7CC',
+    fontFamily: Platform.select({ android: 'monospace', ios: 'Menlo' }),
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  toolApprovalInputs: { gap: 11, marginTop: 12 },
+  toolApprovalInputGroup: { gap: 5 },
+  toolApprovalInputLabel: { color: '#F4F4F5', fontSize: 12, fontWeight: '800' },
+  toolApprovalInputHelp: { color: '#A1A1AA', fontSize: 11, lineHeight: 15 },
+  toolApprovalInput: {
+    backgroundColor: '#080808',
+    borderColor: '#2A2A2E',
+    borderRadius: 10,
+    borderWidth: 1,
+    color: '#F4F4F5',
+    fontSize: 14,
+    minHeight: 42,
+    paddingHorizontal: 11,
+    paddingVertical: 9,
+  },
+  toolApprovalMultilineInput: {
+    minHeight: 92,
+    paddingTop: 10,
+  },
+  toolApprovalActions: { flexDirection: 'row', gap: 8, marginTop: 13 },
+  toolApprovalPrimaryButton: {
+    alignItems: 'center',
+    backgroundColor: '#F4F4F5',
+    borderRadius: 11,
+    flexDirection: 'row',
+    gap: 6,
+    justifyContent: 'center',
+    minHeight: 38,
+    paddingHorizontal: 13,
+  },
+  toolApprovalSecondaryButton: {
+    alignItems: 'center',
+    backgroundColor: '#171717',
+    borderColor: '#333338',
+    borderRadius: 11,
+    borderWidth: 1,
+    justifyContent: 'center',
+    minHeight: 38,
+    paddingHorizontal: 13,
+  },
+  toolApprovalButtonDisabled: { opacity: 0.55 },
+  toolApprovalPrimaryText: { color: '#111111', fontSize: 13, fontWeight: '900' },
+  toolApprovalSecondaryText: { color: '#E4E4E7', fontSize: 13, fontWeight: '800' },
+  toolApprovalPreviousText: { color: '#8E8E93', fontSize: 12, fontStyle: 'italic', lineHeight: 17, marginTop: 12 },
+  toolApprovalError: { color: '#FCA5A5', fontSize: 12, fontWeight: '700', lineHeight: 17, marginTop: 10 },
+  toolDoneRow: { alignItems: 'center', flexDirection: 'row', minHeight: 32 },
+  toolDoneText: { color: '#F4F4F5', fontSize: 15, fontWeight: '800', marginLeft: 0 },
+  toolRunningWrap: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    paddingHorizontal: 3,
+    paddingVertical: 5,
+  },
+  toolRunningDots: { alignItems: 'center', flexDirection: 'row', marginRight: 10 },
+  toolRunningDot: {
+    backgroundColor: '#BDBDC2',
+    borderRadius: 3,
+    height: 5,
+    marginRight: 3,
+    width: 5,
+  },
+  toolRunningText: { color: '#C9CAF8', fontSize: 15, fontWeight: '800' },
+  identityRow: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    marginBottom: 6,
+  },
+  identityName: { color: '#BDBDC2', flexShrink: 1, fontSize: 15, fontWeight: '700', minWidth: 0 },
+  userIdentityRow: { alignSelf: 'flex-end', flexDirection: 'row-reverse', marginRight: 0 },
+  userIdentityName: { color: '#8E8E93', marginRight: 8, textAlign: 'right' },
+  assistantIdentityRow: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    marginBottom: 6,
+  },
+  assistantIdentityName: { color: '#F4F4F5', fontSize: 15, fontWeight: '800', marginLeft: 8 },
+  typingWrap: {
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexDirection: 'row',
+    marginLeft: 4,
+    marginTop: 8,
+    paddingHorizontal: 3,
+    paddingVertical: 6,
+  },
+  thinkingIcon: {
+    alignItems: 'center',
+    backgroundColor: '#1D120D',
+    borderColor: '#3A2317',
+    borderRadius: 12,
+    borderWidth: 1,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+  },
+  typingTextWrap: { marginLeft: 8 },
+  typingText: { color: '#C9CAF8', fontSize: 15, fontWeight: '800' },
+  queuedWrap: {
+    alignSelf: 'flex-end',
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderRadius: 14,
+    borderWidth: 1,
+    marginRight: 4,
+    marginTop: 8,
+    maxWidth: '92%',
+    padding: 11,
+  },
+  queuedTitle: { color: '#8E8E93', fontSize: 11, fontWeight: '800', marginBottom: 4 },
+  queuedMessage: { color: '#C7C7CC', fontSize: 12, lineHeight: 17, marginTop: 2 },
+});